유연해지기

PostCSS에 대해 알아보자 (PostCSS란?)

https://postcss.org/ PostCSS - a tool for transforming CSS with JavaScript Enforce consistent conventions and avoid errors in your stylesheets with stylelint, a modern CSS linter. It supports the latest CSS syntax, as well as CSS-like syntaxes, such as SCSS. postcss.org 서론 웹팩의 로더에 대해 공부하던 중에 postcss-loader 라는 것을 보았다. Sass가 css의 전처리기(css pre-processor)라는 것은 알고 있었기에 postcss는 후처리기? 처럼 동작하지 않을까 예상해보..

리액트 절대경로 설정 및 모듈/경로 별명 짓기 with CRA (absolute path, path alias)

왜 절대경로를 사용할까? 위와 같은 디렉토리 구조를 갖는 프로젝트가 있다고 해보자. entry.js에서 target.js 을 import 해야 할 경우에 우리는 어떻게 경로를 작성해야 할까? 아마 다음과 같이 작성할 것이다. import target from '../../../target'; 상대 경로로 target.js를 찾다 보니 import 하는 path의 경로가 장황해졌다. 지금과 같이 간단한 예시에서는 별 문제가 아니라고 생각할 수도 있겠다. 하지만 프로젝트의 규모가 점점 커지고 디렉토리의 복잡도가 커질수록 import 의 경로를 찾는 게 점점 힘들어질 것이다. 심할 경우에는 다음과 같아질지도 모른다. import target from '../../SomeThing/../../SomePath/...

Babel이란? (preset, polyfill, plugin 등)

https://babeljs.io/ Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io 1. 배경 ES6가 등장한 지 얼마 되지 않았을 때에는 대부분의 브라우저에서 지원하지 않았기 때문에 최신 문법을 사용하고 싶어도 사용할 수 없었다. 이때 바벨이 ES6 문법으로 작성된 자바스크립트 코드를 ES5로 변환해주었다. 즉, ES6 문법을 지원하지 않는 브라우저에서도 ES6 문법을 사용할 수 있게 된 것이다. 바벨이 등장함으로 브라우저 간 호환성을 지켜야 하는 크로스 브라우징 이슈를 어느 정도 해결해주었다고 본다. 시간이 지나며 단순히 ES6 to ES5의 변환뿐 아니라 리..

[React.js] Error Boundary와 Fallback UI 에 대하여

서론 리액트에서는 예외 발생 시 예외를 발생한 컴포넌트만 언마운트 되지 않는다. 예외 발생 시 모든 컴포넌트가 언마운트 된다. 이는 잘못된 정보를 사용자에게 보여 주는 것보다는 아무것도 보여주지 않는 것이 낫기 때문이다. 하지만, 아무것도 보여주지 않는 것은 잘못된 정보를 제공하지 않았을 뿐이지 나쁜 사용자 경험을 제공하게 된다. 이러한 문제점을 해결하기 위해 등장한 것이 Error Boundary 이다. Error Boundary는 하위 컴포넌트에서 발생한 예외를 catch(try-catch 와는 다름)하여 Fallback UI를 보여주는 등의 처리를 해주는 컴포넌트이다. 웹 페이지를 이용하다가 갑자기 흰 화면만 덩그러니 나오는 것보다는 현재 상태가 어떤 지 표시해주는 게 훨씬 좋은 사용자 경험을 제공..

[React.js] useEffect, cleanUp, deps, unMount에 대하여

useEffect의 클린업 함수 실행 시점과 deps 배열 (= 의존성 배열) 이 미치는 영향에 대해 알아보자. 클린업, cleanUp 하나의 상황을 가정해보겠다. 클릭할 때마다 카운트가 올라가는 Count라는 컴포넌트가 있다. 컴포넌트가 언마운트 되었을 때 해당 컴포넌트가 갖고 있는 state인 count의 값을 로깅하고 싶다. 어떻게 구현하겠는가? 가장 먼저 떠올릴 수 있는 방법이 useEffect의 cleanup을 이용하는 것이다. 언마운트 될 때만 실행하면 되니까 deps 에는 빈 배열을 주면 될 것 같다. 자, 카운트를 증가시키고 언마운트 시킨 뒤 로그를 확인해보자. 예상대로 동작하지 않는다. 왜 그럴까? useEffect의 deps가 빈 배열일 경우 effect 내부의 props, state ..

[Javascript] Iterable, 반복자 그리고 생성자 함수에 대하여

Iterable이란 ? 자바스크립트에서 iterable이란 반복이 가능함을 의미한다. 반복이 가능한 요소는 무엇이 있을까? 배열, Map, Set 등 모두 iterable 한 요소이다. 이러한 요소들이 iterable 한 것은 Iteration Protocol을 따르기 때문이다. Iteration Protocol 을 따름으로써 for ... of 구문이나 spread 문법 등을 사용할 수 있게 된다. Iteration Protocol이란? Object를 iterable하도록 만드는 표준방법을 제시하는 일종의 규약이다. 이 프로토콜을 따라 iterator을 구현할 수 있다. Object가 iterable 하기 위해서는 @@iterator 메소드를 가지고 있어야 한다. 이는 Object가 [Symbol.i..

[Javascript] Promise 예제 풀어보기

https://www.codingame.com/playgrounds/347/javascript-promises-mastering-the-asynchronous Coding Games and Programming Challenges to Code Better CodinGame is a challenge-based training platform for programmers where you can play with the hottest programming topics. Solve games, code AI bots, learn from your peers, have fun. www.codingame.com 간단한 프로미스 퀴즈가 3개 있다. 다 맞은 기념으로 풀이를 정리해보고자 한다. 1번 functio..

[React.js] useRef와 useState의 용도와 차이

서론 리액트에서 ref와 state의 차이점은 무엇인가? 면접에서 위와 같은 질문을 받았다. 나는 ref 를 특정 DOM 엘리먼트를 가리키는 용도로만 사용해왔기에 이 질문의 의도를 파악하지 못했다. 본질적으로 사용용도가 다른데 어떤 차이점을 물어보는거지? 라고 생각했다. 면접이 끝난 뒤 계속 기억에 남아 이에 대해 찾아보았고 깨달은 바를 정리해보고자 한다. useRef useRef 는 단순 DOM 엘리먼트를 지정하는데만 사용되지 않는다. useRef 를 통해 클래스의 멤버 변수와 비슷한 역할을 하게 만들 수 있다. state 와 달리 값의 변화에 의한 리렌더링이 발생하지 않는다. current 라는 속성을 통해 어느 값이든 보유할 수 있는 일종의 컨테이너 역할을 할 수 있다. 함수형 컴포넌트는 인스턴스로..

[Javascript] 자바스크립트 Map 정렬하기

잡소리, 서론 코딩테스트 응시언어가 js로 제한되어있는 곳에 지원했다. 자바스크립트와 친숙했던 나지만 자바스크립트로 알고리즘 문제들을 풀어본 적이 없어서 이것저것 찾아보면서 공부하고 있다. Map이라는 자료구조가 있는 줄 모르고 객체에 삽입/삭제하면서 삽질했던 나를 반성하며 포스트를 작성한다. Map Key-Value 자바스크립트의 Map은 key-value 쌍으로 이루어져 있는 자료구조이다. key 값에 아무거나 다 넣을 수 있다. 심지어 함수도 넣을 수 있다. const testmap = new Map(); testmap.set(1,123); testmap.set(2,345); testmap.set(3,789); const funcRef = () => {}; testmap.set(funcRef, 'f..

[React.js] crypto-js를 이용한 패스워드 암호화

서론 진행 중인 프로젝트에서 간단한 익명 로그인을 구현하게 되었다. 게시글 작성 시 아이디와 패스워드를 입력받은 뒤 해당 게시물의 수정이나 삭제 요청에는 아이디 패스워드를 확인하는 구조이다. 처음에는 firebase의 실시간 데이터베이스를 사용해 게시물의 정보와 아이디, 패스워드 값을 그대로 저장했다. 하지만 유저가 입력한 정보를 데이터베이스에 전송하는 과정에서 아이디와 패스워드가 그대로 드러나기 때문에 절대 이렇게 구현을 마쳐서는 안 된다. 그저 패킷을 열어보기만 해도 유저의 정보가 유출되기 때문에... 아무리 간단한 익명 로그인이어도 '챙길 건 챙기자! '라는 마인드로 패스워드의 암호화를 진행하게 되었다. 암호화 crypto-js 패키지를 사용했고 그중 PBKDF2 알고리즘을 선택했다. PBKDF2는..