# Dream Coding - React 3. Tools · Prerparation
## ==3.1 필요한 툴 설치==

## ==3.2 중요한 툴들 설명==

### Node.js

- JavaScript runtime enviornment (framework) that executes JavaScript code **outside a web browser
⇒ JavaScript everywhere**

### npm

- node package manager
- **Pubilish** and **share** course code of Node.js packages
- simplify installation, updating, and uninstallation of packages
- `package.json` 파일을 이용하여 npm을 이용하여 다운받은 해당 프로젝트의 library들을 관리

### npx

- tool for **executing packages**

### yarn

- package manager made by facebook
- built on top of npm to resolve some of npm's shortcomings (npm의 단점을 보완)
⇒ **faster, consistent, and secure**
- npm 과 호환이 가능함

## ==3.3 리액트 툴==

### create-react-app (cra)

- **hot module reloading** 지원 ( 코드의 변화를 감지하여 즉각적으로 재로딩 해주는 모듈)

yarn create react-app my-app #my-app에는 앱 이름 적기
cd my-app
yarn start

### `yarn eject`

- 숨겨진 파일들을 다 공개하는 명령어 (되돌릴 수 없음)

## ==3.4 프로젝트 구조 설명==

### `manifest.json`

- pwa (progressive web app) 을 위해 필요한 파일
- 즉, 모바일 어플리케이션을 만들때 필요한 파일

### `index.js`

- 최상단에 위치한 js파일

### `.gitgnore`

- 깃에 추가하기 싫은 내용 (`node_modules` , 캐쉬 파일, 개인 파일)

## ==3.6 숨겨진 툴 설명==

### Babel

- 어느 선까지 변환할지 설정할 수 있음
- **convert** the latest ECMAScript ⇒ older version

### Webpack

- **Bundling** the code, JavaScript **module bundler**

### ESlint

- checking your code

### Jest

- delightful JavaScript testing framework

### PostCss

- expandable CSS libraries (CSS 전처리기)
- 많은 플러그인이 있어서, SCSS 에 비해서 훨씬 많은 일을 할 수 있음
- 현업에서 많이 사용