자바스크립트
[JavaScript] 함수를 콜백으로 전달할 때
[JavaScript] 함수를 콜백으로 전달할 때
2021.02.12메일로 한 통의 미디엄 글을 받았습니다. 해당 글의 경우 parseInt를 map에 전달했을 때 이상한 값이 나온다는 내용이었는데 코드는 다음과 같습니다. ['1', '7', '11'].map(parseInt); // [1, NaN, 3] ['1', '7', '11'].map(Number); // [1, 7, 11] 위와 같이 나오는 이유에 대한 글인데, parseInt와 Number의 매개변수는 각각 다음과 같습니다. parseInt: string, radix Number: value Number에서는 잘 동작하지만 parseInt에서는 값의 결과가 깨지는 이유는 array.map의 콜백으로 parseInt를 사용하는 것이 함수 설계에 맞지 않기 때문입니다. 무엇이 문제일까? const numList ..
sagen - 상태 관리 라이브러리
sagen - 상태 관리 라이브러리
2021.02.10sagen npm sagen Management global state with out provider www.npmjs.com 규모가 큰 앱을 개발할 때 props drilling을 피하기 위한 목적으로, 상태가 변경하는 것을 직접 모니터링하기 위한 목적으로 또는 그 외의 이유로 상태 관리 라이브러리를 사용하곤 합니다. 또한, 상태 관리 라이브러리를 사용하지 않고 ContextAPI를 사용하는 경우도 있습니다(이 경우, ContextAPI는 타 상태 관리 라이브러리와 달리 렌더링 최적화가 이루어지지 않음을 인지하고 설계되어야 합니다). 위와 같이 이미 많은 상태 관리 라이브러리가 존재하며, 새로운 라이브러리가 종종 등장합니다. 본 글에서는 상태 관리 라이브러리 중 하나인 sagen에 대해서 알아보도록 ..
[React] useEffect의 동작 원리
[React] useEffect의 동작 원리
2021.01.31useEffect Hook은 dependency 배열 내에 지정된 값의 변화가 일어났을 때 이펙트 함수가 실행됩니다. 이러한 특성으로 인해 컴포넌트가 마운트될 때 API를 통해 데이터를 가져오거나, state 값 또는 props 값이 변경될 때 특정 함수를 실행시키는 등의 작업을 하는 데 사용됩니다. 함수 컴포넌트에서 return 구문 밖에서의 함수 실행은 거의 모두 useEffect 내에 작성됩니다. 또한, 컴포넌트는 하나 이상의 useEffect Hook을 가질 수 있습니다. 이 게시글에서는 useEffect가 어떻게 동작하는지에 대해서 알아보도록 하겠습니다. TLDR useEffect로 componentDidMount 흉내내기 useEffect로 componentDidMount를 흉내내기 위한 방법..
[JavaScript] Virtual DOM 만들기
[JavaScript] Virtual DOM 만들기
2021.01.26React 공식 홈페이지에서는 Virtual DOM을 'UI로 표현될 객체를 가상 메모리에 저장하여 라이브러리에 의해 실제 DOM으로 동기화 하는 개념'으로 표현하고 있습니다. 여기서 UI로 표현될 객체는 DOM을 의미하며, 라이브러리는 VirtualDOM을 렌더링해주는 라이브러리를 의미합니다. TLDR 리액트는 두 가지 전략을 사용해 diff 알고리즘을 기존의 O(n^3)에서 O(n)으로 성능 개선을 하였습니다. 리액트에서 사용하는 Virtual DOM을 바닐라 자바스크립트로 충분히 구현 가능하다는 것을 알 수 있습니다(본 게시글의 Virtual DOM 코드는 리액트의 Virtual DOM diff 알고리즘과 많이 다릅니다). 리액트를 사용할 때 데이터의 변화에 따른 화면 변화의 흐름을 이해한다면 Vi..
[JavaScript] 바닐라 자바스크립트로 웹 컴포넌트 만들기
[JavaScript] 바닐라 자바스크립트로 웹 컴포넌트 만들기
2021.01.25자바스크립트만 사용해서(제이쿼리, 리액트, 뷰 등을 사용하지 않고) 웹 컴포넌트를 만드는 방법에 대해 알아보겠습니다. 바닐라 자바스크립트란? 프레임워크나 라이브러리가 포함되지 않은 순수한 자바스크립트를 의미합니다. 웹 컴포넌트 HTML 엘리먼트를 위해 만들어진 재사용 가능한 자바스크립트 코드를 의미합니다. 재사용이 가능하다는 것은 코드가 함수 등으로 작성되어 언제든 임의의 HTML 엘리먼트에 적용할 수 있다는 것을 의미합니다. TLDR; 함수를 이용해 만드는 방법은 쉽고 빠르게 작성할 수 있어 웹 컴포넌트를 구현할 때 가장 많이 쓰이는 방식 MutationOvserver는 IE11 이하 버전을 지원하지 않으며, 모든 엘리먼트의 추가 / 제거를 감시해 성능 문제를 일으킬 수 있음 커스텀 엘리먼트를 만드는 ..
[JavaScript] Element를 저장 및 불러오기
[JavaScript] Element를 저장 및 불러오기
2021.01.04[JavaScript] Element를 저장 및 불러오기 이 글은 Range 값을 저장하기 위해 코드를 작성하다가 localStorage에 Element 정보가 저장되지 않아서 이를 해결하기 위한 트러블 슈팅을 정리한 글입니다. TLDR; Range 값을 저장 후 불러오고 싶은데, Element 값을 저장할 수 없었습니다. JSON.stringify를 사용해서 Element를 문자열 값으로 수정하려 하더라도 빈 객체가 반환되었습니다. 이를 해결하기 위한 방법을 알아보던 중, 페이지의 Element에 data-key를 모두 설정한 뒤, 해당 data-key를 저장하는 방법도 있었습니다. 하지만, 이 방법의 경우 페이지 내에서 변경이 일어난다면 data-key 값이 이전과 같을 것이라 보장할 수 없습니다. ..
[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 상태 관리 라이브러리를 보고 아이디어를 얻었습니다. 필요한 요소 상태 관리 라이브러리를 만든다고 할 때, 제대로 동작하기 위해서..