[최신 웹 프론트엔드 개발환경 세팅] 3. Babel? Webpack?

3) Babel? Webpack?

 

최신 프론트엔드 개발 환경에서 Babel과 Webpack은 거의 필수적이라고 말할 수 있습니다. 프론트엔드 프레임워크, React나 Angular, Vue 등을 사용하는 경우는 물론, 코드 작성 시 ES6+를 이용한다면 역시 마찬가지로 Webpack과 Babel을 필요로 하게 됩니다. 예를 들어, ES6의 대표적인 기능인 Template Literal을 사용했다고 가정해 봅시다. 

보이는 바와 같이 IE에서는 템플릿 리터럴을 지원하지 않는 것을 알 수 있습니다(최신 브라우저 버전 기준이며, 다른 브라우저에서도 버전에 따라 지원하지 않을 수 있습니다) 크롬이야 실행만 해도 최신버전으로 관리되지만, IE나 사파리는 사용자가 별도로 업데이트하지 않는 한 처음 OS에 설치한 버전 그대로를 사용하게 되기 때문에 고객이 사용하는 브라우저가 무엇이냐에 따라 페이지가 정상적으로 동작하지 않을 수 있습니다.

 

Babel

최신 자바스크립트(ES6+)가 어느 브라우저의 어느 버전에서라도 정상적으로 돌아갈 수 있도록 ES5 이하 버전으로 변환, 트랜스파일링해주는 역할을 수행합니다. 컴파일러와 같이 코드를 변환해주는 작업을 해준다고 생각하면 되는데, 컴파일러가 코드를 바이트 코드로 변환한다면, 트랜스파일러는 코드를 같은 레벨의 다른 언어로 변환한다고 보면 됩니다. 코드로 예를 들자면 아래와 같습니다.

//ES6+ 거듭제곱 연산
[1,2,3].map( n => n**n );
 
//ES5
"use strict";
 
[1,2,3].map( function(n) {
    return Math.pw(n,n);
});

바벨 이 외에도 coffeescript, typescript, traceur 등도 트랜스파일러입니다. 단, coffeescript와 typescript는 고유의 문법을 자바스크립트로 변환한다면, babel과 traceur는 자바스크립트를 자바스크립트로 변환하는 트랜스파일러입니다.

 

Webpack

웹팩은 의존 관계에 있는 모듈들을 하나의 자바스크립트 파일로 번들링하는 모듈 번들러입니다. 최신 프론트엔드 프레임워크는 모듈 기반으로 프로젝트를 작성하도록 되어 있습니다. 뿐만 아니라 ES6에서 새로 등장한 import... from... 문법으로 하여금 자바스크립트 코드 역시 모듈화 하는 것이 추세입니다(ES6에서 import/export문이 나오기 이전에도 모듈 패턴이나, CommonJS와 AMD 등 자바스크립트 모듈화 작업이 이루어지고 있었습니다) 자바의 imort문과 거의 유사하다고 보면 됩니다.

상대 경로 혹은 절대 경로에서 번들링 하고자 하는 파일을 불러오는 방식으로 동작하며, 위와 같이 분리되어 떨어져 있는 파일들을 모아서 하나의 파일로 만들어주는 역할을 수행합니다. 의존 관계로 연결된 모듈들이 하나의 파일로 번들링 되기 때문에, 별도로 모듈 로더를 필요로 하지 않으며, html 파일에서 로딩을 위해 태그를 줄줄이 쓰는 것이 아니라, 번들링 된 하나의 파일만 로드시켜주면 정상적으로 동작합니다. 

 

webpack-dev-server
webpack-dev-server 패키지를 설치하면, 개발 중에 js파일을 수정할 때마다 번들링 작업을 일일이 수행할 필요 없이 자동으로 수정될 때마다 업데이트를 시켜줍니다. 단, 실제로 build를 자동으로 해주는 것은 아니기 때문에, 개발이 끝난 후 서버에 배포할 때에는 실제로 웹팩을 통해 빌드 작업을 거친 결과물을 올려야 합니다. 

 

webpack과 브라우저 개발자 도구 연동
웹팩을 이용해 번들링 된 파일을 사용하게 되면, 여러 파일들의 모듈들이 병합되기 때문에 개발 시 파일 구조를 파악하여 디버깅하기는 어려움이 따릅니다. 이에 웹팩은 간단한 설정을 통해, 개발자 도구의 sources에서 모듈을 구성하는 파일 구조를 확인할 수 있고, 실제 작성한 코드에 작성할 수 있도록 기능을 제공합니다. 단, 이는 크롬 브라우저 기준이며, Firefox의 경우 Firebug를 설치해야 소스 맵을 볼 수 있는 등 브라우저에 따라 차이가 있을 수 있습니다. 

 

웹팩 외에도 Parcel, FuseBox, rollup, Browserify 등 많은 자바스크립트 모듈 번들러가 있습니다.

 

여기까지 우리는 Node.js와 NPM, Babel과 Webpack까지 개발환경을 구성하기 위한 기본 지식을 다져보았습니다. 다음 글에서는 이 기반 지식을 토대로 실제 개발환경을 구성해 보도록 하겠습니다. 

 

 

reference

 

How to use ES6 with Babel and Webpack

How to use ES6 with Babel and webpack