webpack 사용해서 react 프로젝트 생성하기

■webpack을 왜 쓸까?

- 원래는 html 파일 하나만으로도 리액트 프로그래밍이 가능함! 하지만 이는 프로젝트가 

매우 작을 경우에나 가능하고 컴포넌트가 많아지면 유지보수 헬파티가 열림 

(페이스북은 컴포넌트가 2만개가량 된다고 함 ㄷㄷ...)

- 그래서 이 다수의 컴포넌트를 각각 js파일로 분리시키고 이를 종합하여

1개의 js 파일로 묶어주는 기능을 Tobias Koppers 가 만듬. 이것이 바로 webpack인것

- js 실행기(?)인 node를 이용해 webpack을 실행시킬 수 있다.

■설치 순서

- npm init

- npm i react react-dom

- i의 의미 : 뒤에 나오는 것들을 설치

- npm i -D webpack webpack-cli

- D의 의미 : 뒤에 나오는 것들을 개발 환경에서만 사용할 것

(실제 서비스 할때는 webpack 필요 ㄴㄴ)

- npm i -D @babel/core @babel/preset-env 

@babel/preset-react babel-loader @babel/plugin-proposal-class-properties

- npm i -D react-hot-loader

- 빌드 자동 설정

- npm i -D webpack-dev-server

- front 서버(?) 설치하여 변경점 자동 감지 후 빌드 자동 실행

- 프로젝트의 루트 위치에 dist폴더와 webpack.config.js 생성하고 그 파일에 아래 내용 저장

- 프로젝트의 루트 위치에 client.js 파일 생성.

jsx파일들이 곧 리액트 컴포넌트가 됨. 확장자를 js로 해도 되지만 jsx로 하면 리액트 

컴포넌트 전용파일임을 한눈에 알 수 있음. 아래 내용을 client.js에 저장

- 프로젝트의 루트 위치에 ResponseCheck.js파일 생성 후 아래 내용 저장

- package.json 파일의 내용을 아래와 동일하게 수정

- 프로젝트의 루트 위치에 index.html 생성하고 그 파일에 아래 내용 저장

- npm run dev 실행 후 dist폴더에 app.js 생성되는지 확인

- index.html을 브라우저로 실행. 끝~