리액트 프로젝트를 생성할 때 CRA(Create-React-App)를 사용했기 때문에 Webpack, Babel의 설치 및 설정을 하지 않고 작업 환경을 구축했다.
CRA가 자동으로 작업 환경을 구축해주었기 때문에 Webpack과 Babel의 개념을 보고 넘어가야 할 것 같아서 정리해봤다.

Webpack ✔

• 웹팩은 기본적으로 모듈을 지원하고 파일 분할 기능(원하는 코드만 따로 분리 가능), CSS Loader 기능, JSX 변환 작업을 할 수 있게 해준다.
• 즉, 웹팩은 쉽게 말해서 여러개 파일(HTML, Javascript)을 하나로 통합해주는 모듈 번들러이다.

Webpack의 등장 이유 🧐

• 웹팩은 많은 파일들을 받아와야 하는 상황에서 네트워크 부하의 문제점과, 같은 이름의 변수나 함수의 충돌 문제점을 해결하기 위해 등장했다.
• 번들러를 사용하면 여러개의 파일을 하나로 묶어주기 때문에 위와 같은 문제점을 보완 가능❗

Webpack 장점 👍

• 웹팩은 프로젝트 전체를 한 단위로 분석한다고 이해하자.
• 즉, 쉽게 말해서 지정한 메인 파일을 시작으로 자바스크립트의 require와 import 문을 참고하여 프로젝트의 모든 의존성을 조사하고 로더를 통해 합쳐진 자바스크립트 파일을 생성한다.
• 그렇기 때문에 웹팩의 방식이 빠르고, 직관적일 수 밖에 없는 것 같다.

Babel ✔

• 바벨은 대표적인 트랜스파일러이다.
• 트랜스 파일링은 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 것을 뜻한다.
  • 일부 브라우저에서 지원하지 않는 자바스크립트의 버전ES6(최신 버전)을 ES5(구 버전)으로 변환 시키는 과정
  • 리액트의 JSX와 같은 자바스크립트 구문 확장을 이용할 수 있게 하는 것

Babel 빌드 과정 🖋

• 바벨은 크게 세 단계로 빌드를 진행한다.

1. 파싱(Parsing): 코드를 읽고 추상 구문 트리로 변환하는 단계
2. 변환(Transforming): 추상 구문 트리를 변경
3. 출력(Printing): 변경된 결과물 출력

• 위에서 바벨은 파싱과 출력을 담당하고 변환 과정은 바벨 플러그인(plugin)이 담당한다.
  * 바벨 플러그인은 바벨이 어떤 코드를 어떻게 변환할 지에 대한 규칙을 의미한다.

Webpack과 Babel을 살펴보았다.
CRA(Create-React-App)를 사용하여 위와 같은 Build 도구를 설정하지 않고 넘어 갔는데 생각보다 더 깊이 이해해야할 부분이 있는것 같다.
추후에는 더 자세하게 살펴보아야겠다.

end