Advanced
[React] sagen을 사용해서 간단히 상태 관리하기
[React] sagen을 사용해서 간단히 상태 관리하기
2021.05.16React에서 전역 상태를 관리하기 위해서 Redux를 많이 사용합니다. 하지만, Redux의 사용법이 간단하지 않아서 대체하기 위한 라이브러리가 많이 나오고 있습니다. 이 게시글에서는 간단하고 사용하기 쉬운 sagen에 대해 알아보겠습니다. sagen은 무엇인가? 먼저, sagen은 전역 상태 관리를 하기 위한 최선의 도구는 아닙니다. 아직 개발자 도구도 없으며, 개발이 지속적으로 이루어지고 있는 라이브러리입니다. sagen에 대해 간단히 알아보기 전, sagen은 다른 라이브러리와 어떻게 다른지 알아보겠습니다. 현재 sagen@2.2.0의 MINIFIED + GZIPPED 사이즈는 1.1KB로, Redux@4.1.0(1.6KB)보다 가볍습니다. sagen 시작하기 sagen을 이용해 상태 변경을 위한..
[TypeScript] type과 interface 비교
[TypeScript] type과 interface 비교
2021.05.08TypeScript에서 type과 interface에 대한 차이를 살펴보겠습니다. 기본적인 사용 방법 기본적으로 type과 interface을 사용해 타입을 정의하고 지정하는 방법은 같습니다. interface IStudent { id: number; name: string; } type TStudent = { id: number; name: string; }; const interfaceStudent: IStudent = { id: 0, name: 'name', }; const typeStudent: TStudent = { id: 0, name: 'name', }; 타입을 확장하는 방법 type과 interface는 타입을 확장하는 방법에 차이가 있습니다. type은 & 연산자, interface는 e..
[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 ..
[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 이하 버전을 지원하지 않으며, 모든 엘리먼트의 추가 / 제거를 감시해 성능 문제를 일으킬 수 있음 커스텀 엘리먼트를 만드는 ..
[C언어] 가변 길이 배열(Variable-length Array)를 사용할 때
[C언어] 가변 길이 배열(Variable-length Array)를 사용할 때
2021.01.23가변 길이 배열(Variable-length Array)은 배열의 크기를 컴파일 타임에 정하지 않고 실행 타임에 정할 수 있도록 하는 기능이다. TLDR; malloc은 메모리 수동 관리, VLA는 자동 관리 C11에서는 지원이 필수가 아님 -> C++17에서도 지원이 필수가 아님 VLA는 편리하지만 큰 크기의 배열을 사용할 때에 적합하지 않음 malloc과 VLA C99 에서는 해당 기능을 제공한다. int input_array_size(int size) { int array[size]; ... return 0; } 해당 기능을 지원하지 않는 C 버전을 사용할 때에는 아래와 같이 malloc을 이용해서 위 기능을 구현할 수 있지만, 그래도 위 기능을 직접 사용한다면 더욱 편리하게 구현할 수 있다. in..
[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주..
[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 앱을 만들어 줍니다. 타입스크립트를 사용하기 위해 -..