[React.js] 빌드 시스템 정리

Babel, 바벨

크롬, 사파리, 파이어 폭스와 같은 에버그림 브라우저(Evergreen browser, 사용자의 업데이트 없이도 최신 버전으로 자동 업데이트를 수행하는 모던 브라우저)는 거의 대부분이 ES6 사양을 구현하고 있다.

 

하지만 인터넷 익스플로어(IE) 11의 ES6 지원 비율은 약 11%로 현저히 낮다.

또한, 매년 새롭게 도입되는 ES6 이상의 버전은 브라우저에 따라 지원이 제각각이다.

 

따라서 ES6+ 사양을 이용해 프로젝트를 진행하려면 최신 사양으로 작성된 코드를 경우에 따라 구형 브라우저에서 문제 없이 동작시키기 위한 개발환경을 구축하는 것이 필요하다. 특히, 모듈의 경우 모듈 로더가 필요하다.

 

Babel은 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환(트랜스파일링)하는 컴파일러이다.

 

Webpack, 웹팩

Webpack은 의존 관계에 있는 모듈들을 하나의 자바스크립트 파일로 번들링하는 모듈 번들러이다. Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요없다. 그리고 다수의 자바스크립트 파일을 하나의 파일로 번들링하므로 html 파일에서 script 태그로 다수의 자바스크립트 파일을 로드해야하는 번거로움도 사라진다.

 

모듈 번들러(Module Bundler)

웹 애플리케이션을 구성하는 몇십, 몇 백개의 자원들을 하나의 파일로 병합 및 압축해주는 도구

 

polyfil, 폴리필

웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 뜻한다.

기능을 지원하지 않는 웹 브라우저에서 원하는 기능을 구현할 수 있으나, 폴리필 플러그인 로드 때문에 시간과 트래픽이 늘어나고, 브라우저별 기능을 추가하는 것 때문에 코드가 길어지고, 성능이 많이 저하된다는 단점이 있다.

 

babel-polyfill

Babel을 사용하여 ES6+ 코드를 ES5 이하로 트랜스파일링하여도 브라우저가 지원하지 않는 코드가 남아 있을 수가 있다. 예를 들어 Promise, Object.assign, Array.from 등과 같이 ES5 이하로 대체할 수 없는 기능들은 트랜스 파일링이 되지 않는다.

따라서 오래된 브라우저에도 ES6+에서 새롭게 추가된 객체나 메소드를 사용하기 위해서 설치해주는 모듈이 babel-polyfil이다.

 

Node.js

확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 JavaScript를 사용하며 논 블로킹(Non-blocking) I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다.

 

내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는 것이 가능하며 이를 통해 웹 서버의 동작에 있어 더 많은 통제를 가능하게 한다.

non-blocking I/O
호출 직후 프로그램으로 부터 제어가 돌아오기 때문에, 시스템 호출 종료를 기다리지 않고 다음 처리로 넘어가는 것이 가능하다.
Blocking
호출된 I/O가 작업을 마칠 때까지 호출한 함수에게 제어를 돌려주지 않는 것

 

NPM

노드 패키지 매니저(Node Package Manager)는 자바스크립트 언어를 위한 패키지 관리자로, Python의 pip나 Ruby의 gem처럼 Node.js의 패키지를 관리할 수 있는 도구이다. 또한 npm을 사용하여 패키지를 공유하는 온라인 패키지 저장소의 이름이기도 하다. 자바스크립트 프로그래밍 언어를 위한 패키지 관리자로, Node.js의 기본 패키지 관리자이다. 

 

ESLint

ESLint는 ES + Lint의 합성어로 EsmaScript문법에 에러가 있는 코드에 표시를 달아 놓는 것을 의미한다.

JavaScript의 스타일 가이드를 따르지 않거나 문제가 있는 안티 패턴들을 찾아주고 일관된 코드 스타일로 작성하도록 도와준다. 코딩 컨벤션 및 안티 패턴을 자동 검출 하므로 휴먼 에러를 방지할 수 있고, 코드 일관성을 지킬 수 있다. 또한 코드 리뷰에도 큰 도움이 되기 때문에 많은 사람들과 협업할 때 유용하다.

 

Prettier

개발자들에게 일관적인 코딩 스타이을 유지할 수 있게 도와주는 Code Formatter 툴이다. ESLint가 문법에러를 잡아주거나 더 좋은 문법을 사용하게 노티를 해주는 툴이라면, Prettier는 코드의 퀄리티가 아닌 스타일을 교정해준다.

 

웹 개발 작업 자동화 도구, Web Task Manager

이전부터 프런트엔드 개발 업무를 할 때 가장 많이 반복하는 작업 텍스트 편집기에서 코드를 수정, 저장 후 변경된 내용을 보기위해 새로고침하는 것이었다.

이 외에도 웹 서비스를 개발하고 웹 서버에 배포할 때 아래와 같은 작업들을 해야했다.

• HTML, CSS, JS 압축
• 이미지 압축
• CSS 전처리기 변환

이러한 일들을 자동화해주는 도구들이 필요했으며, 그래서 Grunt와 Gulp 같은 도구들이 등장했다.

 

Grunt

축소화, 컴파일, 유닛 테스트, 린트 등 주기적인 테스크들을 자동으로 수행하기 위해 사용되는 도구로서 자바스크립트 테스크 러너이다. Gruntfile이라는 파일에 정의된 사용자 지정 테스크들을 수행하기 위해 명령줄 인터페이스를 사용한다.

 

걸프, Gulp

Fractal Innovations과 깃허브 오픈 소스 커뮤니티의 오픈 소스 자바스크립트 툴킷으로, 프론트엔드 웹 개발의 스트리밍 빌드 시스템으로 사용된다. Node.js와 npm 기반의 태스크 러너임, 소형화, 연결, 캐시 버스팅, 유닛 테스트, 린팅, 최적화 등 웹 개발에 수반되는 시간 소모적이고 반복되는 테스크들을 자동화하기 위해 사용된다.

---

Reference

Babel | PoiemaWeb

Webpack | PoiemaWeb

Prettier + Eslint

웹팩이 필요한 이유 | 웹팩 핸드북