How to use

Dev-environment

Webpack을 통해 Babel 적용하기

바벨로 변환한 코드를 웹팩으로 말기 위해서 이 둘을 함께 쓰게 된다. babel을 webpack의 loader로서 쓰는 것이다.

Read
Dev-environment

Babel

바벨탑이 실패한 이유는? '언어가 달라서'였다. 참고로, 히브리어로 바벨은 '혼돈'이라는 뜻이다. 크로스브라우징의 혼란을 해결해 줄 수 있는 것이 바벨이다. ES6 코드를 ES5 코드로 변환해주는 등 바벨이 하는 일을 'transpile'이라고 한다.

Read
Dev-environment

Webpack

모든 브라우저에서 모듈시스템을 지원하는 건 아니므로 우리가 작성한 코드(모듈시스템이 포함된)를 제대로 작동하게 하려면 웹팩으로 빌드를 할 수밖에 없다.

Read
Dev-environment

Lint

낡은 스웨터의 보푸라기 같은 것을 린트(Lint)라고 부른다고 한다. 코드에도 이런 보푸라기 같은 부분이 있으며 이를 정리하는 것을 린트 혹은 린터라고 한다.

Read
Dev-environment

NPM

NPM은 PHP의 컴포져(Composer)나 자바의 그래들(Gradle)과 같은 역할이다. 백엔드 개발자가 아닌, 프론트엔드 개발자더라도 Node.js를 최소한이라도 배워야 하는 이유는, 모던 프론트엔드 개발을 위한 개발 환경을 셋팅하려면 적어도 NPM은 쓰게 되는 등 자연스럽게 접하게 되기 때문이다.

Read
ReactJS

HOC(Higher Order Component)

기능적인 필요성에 의해 반복되어 나타나는 코드들을 재사용할 수 있게 해준다. 반복되는 로직을 HOC에 넣어두고, 이를 통해 다른 컴포넌트를 Wrapping하는 방식으로 활용한다.

Read
ReactJS

React Hooks 입문

함수형 컴포넌트에서 state와 LifeCycle을 사용할 수 있게 해주는 개념이다. 렌더만을 담당하며 Functional Component는 기존에 Stateless Component와 거의 비슷한 의미로 받아들여졌였는데, Hook의 등장으로 이 둘은 개념적으로 분리되게 된 셈이다.

Read