[ Project ] WMV Blog - Front 개발 환경 설정.

프로젝트 루트 경로

. / wmv-pjt

 

 

 

--- webpack 글로벌 설치

npm install -g webpack webpack-dev-server

 

--- front 폴더 생성

mkdir web-react

cd web-react

npm init 

 => package.json 파일 생성 확인. 

 

 

 

--- react, react-dom 설치

npm install --save react react-dom

 

--- babel 설치

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

 

 

--- hotloader 설치

npm install --save-dev react-hot-loader webpack webpack-dev-server 

=> package.json 파일 내부 추가된 dependencies 확인. 

 

 

 

* webpack-cli, babel-loader@7 추가 설치

 

설치 경로

. / wmv-pjt / web-react 

npm i -D webpack-cli
npm install babel-loader@7

 

 

 

* front 폴더에 webpack.config.js 파일 생성 후 설정.

 

파일 생성 경로

. / wmv-pjt / web-react / webpack.config.js

 

(* 웹팩 설정 파일의 주요 구성요소의 역할은 이전 포스팅해두었던 글로 확인하면 될 것 같다. )

https://humanwater.tistory.com/3 

[webpack] 3) 웹팩 주요 구성요소, [ Entry ] [ Output ] [ Loader ] [ Plugin ]

 

 

 

* package.json 내부에 npm을 통한 서버가동 스크립트 코드 추가.

=> "dev-server" : "webpack-dev-server"

 

 

 

* 루트 경로에 public 폴더 작성 후, 인덱스 파일(index.html) 작성 

 ++ 이 public 폴더에 추후, 웹팩을 통해 번들된 bundle.js 파일이 들어감. 

 

. / web-react / public / index.html

 

 

 

* src 폴더 생성 후, 그 안에 리액트 컴포넌트들을 관리할 폴더 추가(components)

* 그리고 바로 위의 인덱스 파일에서 보여줄 리액트 컴포넌트 App.js 파일 작성.

 

. / web-react / src / components / App.js

 

 

 

* 위의 App.js 컴포넌트를 인덱스 파일( ./public/index.html)과 바인딩 시켜줄, index.js 파일 생성

 

. / web-react / src / index.js

 

 

 

* 환경 세팅 완료, cmd에서 $ npm run dev-server 실행.