React 사전준비: 필요 라이브러리 및 패키지

Node.js and npm

nvm을 이용해서 설치를 권장한다.

 

 

 

Yarn

Node, npm도 훌륭한 패키지 매니저긴 하지만, 페이스북에서 만든 yarn은 리액트를 좀더 쉽게 이용할 수 있도록 더 간결한 커맨드와 더 나은 캐싱을 제공하여 더 좋은 성능을 보인다. 

 

npm install --global yarn

npm i -g yarn

을 사용해서 설치하면 된다.

 

 

Babel

리엑트 기반의 프로젝트를 만들 때 의존성(dependency)용으로만 사용된다(npm package임). 바벨은 이슈 없이 모던 브라우저의 기준에 맞지 않거나 표준화되지 않은 자바스크립트가 실행될 수 있도록 transpile 과정을 도와주는 역할이다. (transpiling: 소스 코드의 언어를, 기능적으로 완전히 똑같게 다른 언어로 바꾸는 과정을 말함. 여기선 JSX or ES2015+를 어느 브라우저에서든 유효하고 실행 가능한 자바스크립트로 변환하는 것을 뜻함.) 

 

바벨은 코어 모듈(@babel/core)로 이루어저있는데, 보통 플러그인들은 프리셋들로 그룹이 지어져있다. 

Note: Before Babel’s version 7 was released, this organization did not exist, and hyphens separated the packages. @babel/preset-react was called babel-preset-react, @babel/core was named babel-core, and so on.

 

그러므로 @babel/core가 아닌 babel-core라고 써져있어도 당황스러워하지 말자.( 이 경우 바벨 6 버전 이하라는 것이다.) 그러나 개발자에 따라 바벨 7과 호환이 되는데도 babel-을 사용하는 사람도 있다. 이때는 어떤 일때문에 그런지 readme를 확인하면 된다.

 

여기서 권장하는 리엑트 프리셋은 아래와 같다.

• @babel/preset-env
• @babel/preset-react
• @babel/plugin-proposal-object-rest-spread
• @babel/plugin-proposal-class-properties
• @babel/plugin-syntax-dynamic-import

만약  Flow나 TypeScript와 같은 정적 타입을 작업할 때엔 @babel/preset-flow 혹은 @babel/preset-typescript 도 설치해야 한다(respectively).

 

npm install --save dev [package]

yarn add --dev [package]

 

로 설치 (--dev 나 --save dev는 devDependency에만 추가한다는 것이라 production code에는 추가되지 않을 것을 뜻함)

 

 

Webpack

웹팩은 리액트 생태계에서 제일 중심을 이루는 도구 중 하나다. 이게 없으면 리액트에서 효율적인 워크플로우는 불가능하다고 볼 수 있다. 웹팩은 모듈 번들러인데, Node.js같은 모듈 기반의 개발을 브라우저로 가져온 것이다. 이를 통해 앱 코드를 자체 파일에 깔끔하게 구조화하고, import 또는 require()를 통해 종속성을 사용할 수 있다. 이렇게 하면 종속성이 자체 모듈 범위에 로드되어서 모듈 내에서 사용할 수 있고, 결국 단일 자바스크립트 파일만 생성된다.

 

 

ESLint

정적 코드 분석에 필요한 도구이다. 거의 de-facto 스탠다드로 쓰이는. 리액트 프로젝트에서 eslint-plugin-react, eslint-plugin-babel, and eslint-plugin-react-hooks 와 같은 것들을 볼 수 있다.

 

Prettier

코드 포맷을 규칙적으로 교정해주는 툴 정도

 

브라우저 플러그인

크롬에 React Dev Tool, Redux Dev Tool이 있다. 

pc: educative