초면인줄 알았겠지만 구면입니다, 웹팩과 바벨

웹팩

웹팩이란 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러다. 모듈 번들러는 웹을 구성하는 자원(HTML, CSS, JS, Img 등)을 각각의 모듈로 보고, 이를 조합한 결과물을 만드는 도구이다.

• 모듈
  • 모듈이란 특정 기능을 갖는 코드의 단위이다. 성격이 비슷한 기능을 위한 코드를 하나의 파일로 관리하면 된다.

** 웹팩에서의 모듈은 웹을 구성하는 모든 자원의 파일 각각이 모듈이다.

• 모듈 번들링
  • 웹을 구성하는 자원을 모아 하나의 파일로 병합-압축해주는 동작을 모듈 번들링이라고 한다.

** 빌드, 번들링, 변환은 유사하게 쓰인다.

웹팩이 등장한 이유

1. 파일 단위의 자바스크립트 모듈 관리

• 전역으로 선언한 변수가 같은 html 내부에 다른 스크립트에 의해 선언되는 경우, 본래 모듈의 의도와 다르게 작동할 수 있음
  -> ES6의 Modules 문법과 웹팩의 모듈 번들링으로 해결

2. 웹 개발 작업 자동화 도구

• 웹 개발 과정에서 반복적으로 해야하는 동작을 자동으로 처리해주는 도구들을 의미한다. HTML,CSS,JS, 이미지 등을 압축하거나 CSS 전처리기를 웹에서 동작 가능한 표준 CSS로 변환하는 등의 작업을 대신 해주는 Grunt나 Gulp같은 도구들이 등장했다.
  -> 웹팩에서 grunt, gulp와 같은 빌드 도구의 역할을 대체함

3. 웹 어플리케이션의 빠른 로딩속도와 높은 성능

• 일반 사용자가 웹 페이지에 대한 집중력을 잃어버리지 않도록, 렌더링 속도의 개선할 필요가 있다. 레이지 로딩은 필요한 자원들만 우선 가져오고, 나머지 자원은 필요할 때 가져오는 아이디어다.
  -> 웹팩의 코드 스플리팅을 활용하여 원하는 모듈을 원하는 타이밍에 로딩할 수 있음.

4. 브라우저별 HTTP 요청 숫자의 제약

• 브라우저에서 한 번에 서버로 보낼 수 있는 HTTP요청 숫자가 제약되어 있다.
  
  -> 웹팩을 활용하면 모듈을 묶어서 HTTP 요청 수를 줄인다.

바벨

자바스크립트를 실행 환경에 따라 정상적으로 동작할 수 있도록 만들어주는 트랜스파일러이다. 각 브라우저의 자바스크립트 엔진에 따라, 자바스크립트 코드의 동작이 차이가 날 수 있는데 이를 해결하기 위한 도구이다. 코드를 읽어 추상구문트리(AST)로 변환하는 파싱, 추상구문 트리를 조작하는 변경, 변경된 결과물을 출력하는 과정을 거친다. 변경은 바벨 플러그인을 통해 어떤 코드를 변환할 지를 설정할 수 있다.

웹팩과 바벨을 연계해서 활용하기

웹팩과 바벨을 연결하면 트랜스파일링을 하면서 모듈들을 묶어주기 때문에 굉장히 효율적이다. CRA(Create-React-App)에는 바벨, 웹팩을 포함한 패키지들이 포함되어있다.

마무리

고추장은 못 만들어도, 떡볶이 소스는 섞어서 만들자

참고 문서

캡틴판교님 - 웹팩 핸드북
Babel이란 무엇인가?
자바스크립트 개발 환경: 웹팩과 바벨