0. 알게 된 것 요약 👏
- npx create-react-app [폴더명] 을 쓰면 'babel, webpack' 설치할 필요없이, 한방에 해결됨
- npx : npm install -y 처럼, 본격적으로 설치하지 않아도, npm 패키지를 사용해서 설치할 수 있음.
- create-react-app : 리액트를 시작하겠다! 라는 의미
- 소결론
- 결국, babel 를 사용하면, '호환성이 증가' 된다.
- 결국, webpack 을 사용하면, '상호 의존적인 모듈' 을 하나의 파일에서 사용할 수 있게 된다. -> '어플리케이션 성능 향상' 으로 이어진다.
- babel, webpack 에서 '변환대상' 이 달라지면 '설정값 및 설치해야 하는 명령어' 가 달라지게 된다. (무지성으로 따라치지 말자.)
- 기초 설정에서 변경한 뒤, 반드시 다시, 'npx webpack' 를 설정해서, 변경해줘야 한다.
1. babel 이랑 webpack 을 공부해야 하는 이유
- npx react 뭐시기를 하면, 자동설치 되긴 함.
- 다만, 그 명령어 안에 뭐가 있기 때문에 자동설치 되는지 알아야 함. ⭐⭐⭐⭐⭐⭐
- 또한 필요한 경우 `webpack dev config` 여기에서, 설정값을 변경할 수 있음.
2. babel
1) 기본 개념
| 구분 | 설명 | 비고 |
|---|
| 기능 | ES6 문법으로 기재된 걸 ES5 로 변환해줌 | |
| 자바스크립트를 '컴파일' 해주는 도구 | |
| 등장배경 | JS 문법은 꾸준히 발전함. ES6 문법이 개발되었을 때, 모든 것을 ES5 로 변환하기 힘들었음. 따라서, '변환해주는 컴파일러' 가 필요해짐 | |
| 효과 | ES6 를 BABEL 로 변환하면👉 ES5 환경에서도 호환 가능 | |
| '호환성' 이 생김 | |
2) babel 01 : ES6 신문법을 ES5 로 변환해보기
| 구분 | 명령어 | 설명 | 비고 |
|---|
| ES6 문법이 들어간 app.js 파일 만들기 | | | |
| babel01 폴더 생성 및 이동 | ex) cd babel01 | 내가 만든 디렉토리로 이동해줘야 함 | 📌캡쳐 사진 있음 |
| package.json 기본 설정 | npm init -y | 기초적으로 필요한 값들이 채워져서 들어옴 | |
| babel 환경 구성에 필요한 요소 설치 | npm install @babel/core @babel/cli @babel/preset-env (@터미널에서 설치해줘야 함) | .babelrc 속성이 어떻냐에 따라서, 다른 명령어가 사용되기도 함 | |
.babelrc 설정 | @.babelrc > "presets" : ["@babel/preset-env"] | rc = run commands, run control. 환경구성 할 때는 반드시 rc 가 붙는다. | |
.babel 실행 | npx babel [변환할 파일명] --out-file [내보낼경로] / npx babel app.js --out-file dist/app.js | | |
| 실행 결과 | dist 폴더에 변환 완료된 구문들이 나와있음. | | |
- 이렇게 ES6 로 작성한 문법이 어떻게 변환되는지 확인해볼 예정
- babel01 폴더 생성 및 이동
- babelrc 설정
- babel 실행
dist 폴더에 변환 완료된 구문들 나옴
3) babel 02 : ES6 로 작성한 server.js 를 ES5 로 변환해보기
| 구분 | 명령어 | 설명 | 비고 |
|---|
ES6 문법이 들어간 server.js 파일 만들기 | | | |
| babel02 폴더 생성 및 이동 | ex) cd babel02 | 내가 만든 디렉토리로 이동해줘야 함 | |
| package.json 기본 설정 | npm init -y | 기초적으로 필요한 값들이 채워져서 들어옴 | |
| babel 환경 구성에 필요한 요소 설치 | npm install @babel/core @babel/cli @babel/preset-env (@터미널에서 설치해줘야 함) | .babelrc 속성이 어떻냐에 따라서, 다른 명령어가 사용되기도 함 | |
| server 변경 의 경우엔, npm install @babel/plugin-transform-modules-commonjs 이것도 설치해야 함 | babel 이 무엇을 변환해주느냐에 따라, 설치해야 하는 요소가 달라지기도 함 | |
.babelrc 설정 | "plugins" : ["@babel/plugin-transform-modules-commonjs"] | rc = run commands, run control. 환경구성 할 때는 반드시 rc 가 붙는다. | |
.babel 실행 | npx babel [변환할 파일명] --out-file [내보낼경로] / npx babel server.js --out-file dist/server.js | | |
| 실행 결과 | dist 폴더에 변환 완료된 구문들이 나와있음. | | |
- ES6 문법이 들어간
server.js 파일 만들기
- 디렉토리 이동
- babel.rc 설정
4) babel 03 : XML로 작성한 app.js 를 ES5 로 변환해보기 | 위에 있는 과정과 거의 동일 | 변환 대상이 XML 이므로, 설치해줘야 하는 것이 조금 달라질 뿐
| 구분 | 명령어 | 설명 | 비고 |
|---|
XML 문법이 들어간 app.js 파일 만들기 | | | |
| babel03 폴더 생성 및 이동 | ex) `cd babel03 | 내가 만든 디렉토리로 이동해줘야 함 | |
| package.json 기본 설정 | npm init -y | 기초적으로 필요한 값들이 채워져서 들어옴 | |
| babel 환경 구성에 필요한 요소 설치 | [✅ 다른 부분] 1) npm install @babel/core @babel/cli @babel/preset-env 2) npm install @babel/preset-react (@터미널에서 설치해줘야 함) | .babelrc 속성이 어떻냐에 따라서, 다른 명령어가 사용되기도 함 | |
| babel 이 무엇을 변환해주느냐에 따라, 설치해야 하는 요소가 달라지기도 함 | | | |
.babelrc 설정 | "plugins" : ["@babel/plugin-transform-modules-commonjs"] | rc = run commands, run control. 환경구성 할 때는 반드시 rc 가 붙는다. | |
.babel 실행 | npx babel [변환할 파일명] --out-file [내보낼경로] / npx babel app.js --out-file dist/app.js | | |
| 실행 결과 | dist 폴더에 변환 완료된 구문들이 나와있음. | | |
5) 👏 알게 된 것 : '변환 대상에 따라, 사용하는 속성값이 다르고, 이것을 .babelrc 에서 변경한다는 점!'
- babel 은 spread operator, XML 같은 것을 변환할 때는 presets 설정을 사용하고 server.js 를 변환할 때는 plug-in 속성을 사용한다.
- 이걸을 외우자는게 아니라, ⭐'변환 대상에 따라, 사용하는 속성값이 다르고, 이것을 `.babelrc` 에서 변경한다는 점!'⭐ 이 포인트다.
3. webpack
1) 기본개념
| 구분 | | 설명 | 비고 |
|---|
| 의의, 개념 | | '모듈 번들러' 임 | |
| '모아준다' 는 관점 | '여러 파일' 을 '하나의 파일(번들링)' 해준다. | |
| | ex) 1번.js 2번.js 3번.js 이것들을 모두 가져온다. 👉 ⭐하나의 파일⭐로 구성해준다. | |
| '의존성' 을 가진 파일을 모아준다는 관점 | user.controller, user.view 등 은 하나당 모듈임 | |
| | 모듈 하나는 각자의 기능을 함 | |
| | 그런데, 각 모듈은 다른 모듈이 갖는 기능을 필요로 할 때가 있음 -> 이 경우 '의존성' 이 생김 | |
| | 이러한 '의존성이 있는 코드 모듈'을 '하나의 파일' 로 만들어주는 것이 번들링 작업이고, webpack 이 하는 일 | |
2) 환경 설정에 사용되는 속성
| 구분 | 설명 | 예시 | 비고 |
|---|
| entry | 진입점을 지정. 시작점으로 사용할 모듈을 webpack 에 알려줌 | entry : "./src/index.js" | |
| output | 생성한 번들링 파일의 위치, 이름을 설정 |  | |
| loaders | 번들링 중에, 모듈의 소스 코드에 적용되는 자바스크립트, css, 이미지 파일을 처리 | | |
| plug-in | 추가 기능이 필요할 경우, 번들 최적화, 어떤 플러그인을 쓸지를 작성해줘야 함. |  | |
3) webpack 01 : webpack 으로 js 합쳐보기
| 구분 | 명령어 | 설명 | 비고 |
|---|
번들링 하고 싶은 파일 만들어서 > src > pages 에 넣기 | | | |
| babel01 폴더 생성 및 이동 | ex) cd webpack01 | 내가 만든 디렉토리로 이동해줘야 함 | |
| package.json 기본 설정 | npm init -y | 기초적으로 필요한 값들이 채워져서 들어옴 | |
| 번들링 구조 만들기 | src폴더 에 번들링 할 소스 파일 넣기 | 이번 예제에서는 src > home.js 만 넣으면 됨 | |
webpack, webpack-cli 설치 | npm install webpack webpack-cli (@터미널에서 설치해줘야 함) | | |
webpack.config.js 설정 | 📌 사진 확인 (entry, output 등을 설정) | babelrc 처럼 사용되는 부분 | |
.webpack 실행 | npx webpack 으로 실행 | | |
| 실행 결과 | dist 폴더에 변환 완료된 구문들이 나와있음. | | |
| index.html 로 확인해보기 | bundle.js 로 변환된 js파일을 index.html 에서 가져와서 실행하기 | 📌 사진 확인 | |
| 1) react 는 CDN 으로 가져온다. 2) 번들링 한 것을 script src 로 가져온다. | | |
- 폴더 생성 및 이동
- 번들링 구조 만들기
webpack.config.js 설정
dist 에 bundle.js 로 변환된 결과물이 나옴
- 리액트 설치하고,
script src 로 bundle.js 가져와서, 실행하기
- 결과물
4) webpack 02 : CSS, image 파일을 번들링 해보기
| 구분 | 명령어 | 설명 | 비고 |
|---|
번들링 하고 싶은 파일 만들어서 > src > pages 에 넣기 | |  | |
| webpack02 폴더 생성 및 이동 | ex) cd webpack02 | 내가 만든 디렉토리로 이동해줘야 함 | |
| package.json 기본 설정 | npm init -y | 기초적으로 필요한 값들이 채워져서 들어옴 | |
| 번들링에 필요한 라이브러리 설치 | npm install webpack webpack-cli css-loader style-loader | ✅ css, 이미지 파일 번들링 이므로, 그에 맞는 라이브러리 설치해야 함 | |
| 번들링 구조 만들기 | src폴더 에 번들링 할 소스 파일 넣기 | | |
webpack.config.js 설정 | 📌 사진 확인 (entry, module, output 등을 설정) | babelrc 처럼 사용되는 부분 | |
.webpack 실행 | npx webpack 으로 실행 | | |
| 실행 결과 | dist 폴더에 변환 완료된 구문들이 나와있음. | | |
| index.html 로 확인해보기 | bundle.js 로 변환된 js파일을 index.html 에서 가져와서 실행하기 | 📌 사진 확인 | |
| 1) 번들링 한 것을 script src 로 가져온다. | | |
webpack.config.js 설정
- bundle 에 3가지 파일이 하나로 묶여져 있는게 확인
- 번들 완료된 bundle.js 를 index.html 에 가져와서 실행하기
5) webpack 03 : webpack-plugin을 활용해서, html 파일 을 만들어보기
| 구분 | 명령어 | 설명 | 비고 |
|---|
번들링 하고 싶은 파일 만들어서 > src > pages 에 넣기 | |  | |
| webpack03 폴더 생성 및 이동 | ex) cd webpack03 | 내가 만든 디렉토리로 이동해줘야 함 | |
| package.json 기본 설정 | npm init -y | 기초적으로 필요한 값들이 채워져서 들어옴 | |
| 번들링에 필요한 라이브러리 설치 | npm install webpack webpack-cli html-webpack-plugin | ✅ css, 이미지 파일 번들링 이므로, 그에 맞는 라이브러리 설치해야 함 | |
| 번들링 구조 만들기 | src폴더 에 번들링 할 소스 파일 넣기 | | |
| babel 설정 | .babelrc 를 webpack 폴더 안에 만들기 | ❓ 이번 webpack 에서는 왜 babelrc 가 필요하지? | |
| | 특별한 이유가 있는 건 아니고, babelrc을 활용해서, ES5로 변환시킨것도, webpack으로 번들링 될 수 있다 는 걸 보여주신 것 같음 | |
| "presets" : ["@babel/preset-env" , "@babel/preset-react"] |  | |
| 리액트 설치 | npm i react react-dom | | |
webpack.config.js 설정 | 📌 사진 확인 (entry, module, output 등을 설정) | babelrc 처럼 사용되는 부분 | |
| npm i @babel/preset-env @babel/preset-react | ✅ @ 이 부분을 빼서 에러가 났었음. 주의! | |
| npm i @babel/core babel-loader | | |
.webpack 실행 | npx webpack 으로 실행 | | |
| 실행 결과 | dist 폴더에 변환 완료된 구문들이 나와있음. | | |
| index.html 로 확인해보기 | bundle.js 로 변환된 js파일을 index.html 에서 가져와서 실행하기 | 📌 사진 확인 | |
| 1) 번들링 한 것을 script src 로 가져온다. | | |
webpack.config.js 설정
✅ 더 알아볼 것
- 리액트 할 때, 이미 설치되어 있다고 하는데, 어디를 보면 알 수 있는거지?
👉 리액트 webpack dev config 에서 변경할 수 있음.
👉 그러면, webpack dev config 작업을 해서, 진행해야 하는 프로젝트가 있을까?
