🔹 React 앱을 만들기 위해 필수적인 개발 도구들

• Babel
• Webpack
• HMR(Hot-Module-Replacement)

🔹 리액트 설치 (간단한 컴포넌트 예시)

• 작업 폴더로 이동 후 npm init (cmd 이용)

• npm install react react-dom (cmd 이용)

• vscode로 폴더 열기
  

• public 폴더와 src 폴더 생성

• public 폴더 안에 index.html 생성
  

• src -> component 폴더 생성 -> FollowButton.js
  

• src -> index.js
  
  ReactDom.render => https://ko.reactjs.org/docs/react-dom.html

🔹 Babel 설정 (vscode 터미널 이용)

• npm i -D @babel/core @babel/cli @babel/preset-react
  • babel/preset-react : react 관련된 코드를 컴파일
  • babel/cli : 터미널에서 명령을 통해 바벨을 적용 시킬 수 있는 도구
  • babel/core : 바벨을 사용하기위한 필수적으로 필요한 패키지
  • babel/preset-env : babel을 실행하기 위해 필요한 플러그인들을 모아놓은 파일

설치 후에는 package.json에 추가된다. (-D 옵션을 주면 devDependencies에 -D 옵션을 주지 않으면 dependencies에 추가된다.)

• npx babel (js 파일경로) --presets=@babel/preset-react
  • jsx -> js 변환

              ⬇︎

⭐️ babel.config.js

• option을 길게 적는 번거로움을 덜기 위해 babel.config.js라는 별도의 파일을 만든다.
• Babel을 돌릴 때 고정적으로 적용할 것들을 파일로 정리 가능하다.
• https://babeljs.io/docs/en/configuration 에 들어가면 json 형식과 js 형식이 있다.

  babel.config.js

babel.config.js 설정 후
명령어를 생략할 수 있다.

🔹 Webpack 설정 (vscode 터미널 이용)

• npm i -D webpack webpack-cli html-webpack-plugin babel-loader
  • webpack : webpack 실행 하기위해 필수적인 패키지
  • webpack-cli : 터미널에서 웹펙을 돌리기위한 패키지
  • html-webpack-plugin : 3. 만든 결과물 bundle.js를 index.html에 적용을 해서 최종적인 html을 만드는 역할이다.
  • babel-loader : Webpack은 JSX를 읽지 못하여 번들링하여 바벨세팅을 실행

⭐️ webpack.config.js

entry : index.js를 시작으로 엮인 script를 불러온다.
module : 번들링을 하여 적용할 룰을 추가한다.
rules : 모든 js파일을 읽으면서 babel-loader를 적용한다.
plugins : bundle.js를 template 경로에 있는 index.html에 <script> 태그를 자동으로 추가해주고 최종 html파일을 dist 폴더에 저장한다.
optimization : Webpack은 기본적으로 js파일을 압축하는 기능을 끄는 명령어
output : 번들링 후의 결과
path : dist 폴더가 만들어지며 그 안에 ouput 결과가 나온다.
file name : output 파일 이름
devServer: dist 파일에 업데이트 할 때 마다 런타임으로 업데이트를 해준다.

설정 후 npx webpack을 터미널에 작성하면 webpack.config.js에서 작성한 dist 폴더와 bundle.js가 생성된다.

😀 HMR ( Hot Module Replacement) 설정

• 전체 재로드 없이 애플리케이션이 실행되는 동안 모듈을 교환, 추가 또는 제거 할 수 있는 기능이다.
  npm install -D webpack-dev-server