[모던 자바스크립트 Deep Dive] - 48~49장

이 글은 책 모던 자바스크립트 48장 ~ 49장을 읽고 정리한 글입니다.

48장 - 모듈

모듈의 일반적 의미

모듈: 재사용 가능한 코드 조각이며 파일 단위로 분리한다. 또한 자신만의 파일 스코프를 갖는다.

모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능함 --> export

모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다. --> import

모듈 사용의 이점

• 코드 단위 명확히 분리
• 재사용성
• 개발 효율성
• 유지 보수성

자바스크립트와 모듈

처음 사용목적이 단순한 보조 기능 처리였기에 존재하지 모듈이 존재하지 않았지만 CommonJS와 AMD 등 다양한 모듈시스템이 나오면서 지원하게 됨. 현재 Node.js는 CommonJS를 모듈시스템 표준으로 채택함. --> 파일별로 독립적인 파일 스코프를 갖는다.

ES6 모듈(ESM)

ES6에서 클라이언트 사이드 JS에서 동작하는 모듈 기능을 추가함 --> ESM

<script type="module" src="app.mjs"></script>

사용법은 type="module" 어트리뷰트를 추가하며, 일반적인 JS 파일이 아닌 ESM임을 명확히 하기 위해 ESM 파일 확장자는 mjs를 사용할 것을 권장한다.
--> strict mode가 기본적으로 적용됨

모듈 스코프

일반적인 JS 파일은 독자적인 모듈 스코프를 갖지 않아서 var x로 변수를 선언한 2개의 파일이 존재할 시, 마지막으로 로드된 js 파일의 var x 선언문에 할당된 값이 window.x에 들어가 있게 된다.

그러나 ESM은 아래와 같이 다르게 동작한다.

<script type="module" src="foo.mjs"></script>
<script type="module" src="bar.mjs"></script>

// foo.mjs
// x 변수는 전역 변수가 아니고 window 객체의 프로퍼티도 아님

var x = 'foo';

console.log(x); // foo
console.log(window.x); // undefined

// -------------------------

// bar.mjs

var x = 'bar';

console.log(x); // bar
console.log(window.x); // undefined

이 뿐만 아니라 모듈 내에서 선언한 식별자는 모듈 외부에서 스코프가 다르기 때문에 참조할 수 없다.
ex) foo.mjs에 어떤 변수 선언하고 그 변수를 bar에서 참조를 못함

export 키워드

모듈 내부에서 선언한 식별자를 외부에 공개하여 다른 모듈들이 재사용할 수 있게 하려면 export 키워드를 사용한다.

export 키워드를 매번 선언문 앞에 붙여서 사용할 수 있지만 객체로 구성하여 한 번에 export가 가능하다.

// lib.mjs
const pi = Math.PI;

function square(x) {
  return x * x;
}

class Person {
  constructor(name) {
    this.name = name;
  }
}

// 변수, 함수 클래스를 하나의 객체로 구성하여 공개
export { pi, square, Person };

import 키워드

다른 모듈에서 공개한 식별자를 자신의 모듈 스코프 내부로 로드하려면 import 키워드를 사용한다. 다른 모듈이 export한 식별자 이름으로 import하고, ESM의 경우 파일 확장자 생략 불가능!

// app.mjs
import { pi, square, Person } from './lib.mjs';

console.log(pi);
console.log(square(10));
console.log(new Person('Lee'));

그 외 사용법

// 하나의 이름으로 한 번에 import 하는 방법
import * as lib from './lib.mjs';

// export한 식별자 이름 변경
import { pi as PI, square as sq, Person as p } from './lib.mjs';

하나의 값만 export 하는 경우 default 키워드를 사용할 수 있고, 이 키워드와 함께 export 한 모듈은 {} 없이 임의의 이름으로 import할 수 있다.

// lib.mjs

export default x => x * x;

// --------------------
// app.mjs

import square from './lib.mjs';

console.log(square(3)); // 9

default 키워드 사용 시, var, let, const 키워드는 사용할 수 없다.

export default const foo = () => {}; // SyntaxError

49장 - Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축

대부분의 최신 브라우저의 ES6 지원율은 높지만, IE 11dml ES6의 지원율은 낮기 때문에 IE를 포함한 구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경을 구축해야 한다 --> 트랜스파일러인 Babel과 모듈 번들러인 Webpack을 이용한다.

ES6 모듈은 대부분의 모던 브라우저에서 사용할 수 있지만 다음의 이유로 별도의 모듈 로더를 사용하는 것이 일반 적이다.

• IE를 포함한 구형 브라우저는 ESM 지원 X
• ESM을 사용하더라도 트랜스파일링이나 번들링이 필요한 것은 변함이 없다.
• ESM이 아직 지원하지 않는 기능이 있고 점차 해결되고는 있지만 아직 몇가지 이슈가 존재한다.

Babel

Babel은 ES6+/ES.NEXT로 구현된 최신 사양의 소스코드를 IE 같은 구형 브라우저에서도 동작하는 ES5 사양의 소스코드로 변환시킬 수 있다.

Babel 설치

npm을 사용하여 Babel 설치

프로젝트 폴더에서

npm init -y

npm install --save-dev@babel/core @babel/cli

Babel 프리셋 설치와 babel.config.json 설정 파일 작성

babel을 사용하기 위해 @babel/preset-env 설치해야함 (함께 사용되어야 하는 babel 플러그인을 모아둔 것을 바벨 프리셋이라고 부른다.

npm install --save-dev @babel/preset-env

babel.config.json 설정파일 생성 후

{
  "presets": ["@babel/preset-env"]
}

지금 설치한 babel/preset-env를 사용하겠다는 의미

트랜스파일링

매번 Babel CLI를 입력할 순 없으므로 package.json을 활용하여 scripts에 명령어를 등록하여 사용한다.

"scripts": {
  "build": "babel src/js -w -d dist/js"
}

src/js 폴더에 있는 모든 JS 파일들을 트랜스파일링한 후, 결과물을 dist/js폴더에 저장한다는 의미이다.

• -w: 타깃 폴더에 있는 모든 JS 파일들의 변경을 감지하여 자동으로 트랜스파일한다. (--watch 옵션의 축약형)
• -d: 트랜스파일링된 결과물이 저장될 폴더를 지정한다. 만약 지정된 폴더가 존재하지 않으면 자동 생성한다. (--out-dir 옵션의 축약형)

이후 npm run build 명령어를 사용하여 트랜스파일링을 진행할 수 있지만, ES6 클래스의 #private 와 같은 클래스 필드 정의 제안의 경우 지원을 하지 않아 에러가 발생한다.

이를 위해선 별도의 플러그인 설치가 필요하다

Babel 플러그인 설치

Babel 홈페이지에 들어가 class filed를 입력 후 나오는 플러그인을 설치한다.

npm install --save-dev @babel/plugin-proposal-class-properties

babel.config.json에 다음과 같이 추가

"plugins": ["@babel/plugin-proposal-class-properties"]

이후 실행

브라우저에서 모듈 로딩 테스트

Node.js 환경에서는 CommonJS 방식의 모듈 로딩 시스템을 따라서 정상적으로 잘 동작되지만, 브라우저는 CommonJS의 require 함수를 지원하지 않으므로 트랜스파일링된 결과를 그대로 실행하면 에러가 발생한다.

브라우저의 ES6 모듈을 사용하도록 Babel을 설정할 수 있으나, ESM은 앞서 말한 3가지 문제점이 존재하기 때문에 WebPack을 사용한다.

Webpack

웹팩은 의존 관계에 있는 JS, CSS, 이미지 등의 리소스들을 하나의 파일로 번들링하는 모듈 번들러다.

Webpack 설치

npm install --save-dev webpack webpack-cli

babel-loader 설치

npm install --save-dev babel-loader

npm scripts를 변경하여 Babel 대신 Webpack을 실행하도록 수정

"scripts": {
 "build": "webpack -w" 
}

webpack.config.js 설정 파일 작성

--> 책 참조

이후 Webpack을 실행후, 생성된 결과물을 index.html의 script src로 지정하고 브라우저를 실행시키면 정상적으로 작동된 것을 확인할 수 있다.

babel-polyfill 설치

Promise, Object.assign, Array.from 등은 트랜스파일링이 되지 못하고 그대ㅗㄹ 남아서 이를 위해 babel-polyfill을 설치한다.

npm install @babel/polyfill

이는 개발 환경에서만 사용하는 것이 아닌 실제 운영 환경에서도 사용해야하기 때문에 --save-dev 옵션을 지정하지 않는다.

바벨만 사용하는 경우 진입점 파일의 선두에 import @babel/polyfill";을 작성한다.

Webpack을 사용하는 경우 entry 배열에 폴리필을 추가하여 사용한다. entry: ['@babel/polyfill', './src/js/main.js'],

이후 명령어로 실행 후, 번들링된 파일을 확인해보면 폴리필이 추가된 것을 확인할 수 있다.