전체 글
[JavaScript] Selection과 Range
[JavaScript] Selection과 Range
2020.12.29[JavaScript] Selection과 Range JavaScript를 사용해 document 내의 선택된 항목에 접근해서 DOM 노드의 전체 또는 선택된 부분을 가져오는 등의 작업을 할 수 있습니다. Selection과 Range는 WYSIWYG 에디터, 리치 에디터 등을 구현할 때 매우 중요하게 사용됩니다. TLDR document 내의 선택된 콘텐츠의 정보를 가져오기 위해 Selection과 Range 객체를 사용할 수 있습니다. input, textarea 엘리먼트의 경우, element.selectionStart 및 element.selectionEnd 값을 설정해 조작할 수 있습니다. Selection 및 Range 가져오기 const selection = document.getSelect..
[JavaScript] 캘린더 만들기 - 한 주 구하기
[JavaScript] 캘린더 만들기 - 한 주 구하기
2020.12.20[JavaScript] 캘린더 만들기 - 한 주 구하기 얼마 전, 사이드 프로젝트를 진행하면서 달력이 필요한 적이 있었습니다. 기존의 캘린더 라이브러리의 경우 커스텀이 어렵고, 원하지 않는 기능까지 포함하고 있어서 간단하고 커스텀에도 용이한 달력을 직접 만들게 되었습니다. 이번 포스팅에서는 프로젟트를 진행하면서 만들었던 달력의 핵심 기능에 대해서 정리 후, 공유해보려 합니다. typscript를 이용해 작업했으며, arrow function 등과 같은 es6 문법을 사용했으며. date-fns 라이브러리를 사용해 Date를 관리하고 있습니다. 달력을 커스텀해서 작업해야 하는 분들에게 도움이 되었으면 합니다. 달력의 구조 달력의 가장 기본적인 형태는 한 달의 전체 일자를 표시하며, 한 달은 대게 5주~6주..
[React] 전역 상태 관리 라이브러리 'sagen'을 만들면서
[React] 전역 상태 관리 라이브러리 'sagen'을 만들면서
2020.12.13[React] 전역 상태관리 라이브러리 'sagen'을 만들면서 이번에 전역 상태관리 라이브러리 sagen를 작업 후 배포하였습니다. 왜 만들었는가? 처음 리액트를 공부했을 시절 MobX가 유명하지 않았을 때라서 전역 상태를 관리하기 위한 방법으로 redux를 사용해야 했었습니다. 리액트의 내용도 겨우 이해하면서 프로젝트 개발을 진행하고 있었는데, redux의 내용을 이해하는 것은 너무 힘들었습니다. props drilling 등과 같은 문제를 해결하기 위한 방법으로 전역 상태 관리 라이브러리를 사용하는 것이므로 프로젝트의 규모가 커지고 관리해야 할 데이터가 많다면 전역 상태 관리가 필요하다는 것을 인지는 하겠으나, 좀 쉽게 관리할 수는 없을까?? 하는 생각을 늘 하고 있었습니다. ContextAPI r..
[React] 전역 상태 관리 라이브러리 제작기 (3)
[React] 전역 상태 관리 라이브러리 제작기 (3)
2020.12.02[React] 전역 상태 관리 라이브러리 제작기 (3) [React] 전역 상태 관리 라이브러리 제작기 (1) [React] 전역 상태 관리 라이브러리 제작기 (2) 위 포스트에서 작업한 전역 상태 관리 라이브러리에 useReducer와 같이 reducer 함수를 전달받아서 dispatch action으로 상태를 관리하는 구조를 추가하도록 하겠습니다. Redux의 상태관리 Redux는 아래와 같이 작성해서 상태 관리를 할 수 있습니다. import { createStore } from 'redux' function counterReducer(state = { value: 0 }, action) { switch (action.type) { case 'counter/incremented': return { ..
[React] 전역 상태 관리 라이브러리 제작기 (2)
[React] 전역 상태 관리 라이브러리 제작기 (2)
2020.12.01[React] 전역 상태 관리 라이브러리 제작기 (2) 이전 글 보기 [React] 전역 상태 관리 라이브러리 제작기 (1) 개선되어야 하는 부분 이전 작업의 내용만 갖고도 전역 상태 관리를 할 수 있습니다. 하지만, 복잡한 데이터를 다루는 것에 용이하지는 않습니다. 그 이유는 Context API와 같이 객체 또는 배열 데이터를 저장한다면 === 연산자로 비교할 수 없어 데이터가 변경되지 않았음에도 리렌더링이 발생하기 때문입니다. 이 이유는 제가 Context API를 사용하지 않고 전역 상태 관리 라이브러리를 만들기로 결심한 이유가 되기도 합니다. 또한, useState의 setState를 사용하면 함수를 넘길 수 있는데, 함수의 첫 번째 인자로 현재 값을 받아올 수 있습니다. 이를 이용해 Hook의..
[React] 전역 상태 관리 라이브러리 제작기 (1)
[React] 전역 상태 관리 라이브러리 제작기 (1)
2020.11.29전역 상태 관리 라이브러리 제작기 (1) 이전부터 '전역 상태 관리 라이브러리를 만들어보고 싶다'라는 생각을 갖고 있었습니다. 최근 Context API와 Redux의 구조가 어떻게 이뤄져 있는지에 대해 알아본 뒤 전역 상태를 관리하는 흐름에 대해 대충 알게 되어서 이를 활용해 라이브러리를 제작해보려 합니다. 라이브러리 설계 Context API를 사용하지 않고 상태 관리를 하도록 작성할 예정입니다. 또한 store가 생성될 때 store에서 데이터를 갖고 있도록 하여 Provider 없이 사용 가능하도록 하려 합니다. Provider가 없는 상태 관리에 대해서는 zustand 상태 관리 라이브러리를 보고 아이디어를 얻었습니다. 필요한 요소 상태 관리 라이브러리를 만든다고 할 때, 제대로 동작하기 위해서..
[JavaScript] 가변 인자 함수
[JavaScript] 가변 인자 함수
2020.11.16가변 인자 함수 가변 인자 함수는 매개변수의 최대 갯수가 지정되지 않은 함수를 의미합니다. sum(10, 20, 30, ...); 가변 인자 함수를 이용해 위와 같이 인자의 갯수 제한이 없는 함수를 작성할 수 있습니다. arguments 객체 가변 인자 함수를 작성하는 가장 기본적인 방법은 arguments 객체를 사용하는 것입니다. function sum() { console.log('length: ', arguments.length); console.log('index 1: ', arguments[1]); } sum(10, 20); 위 코드의 실행 결과는 다음과 같습니다. length: 2 index 1: 20 arguments 객체에 대하여 arguments 객체는 function 함수에서 접근 가..
create-react-app을 사용하여 chrome extension 만들기
create-react-app을 사용하여 chrome extension 만들기
2020.11.15create-react-app을 사용하여 chrome extension 만들기 create-react-app(CRA)는 React 앱을 손쉽게 빌드 및 배포할 수 있는 환경을 제공합니다. 최근 Chrome 확장 프로그램 세팅을 진행하면서 CRA를 사용해 손쉽게 확장 프로그램을 제작하고 싶었지만, CRA는 기본적으로 SPA 만을 지원하여 추가적인 설정이 필요했습니다. 만들려 하는 크롬 익스텐션에서 팝업 환경과 옵션 페이지가 모두 필요하여 빌드 엔트리를 나눌 필요가 있었으나, options_page에 관련된 정보를 찾을 수 없었어서 직접 작업하면서 겪은 과정을 정리합니다. React App 만들기 우선, create-react-app을 사용하여 React 앱을 만들어 줍니다. 타입스크립트를 사용하기 위해 -..
자바스크립트 이벤트 델리게이션 패턴
자바스크립트 이벤트 델리게이션 패턴
2020.11.12자바스크립트 이벤트 델리게이션 패턴 이벤트 델리게이션 패턴은 자바스크립트의 대표적인 디자인 패턴 중 하나입니다. 최근 HTML, CSS를 조작하는 웹에서 사용자의 '클릭', '호버' 등과 같은 동적인 이벤트를 관리하기 위해서 DOM에 이벤트를 작성하는 '이벤트 리스너(Event Listener)'가 있습니다. 이벤트 델리게이션 패턴은 이 이벤트 리스너를 보다 더 효율적으로 관리하기 위한 디자인 패턴입니다. 자바스크립트 이벤트 리스너 먼저, 자바스크립트의 이벤트 리스너에 대해 알아보겠습니다. 이벤트 리스너의 말 그대로 이벤트가 발생하기까지 대기하고 있습니다. 여기에서 이벤트란, 사용자가 브라우저에 하는 행동을 의미합니다. 이벤트 리스너가 엘리먼트에 추가되어 있다면 엘리먼트가 클릭되거나 마우스가 호버되고 더..
JavaScript 이벤트 전파 중단 방법 (IE 대응 추가)
JavaScript 이벤트 전파 중단 방법 (IE 대응 추가)
2020.11.10JavaScript 이벤트 전파 중단 방법 (IE 대응 추가) 자바스크립트에서 이벤트 처리를 할 때 계층적으로 이벤트가 실행되는 경우가 있습니다. 이를 이벤트 버블링이라 합니다. 또한, 이벤트 버블링으로 인해 예상하지 못한 결과를 겪을 때가 있습니다. 이에 따른 해결 방법은 다음과 같습니다. 이벤트 수행을 막는 방법 자바스크립트에서 이벤트 수행을 막기 위해서 제공하는 메소드가 몇 가지 있습니다. event.preventDefault() event.stopPropagation() event.stopImmediatePropagation() 각각 어느 상황에 사용되는지에 대해 알아보겠습니다. 부모에게 이벤트가 전파되는 것을 막기 클릭 $parentDiv = document.querySelector('#..
NestJS 공식 문서 번역 모아보기
NestJS 공식 문서 번역 모아보기
2020.11.09NestJS 공식 문서 번역 모아보기 NestJS에 대해 관심이 생겨서 공신 문서를 시간이 될 때 번역하고 있습니다. [Prolog] INTRODUCTION 2020/10/24 - [Node/NestJS] - NestJS 소개 [OVERVIEW] NestJS 개요 2020/10/25 - [Node/NestJS] - NestJS 개요-첫 걸음 2020/11/08 - [Node/NestJS] - NestJS 개요-컨트롤러.라우팅 2020/11/09 - [Node/NestJS] - NestJS 개요-컨트롤러.Request 객체
NestJS 개요-컨트롤러.Request 객체
NestJS 개요-컨트롤러.Request 객체
2020.11.09NestJS 개요-컨트롤러.Request 객체 컨트롤러 컨트롤러는 들어오는 요청을 처리하고 클라이언트에 응답합니다. 컨트롤러의 목적은 애플리케이션에 대한 특정 요청을 수신하는 것입니다. 라우팅 컨트롤러는 어떤 컨트롤러가 어떠한 요청을 받는지에 대해 제어합니다. 컨트롤러에 둘 이상의 경로가 있을 수 있으며, 서로 다른 작업을 수행하도록 할 수 있습니다. 컨트롤러를 생성하기 위해 클래스와 데코레이터를 사용합니다. 데코레이터는 요청을 컨트롤러에 연결하여 Nest가 라우팅 맵을 만들 수 있도록 합니다. Request 객체 핸들러는 종종 클라이언트의 request 요청 사항에 접근해야 합니다. Nest는 핸들러의 서명에 @Req() 데코레이터를 추가하여 request object에 대해 액세스할 수 있습니다(기본..