ES6 모듈과 번들링

조수빈·2023년 8월 30일

JavaScript

목록 보기

1/1

NPM(Node Package Manager)

원래 자바스크립트 라이브러리나 파일을 다른 파일에서 사용 시 직접 다운받아서 스크립트 태그 형식으로 직접 포함시켜야 했다. 하지만 이 방식은 라이브러리 버전 관리도 힘들고, 다른 사용자와의 파일 공유시 다른 사용자들도 각자 사용된 라이브러리 및 스크립트를 다운로드해야한다는 단점이 있었다. 이를 개선하고자 등장한 것이 패키지 매니저 프로그램들이다.

npm은 package.json 파일을 생성해 해당 프로젝트 관련 정보를 관리한다. npm install을 통해 원하는 패키지를 설치하면 해당 패키지가 package.json 파일의 프로젝트 dependency 목록에 추가된다. 따라서 프로젝트를 공유할 때 패키지가 설치된 폴더 대신 package.json 파일만 공유하면 다른 사용자들이 자동으로 필요한 패키지를 설치할 수 있다는 장점이 있다.

번들링(Bundling)

하지만 npm으로 다운받은 파일은 스크립트 태그 형식으로 직접 추가해 주어야하는 불편사항을 여전히 있었다. 자바스크립트는 브라우저에서만 실행하기위해 만들어진 언어였으므로 애초에 클라이언트의 파일 시스템에 액세스할 수 없기 때문이다. 이러한 불편사항을 극복하기 위하여 번들러 프로그램들이 출시되었다. Webpack을 비롯한 번들러 프로그램들은 dependency들이 import되는 지점을 찾아 이를 import되는 파일에서 실제 필요한 내용으로 변환하고, 최종적으로 프로젝트를 하나의 자바스크립트 파일로 묶어준다. 번들러는 사용자가 지정한 entry point를 시작으로 프로젝트의 모든 파일을 살펴서 entry point 당 하나의 결과 파일, 즉, 하나의 컴파일된 output을 생성한다.

ES6 모듈(Modules)

번들러 프로그램은 ES6 모듈을 사용하는 프로젝트의 경우 특히 중요하다. 프로젝트가 여러 모듈 파일로 구성되어 있을 경우 브라우저가 각 파일에 대해 별도의 HTTP request를 날려야 할 수도 있기 때문에 프로젝트 크기나 복잡도에 따라 속도나 비용 면에서 큰 손실이 발생할 수도 있기 때문이다.

한편, 모듈은 코드 재사용성의 증가라는 큰 장점을 가지고 있다. import 선언을 통해 자바스크립트 파일을 현재 페이지에서 바로 사용할 수 있고, 반대로 export 선언을 통해 다른 페이지에서 사용하고 싶은 값, 함수, 클래스, 생성자 등을 내보낼 수 있는 덕분이다.

export

export는 named export와 default export 두 종류가 있다. 모듈 당 named export는 여러 개, default export는 단 한 개만 허용된다. export 선언의 이름은 겹쳐서는 안되며, 중복시 syntaxError가 발생한다.

named export
```
export { myFunction2, myVariable2 };
export let myVariable = Math.sqrt(2);
export function myFunction() {}
```
- 여러 개의 값을 export 할 때 유용
- import한 파일은 넘어온 값들을 export된 명으로 칭해야 함
default export
```
export default 1 + 1;
export default function foo() {
  console.log("Hi");
}
export default function () {
  console.log("Hi");
}
```
- export 키워드 뒤에 어떠한 표현(expression)도 허용
- 함수와 클래스를 익명으로 export 가능
- import시 어떠한 이름으로도 칭할 수 있음

import

import { foo, bar } from "/modules/my-module.js";
import * as myModule from "/modules/my-module.js";

export한 모듈의 변화에 따라 import한 값이 업데이트되지만, 반대로 현재 파일에서의 변화가 export한 모듈에 적용되지 않는 live binding 방식
import 선언은 모듈의 최상위 레벨에서 이루어져야함
expression대신 스트링 리터럴 식별자만 사용 가능
위와 같이 엄격한 구문 문법 적용덕분에 모듈의 dependency들을 runtime 이전에 정적으로 분석 가능

Single Page Application 개발에서의 활용

Vue.js는 컴포넌트 사용에 있어 ES6 모듈 방식을 적극 활용한다. Vue.js의 공식 문서에도 언급되어 있듯이 Vue.js는 컴포넌트 기반 구조와 클라이언트 단의 라우터 등의 다양한 툴을 제공하여 Single Page Application 개발에 적합한 프레임워크이다. 번들러 프로그램은 Vue.js의 컴포넌트 등의 자원들을 묶어서 브라우저에서 보다 효율적으로 동작하도록 도울 수 있다.

*해당 글은 다음의 글들을 참고하여 작성하였다:

조수빈