webpack, babel, reactjs 환경셋팅하기
1. 프로젝트 폴더 만들기
- 기본적으로 node 와 npm 이 설치되어 있어야 한다.
1) 폴더 구성
- npm init 을 통해 package.json 파일을 생성한다
- build 후 생성된 파일을 관리 하기 위하여 dist 폴더를 생성한다
- bundle.js 는 webpack을 통해 빌드된 파일이다.
2. webpack 설치하기
- webpack 을 이용하여 모듈화하고 빌드를 진행한다.
1) package.json
- webpack-dev-server 를 사용하기 위한 설정이다.
2) webpack.config.js
- webpack을 사용하기 위한 설정파일이다.
3) index.js
- 어느 정도 설정이 되었으니 테스트 해보자
- index.js 파일을 만든다
- src/index.js
4) npm start
- 서버를 띄우면 로그가 찍히는 것을 볼 수 있다
3. babel 설치하기
- ES6 를 사용하기 위해 바벨이 필요하다. 무엇보다 react개발에 jsx 를 컴파일하는 일로 바벨을 사용한다
1) jsx 파일을 js로 변경하기 위한 설정
2) webpack설정과 package.json이 바벨 변화를 확인하기 위한 설정
3) package.json
4) webpack.config.js
5) .babelrc
- root 폴더에 .babelrc 라는 설정파일을 만든다
4. react 설치하기
1) src/index.js
5. HMR 설치하기
- 개발하는동안 실시간으로 서버에 변화를 반영할 수 있다.
1) webpack.config.js
2) src/index.js
'Front-End > ReactJs' 카테고리의 다른 글
| [ReactJs] 리엑트 폼 요소 정의 (0) | 2018.08.07 |
|---|---|
| [ReactJs] 리액트 폼 이벤트 설정 (0) | 2018.08.05 |
| [ReactJs] 리액트 이벤트와 컴포넌트 데이터 교환 (0) | 2018.08.05 |
| [ReactJs] 리액트 컴포넌트 라이프사이클 (0) | 2018.08.05 |
| [ReactJs] 리액트 상태저장 컴포넌트와 상태비저장 컴포넌트 (0) | 2018.08.05 |
리딩리드