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

김재만·2022년 4월 20일
0

웹팩

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

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

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

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

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

웹팩이 등장한 이유

  1. 파일 단위의 자바스크립트 모듈 관리
  • 전역으로 선언한 변수가 같은 html 내부에 다른 스크립트에 의해 선언되는 경우, 본래 모듈의 의도와 다르게 작동할 수 있음
    -> ES6의 Modules 문법과 웹팩의 모듈 번들링으로 해결
  1. 웹 개발 작업 자동화 도구
  • 웹 개발 과정에서 반복적으로 해야하는 동작을 자동으로 처리해주는 도구들을 의미한다. HTML,CSS,JS, 이미지 등을 압축하거나 CSS 전처리기를 웹에서 동작 가능한 표준 CSS로 변환하는 등의 작업을 대신 해주는 Grunt나 Gulp같은 도구들이 등장했다.
    -> 웹팩에서 grunt, gulp와 같은 빌드 도구의 역할을 대체함
  1. 웹 어플리케이션의 빠른 로딩속도와 높은 성능
  • 일반 사용자가 웹 페이지에 대한 집중력을 잃어버리지 않도록, 렌더링 속도의 개선할 필요가 있다. 레이지 로딩은 필요한 자원들만 우선 가져오고, 나머지 자원은 필요할 때 가져오는 아이디어다.
    -> 웹팩의 코드 스플리팅을 활용하여 원하는 모듈을 원하는 타이밍에 로딩할 수 있음.
  1. 브라우저별 HTTP 요청 숫자의 제약
  • 브라우저에서 한 번에 서버로 보낼 수 있는 HTTP요청 숫자가 제약되어 있다.

    -> 웹팩을 활용하면 모듈을 묶어서 HTTP 요청 수를 줄인다.

바벨

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

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

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

마무리

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

참고 문서

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

profile
듣는 것을 좋아하는 개발자입니다

0개의 댓글