react를 사용해서 개발을 하면 npm build 명령어를 통해 빌드가 완료가 된다.
create-react-app 라이브러리를 통해 개발 환경에서 빌드까지 모든 것을 갖출 수 있다.
프론트엔드 개발자라면 그 뒷단의 이야기에 대해서도 알 필요가 있다.
온전히 프로젝트를 커스터마이징 하기 위해서는 CRA 이용하지 않고 환경 설정과 빌드 세팅까지
전부 스스로 해야하기 때문이다.
📌Webpack
웹팩은 여러개 파일을 하나로 합쳐주는 모듈 번들러이다.
✔️ 여러개의 파일을 하나로 모아주는 것은 왜 필요할까?
이전에 모듈 번들러가 없을 때에는 HTML에 모든 스크립트 파일을 불러와야 했었다.
<html>
<body>
<script src = "./index.js" />
<script src = "./app.js" />
<script src = "./src/Card.js" />
</body>
</html>✔️ ES2015 부터 등장한 모듈 시스템
exports로 모듈을 내보내고, require로 모듈을 불러와서 사용할 수 있었다.
- 전역변수와 지역변수를 분리해서 모듈이 독립적인 실행 영역을 갖게 된다.
- script 태그로 파일을 가져오는 것이 아니라 필요한 변수나 함수를 가져올 수 있다.
- exports와 require을 이용해 의존성 관리도 편해졌다.
✔️ ES6 import, export
- 원하는 변수, 함수만 들고오기 쉬워졌다.
- script 태그에 type = "module"으로 설정할 수 있게 되면서 모듈 형태의 자바스크립트를
html에서 불러올 수 있게 됐다.
-index.js 하나만 불러오면 index.js 에서 import 하고 있는 다른 모듈들은 자동적으로 불러오게 되었다.
<html> <body> <script src ="./index.js" type="module"/> </body> </html>
✔️ Babel의 등장
하지만 위와 같은 것들은 아직 모든 브라우저에서 지원을 하지 않기 때문에
모든 파일을 하나의 모듈로 모아줄 소프트웨어가 필요했고, 그래서 나온 것이 웹팩이이다.
📌Babel
자바스크립트 트렌스컴파일러
-
변환 전에도 자바스크립트, 변환 후에도 자바스크립트이다.
-
최신 버전의 자바스크립트를 구형 버전의 자바스크립트로 변환시킨다.
-
ES6이후 버전의 ESNEXT는 브라우저 호환성에서 문제가 있다.
몇몇 브라우저들은 ESNEXT 자바스크립트를 지원하지 않는다. -
그래서 최신 문법을 사용하는 많은 프로젝트를 대부분의 브러우저에 호환시키기 위해 바벨을 사용해 호환이 되는 자바스크립트를 낮춘 다음 사용한다.
변환 전
//화살표 함수(ES6)
//자수 연산자(ES7)
[1,2,3].map(n=> n**n)변환 후
// ES5
"use strict";
[1,2,3].map(function(n) {
return Math.pow(n,n);
});참고자료
[개발지식]Webpack과 Babel은 왜 쓰이는건지 알고 계신가요?
Webpack을 쓰는 이유
Webpack와 Babel이란 무엇일까?
기록은 희미해지지 않는다 🐾🧑💻