node.js
Node.js는 모듈시스템과 npm으로 효율적인 의존성 관리와 라이브러리나 개발도구를 쉽게 통합하여 사용할 수 있게 해준다.
npm
npm(Node Package Manager)은 Node.js의 패키지를 관리하는 도구로, 모든 패키지는 npm 레지스트리에 저장됩니다.
npx는 npm의 패키지 실행도구로, 최신 버전에 해당하는 패키지를 설치하여 실행하고, 실행된 이후에 해당 패키지를 제거한다. 때문에 불필요한 전역 패키지 설치를 하지 않고도 항상 최신 버전의 패키지를 가져와 실행할 수 있어 npx create-react-app 같은 일회성 설치에 적합하다.
webpack
webpack과 같은 번들러를 사용하면 모듈 지원이 불가능한 브라우저에서 의존성 관리 문제를 해결해주며, Loader, Plugin을 통해 번들링 외 다양한 기능을 제공한다.
Loader
웹팩은 기본적으로 JS와 JSON파일만 이해할 수 있는데, 번들링 과정에서 Loader가 이미지나 CSS 같은 자원을 자바스크립트로 변환해주기 때문에 이미지나 CSS를 모듈형태로 작성하여 가져올 수 있다.
Plugin
번들파일이 생성되는 방식을 수정하거나 환경변수 주입, 난독화 및 압축 과 같은 작업을 수행한다.
Babel
브라우저 지원 범위에 맞게 코드를 변환하여 개발 생산성을 향상시킨다.
Babel 설정은 babel.config.json, babelrc로 할 수 있는데 babel.config.json은 현재 작업폴더를 루트로 지정하는 것으로, 여러 하위 프로젝트가 있을 때 공통 설정을 할 수 있다. babelrc는 현재 폴더에만 적용되며, 만약 프로젝트 루트에 babel.config.json.js가 있으면 설정을 병합한다. package.json의 babel 속성을 사용하여 동일한 옵션을 설정할 수도 있다.
폴리필(polyfill)
바벨의 변환 작업은 런타임이 아닌 빌드타임(컴파일 시)에 번들러와 같은 도구를 사용하여 실행된다. 반면 폴리필은 런타임 시 실행되며 Promise, Map처럼 트랜스파일러만으로는 해결할 수 없는 명세를 구현한 것이다. Babel 설정을 통해 폴리필을 추가(ex: core-js)할 수 있다.
ESLinter
Linter는 소스코드를 분석하여 오류나 오타, 잠재적 버그를 찾아주는 도구를 의미하며, ESlint는 가장 많이 사용되는 자바스크립트 린터이다.
Prettier
코드를 일관된 스타일로 정렬해주는 코드 포맷터이다. ESlint와 연동하기 위해서는 충돌할 수 있는 ESLint 규칙들을 제외시켜주는 eslint-config-prettier를 사용해야 한다.
