[React🌌] 초보를 위한 create-react-app 없이 빌드하기 / ② babel이란? babel 밑 webpack 세팅

babel 이란?

아시다시피 자바스크립트는 시대가 변함에 따라 점점 발전하고 있습니다. 그만큼 그 발전한 버전을 따라주지 못하는 브라우저 혹은 환경이 있기 마련이죠. babel은 최신 문법을 써도 이전 버전 브라우저 환경에서도 사용할 수 있도록 최신 문법을 특정 예전버전의 js 로 변환해주는 툴 입니다!

 

쉽게말하자면 최신문법을 이전문법으로 바꿔주는 API 이죠. 😮

 

babel 사이트에서 지원하는 예시입니다.

 

// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

바벨 가이드 : https://babeljs.io/docs/en/index.html

 

새로운 문법인 화살표를 이용한 코드를 input으로 넣으면 기존 function 문법으로 된 코드가 output으로 나옵니다.

 

---

 

babel 적용하기

babel 은 리액트 문법인 jsx 또한 지원합니다. 우리의 리액트를 빌드하기 위해 프로젝트 폴더에 바벨을 설치해 봅시다!

 

설치 명령어

저희는 4가지 바벨 관련 모듈을 설치해주었습니다.

 

• @babel/core : 말 그대로 바벨의 코어 입니다. 중요 요소들이 들어가 있습니다.
• @babel/cli : 바벨을 명령어를 통해 cmd 에서 바벨을 직접 컨트롤 할 수 있게 해줍니다. (사실 명령어로 바벨을 사용하지 않을거라면 꼭 있을 필요는 없습니다.)
• @babel/preset-env : 바벨의 설정을 일일이 할 필요없이 가장 통상적인 대표 설정들을 모아둔 플러그인 세트 입니다.
• @babel/preset-react : 바벨을 JSX syntax 에서도 사용 가능하게 해줍니다.

 

package.json

설치가 완료되었습니다.

그러면 이제 babel을 이용하기 위해 webpack.config를 설정해주어야합니다.

 

webpack.config.js

require 로 webpack 모듈을 가져오고 ( 추후에 쓰일 것입니다) ,

저희가 설치했던 @bable/preset-env 와 @babel/preset-react 를 babel 의 preset 옵션에 넣어주었습니다.

지금 이것만 보시면 이해가 잘 안되시죠?

 

webpack 의 작동 방식에 대해 잠시 알아봅시다.

쉽게 생각하자면,  webpack.config.js 에서 

 

*****************webpack.config.js*************************

1. entry : 웹팩으로 묶어줄 파일들을 결정합니다.

2. module : 묶은 파일들에 어떤 모듈을 이용해 어떤 설정을 줄 것인지를 결정합니다.

3. output : 어떤 곳에 어떤 이름으로 파일을 만들지 결정합니다.  

*************************************************************

 

client.jsx 의 코드는 jsx? (test: /\.jsx?$/)  에 해당하므로

@bable/preset-env, @babel/preset-react 옵션을 건 babel 을 통해 변환을 한 후

dist 라는 폴더에 bundle.js 파일로 최종적으로 뽑아낼 것입니다..

 

그런데 이것을 로드해줄 로더가 아직 없습니다. 따라서 babel-loader도 설치해줍니다!

webpack.config.js

 

loader : "babel-loader" 설정해줍니다.

exclude 를 통해  node js 모듈 폴더는 제외해줍니다.

 

---

컴포넌트 작성 

 

이제 client.jsx 를 작성하고 웹 팩을 이용해서 실행시켜보는 일만 남았습니다.

Test.jsx

화면에 띄울 Test.jsx 라는 컴퍼넌트를 하나 작성해준 뒤

 

client.jsx

client.jsx 에서 Test.jsx 를 가져와 root div 에 렌더링해줍니다.

react 와 react-dom 불러오는부분도 최신문법 import로 수정해줍니다. 편한거 쓰시면 됩니다.

 

---

webpack으로 한 파일로 묶기

npx 명령어를 통해 webpack을 실행시켜 줍니다.

아까 저희가 설정시켜준대로 dist 폴더에 bundle.js 라는 파일이 설정되었습니다.

이 bundle.js 는 client.jsx 와 Test.jsx 파일이 묶여 합쳐져 있는 파일이라고 생각하시면 됩니다.

 

그런데 여기서 의문이 듭니다.

 

webpack.config.js

webpack.config.js 에서는 묶어줄 파일에 client.jsx 만 넣었는데 어떻게 Test.jsx 도 같이 묶여있냐구요?

똑똑한 webpack 은

client.jsx 를 확인 한 뒤 client.jsx 내부에 import 되어있는 Test 도 함께 묶을 파일로 지정합니다.

뿐만 아니라 Test.jsx 에도 만약 다른 파일들이 import 되어 있다면, 그것도 쭉쭉 다 묶어내려갑니다.

따라서, 저희는 앞으로 client 가 다른 메인파일(index 혹은 App 등이 되겠죠) 을 가져와 렌더링해주고, 그 메인파일은 여러 파일, 컴포넌트들을 가지고 있는 식으로 만들어 나가는게 좋을 것입니다.

 

실행

설정하느라 수고하셨습니다!

대망의 실행입니다, index.html을 열어봅시다.

---

index.html

---

Test 컴포넌트에 있던 '리액트 빌드하기'  문구가 잘 출력되는것을 알 수 있습니다.

 

과정을 되짚어보자면

1. client.jsx 가 Test.jsx 를 import 함
2. webpack 이 client.jsx 와 Test.jsx를 묶어 bundle.js 로 만듦
3. index.html 에서 sciript로 bundle.js를 가져옴
4. 결과적으로 Test.jsx 컴포넌트 출력

이런식으로 가능합니다.

 

하지만 현재는 파일로 실행하는것이기 때문에 컴포넌트를 수정할 때마다 webpack 을 계속해서 실행시키고, index.html 을 일일이 실행시켜야 합니다.  다음화에서 해결해줍시다!

 

---

다음화에는?

1. webpack을 이용하면서 수정사항이 화면에 바로바로 적용이 되게 실행하는 설정을 해볼 것입니다.

2. npx webpack 이 아닌 내 명령어를 통해 실행되도록 설정해봅시다..

 

 

 

이전화 :

[React🌌] 초보를 위한 create-react-app 없이 빌드하기 / ① 설치 및 세팅

다음화 : 

[React🌌] 초보를 위한 create-react-app 없이 빌드하기 / ③ webpack-dev-server & react-hot-loader 적용/ 실시간 업데이트 기능