IT 지식
-
[CSS] min, max, clampIT 지식 2022. 8. 14. 17:32
1. CSS min/max 사용법 CSS min은 min(a, b, ...) 의 방식으로 사용하며 인자로 받은 값들 중 가장 작은 값을 값으로 취하는 함수이다. 예시 .container { width: min(50%, 200px) } 위와 같이 사용한다면, .container의 width 는 50%와 200px 중 작은 것을 골라 적용하게 된다. 내가 작성한 예시를 기준으로 한다면 위의 값은 .container { width: 50%; max-width: 200px; } 과 같다고 볼 수 있다. max 역시 이와 마찬가지로 max(a, b, ...)의 방식처럼 사용하며, 인자로 받은 값들 중 가장 큰 값을 적용하게 된다. 예시 .container { width: max(50%, 200px) } 위와 같이..
-
[TIL] DTO 란?IT 지식 2022. 7. 31. 21:21
nest 공부를 하다보니 DTO, Entity 라는 개념을 자주 듣게 되어 그것이 무엇인지 정리해보는 시간을 가지려고 합니다. Entity Entity란 쉽게 말하면 하나의 실체라고 할 수 있습니다. DB 테이블에 존재하는 Column들을 필드로 가지는 객체를 말합니다. Entity는 DB의 테이블과 1대 1로 대응되며, 때문에 테이블이 가지지 않는 칼럼을 필드로 가져서는 안됩니다. 또한 Entity 클래스는 다른 클래스를 상속받거나 인터페이스의 구현체여서는 안됩니다. 현재 제가 이해하고 있는 방식으로는, 하나의 테이블 또는 객체가 바로 entity다 라고 이해하고 있습니다. DTO DTO는 Data Transfer Object의 약자로 프로세스 간 데이터를 전달하는 객체를 의미합니다. 백엔드에서 요청을..
-
[TIL] 자바스크립트 thisIT 지식 2021. 12. 6. 14:37
프론트엔드 개발자 면접을 보다보면 this에 관한 질문을 많이 받습니다. 혹은 객체지향 프로그래밍을 작성할 때 class 문법을 활용하다보면 this를 많이 활용하게 되는데요, 오늘은 이 this가 도대체 어떤 것인지에 대해 알아보도록 하겠습니다. 1. this가 도대체 뭐죠? 대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다. 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있습니다. ES5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입했고, ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했습니다(이는 렉시컬 컨텍스트안의 this값을 유지합니다). MDN에 나와있는 내용을 보면 너무 추상적이..
-
Redux Thunk & SagaIT 지식 2021. 11. 23. 10:34
프론트엔드 개발을 React로 하다보면 다양한 이유로 Redux를 만나게 되고 활용하게 됩니다. 그리고 Redux를 접해서 사용하다보면 자연스레 Redux Thunk와 Redux Saga 역시 접하게 됩니다. 이 두 리덕스 미들웨어들은 프로젝트에서 비동기처리를 담당하는 역할을 하는 걸로 알려져 있습니다. 비슷하게 비동기 로직을 처리하는 이 도구들은 어떤 차이점이 있길래 서로 다른 이름으로, 다르게 쓰이고 있는 것일까요? 이번 포스팅에서는 두 가지 미들웨어의 간단한 사용법과 어떤 상황에서 어떤 미들웨어를 사용하는 것이 조금 더 나을지에 대해 소개해드리도록 하겠습니다. 1. Redux의 미들웨어 우선 이 두 툴들의 이름이 미들웨어라는 것을 짚고 넘어가야할 것 같습니다. 리덕스의 미들웨어는 리덕스가 다른 상태..
-
메타태그에 대한 이해IT 지식 2021. 8. 19. 20:42
Html의 head는 페이지나 css의 링크, 파비콘, 그리고 다른 메타데이터를 포함하는 태그입니다. 즉 페이지에 대한 메타데이터를 포함하는 역할을 하는 것입니다. 메타태그를 활용하면 다음과 같은 일을 할 수 있습니다. SEO 메타태그에 description, keywords, author, subject, 등의 정보를 표기할 수 있으며, 검색엔진은 이런 정보를 적극적으로 활용합니다. IE = Edge 인터넷 익스플로러 10 이하 버전은 문서를 읽을 때 쿼크모드 혹은 IE7 모드를 사용해서 웹페이지를 표시합니다. 사용자가 최근 브라우저를 사용하고 있어도 웹페이지가 적절하게 렌더링 되지 않을 수도 있는데, 이때 메타태그를 활용하여 최신 엔진으로 페이지를 렌더링 할 수 있습니다. 뷰포트 설정 메타태그를 활용..
-
그래프에 대한 이해IT 지식 2021. 8. 18. 22:24
그래프 용어 정점: 그래프를 형성하는 노드 간선: 그래프에서 노드 간의 연결을 말한다. 정점 차수: 정점(노드)에 연결된 간선의 개수를 나타낸다. 희소 그래프: 정점들 간에 가능한 연결 중 일부만 존재하는 경우 해당 그래프를 희소 그래프라고 한다. 밀집 그래프: 다양한 정점들 간에 연결이 많은 경우 해당 그래프를 밀집 그래프라고 한다. 순환 그래프: 어떤 정점에서 출발해 해당 정점으로 다시 돌아오는 경로가 존재하는 지향성 그래프를 말한다. 가중치: 간선에 대한 값으로, 문맥에 따라 다양한 것을 나타낼 수 있다. // 무지향성 그래프 function UndirectedGraph (){ this.edges = {}; } UndirectedGraph.prototype.addVertex = function (v..
-
[TIL]캐싱IT 지식 2021. 7. 25. 18:22
오늘 포스팅은 자바스크립트로 하는 자료구조와 알고리즘 14장 캐싱을 바탕으로 작성했습니다. 1. 캐싱이란? 캐싱(caching)은 자료를 임시 메모리에 저장하는 과정으로 추후에 해당 자료가 다시 필요할 때 쉽게 해당 자료를 얻을 수 있다. 캐싱의 예로 데이터베이스 시스템이 데이터를 캐싱해 하드 드라이브를 다시 읽는 작업을 피한다. 또한 웹 브라우저가 웹 페이지를 캐싱해 콘텐츠를 다시 다운로드 하는 작업을 피한다. 간단히 이야기 해서 캐싱의 목표는 히트(필요한 항목이 캐시에 존재하는 경우)를 최대화하고 미스(필요한 항목이 캐시에 존재하지 않는 경우)를 최소화 하는 것이다. 2. 캐싱 이해하기 캐시 설계는 다음의 두 가지 요소를 고려한다. 시간적 지역성: 최근에 접근한 메모리 위치를 다시 접근할 가능성이 높..
-
React-Quill을 활용하여 게시판 만들기(with TypeScript)IT 지식 2021. 7. 21. 22:37
이번 포스팅은 위지윅(WYSIWIG) 게시판 중의 하나인 React-Quill을 활용한 게시판 만드는 방법 입니다. Quill quill은 rich text editor의 일종으로 마이크로소프트 등의 기업에서 후원하고 있는 텍스트 에디터입니다. https://quilljs.com/ 퀼 공식 페이지 주소 https://www.npmjs.com/package/react-quill npm링크 에디터 자체는 사용하기 쉬운 편이었는데, 여기에 이미지를 업로드 하는 기능을 붙이는 것이 어려워 꽤나 애를 먹었던 에디터입니다. 사용법(with TypeScript) 사용법은 정말 간단합니다. import { useRef, useState, useMemo } from "react"; //이렇게 라이브러리를 불러와서 사용하..