8) 자바스크립트 X 빌드 (바벨, 웹팩)
February 10, 2020
1. 자바스크립트 프로그램 이슈
1-1. 크로스 플랫폼 이슈
ECMAScript
자바스크립트 언어의 규칙 혹은 문법을 표준화 시킨 언어(사양)을 ECMAScript 라고 한다.
ECMAScript ECMA라는 단체에서 매년 자바스크립트 문법을 표준화하겠다고 공식 발표했으며, 매년 기존의 결점을 보완하거나 새로운 문법을 추가한다.
크로스 플랫폼 이슈
자바스크립트를 해독하고 실행하는 환경(다양한 브라우저, nodeJS 등) 에서는 각기다른 자바스크립트 엔진을 사용하고 ECMAScript는 언어일 뿐, 실제 엔진이 이를 적용하려면 업그레이드 과정이 필요하다.
하지만 매년 문법이 바뀌고 추가되는만큼 업그레이드가 촥촥 바로바로 되기는 힘들기 때문에 어떤 자바스크립트 문법은 실행되는 환경에 따라 자바스크립트가 실행이 안되는 경우도 생길 수 있다.
여기서 트랜스파일러(babel), polyfill 등장!
1-2. 자바스크립트 파일 과부하 이슈
프로그램의 덩치가 커지면 커질수록 종속된 패키지나 모듈들이 많아진다.
그렇게 되면 브라우저상에서 자바스크립트를 로드하거나 실행할 때 사용할 파일이 너무 많아 과부하가 생겨 에러를 낳거나 속도가 느려질 수 있다.
또한 프로그램을 날것으로 배포했을 시 파일의 크기도 크다는 문제점도 있다.
여기서 번들러(parcel, webpack…) 등장!
2. 빌드
위에서 나타나는 자바스크립트 프로그램에 대한 문제점은 모두
사용자에게서 발생하는 문제이다.
프로그램을 개발환경에서 잘 동작하게 하는 것만이 아니라 배포환경에서 잘 동작하고 사용자에게 good experience 를 주는 것이 개발자의 역할이다.(이라고 생각한다.)
이 때, 프로그램을 배포하기 전, 프로덕션 준비 버전을 만드는게 빌드build이다.
사실 빌드는 넓은 개념으로 단순히 실행가능한 파일을 만든다(1)의 개념이지만 이 글에서는 프로그램을 배포하기 전, 프로덕션 준비 버전을 만든다는 개념의 빌드(2)를 사용할 것이다.
3. 빌드 도구
(1)의 개념에서의 빌드 도구는 nodeJS, npm 등 모든 것을 포괄한다. (실행가능한 파일을 만드는데 필요한 도구)
하지만 이 글에서는 (2)의 개념의 빌드 도구들을 알아볼 것이다.
3-1. 트랜스파일러 - 바벨(1-1. 크로스 플랫폼 이슈)
바벨은 자바스크립트의 최신 문법으로 작성한 코드를 웹 브라우저와의 호환을 위해 이전 버전의 문법으로 재작성해주는 프로그램이다.
💡 ❓ 바벨은 jsx -> js로 변환(컴파일) 하는 역할도 한다. 이전 버전의 문법으로 재작성하는 프로그램보다 다른 언어로 컴파일해주는 프로그램으로 확장해서 정의하는 게 맞는 것 같다.
polyfill은 이전 브라우저에서 최신 기능을 제공하는 데 필요한 코드이다.
polyfill
polyfill은 이전문법을 사용하는 브라우저에 상응하는 코드가 없을 경우 새로 작성해주는 코드를 뜻한다.
이전 문법을 사용하는 브라우저에 상응하는 코드가 있으면 그에 맞게 변환해주기만 하면되지만 새로운 객체나 메소드(map, set 등)은 polyfill을 통해 새로 코드를 작성해주어야함.
바벨에서도 polyfill을 지원한다.
바벨은 트랜스파일링을 통해 크로스 플랫폼 이슈를 해결해준다.
3-2. 번들러 - 웹팩(1-2. 자바스크립트 파일 과부하 이슈)
웹팩은 오픈 소스 자바스크립트 모듈 번들러로 의존성 있는 모듈들을 번들링을 통해 하나의 파일(혹은 묶음)으로 만들어주는 도구이다.
웹팩 기능
- 자바스크립트 파일 과부하 이슈 해결
웹팩은 현재 내 프로그램의 여러 모듈들(자바스크립트 파일들)을 의존성 있는 하나의 파일(혹은 묶음)으로 만들어줌으로써, 프로그램에 과부하가 걸리지 않게 한다. 여러 파일을 요청하고 응답할 필요 없이 번들링 된 파일을 띡 주면 된다.
- 파일 압축
웹팩은 프로그램을 번들링하는 과정에서 압축을 통해 프로그램의 크기를 줄여준다.
- 트랜스파일링
웹팩은 위에서 언급한 바벨을 로드해서 번들링하는 과정에서 트랜스파일도 해준다.(babel-loader)
- 로더(loader)
웹팩은 css-loader, sass-loader, file-loader 등 로더를 통해 자바스크립트가 아닌 파일들도 번들링 할 수 있다.
