[JS] DeepDive(48) 모듈

728x90

모듈의 일반적 의미

모듈이란 애플리케이션을 구성하는 개별적 요소이다. 모듈이 성립하기 위해선 모듈은 자신만의 파일 스코프를 가질 수 있어야 한다.

모듈의 모든 자산은 캡슈로하되어 다른 모듈에서 접근할 수 없으며 즉 모듈은 애플리케이션과 분리된다. 하지만 애플리케이션과 모듈이 완전히 분리된다면 모듈은 사용하는 의미가 없다. 따라서 공개에 필요한 부분에 한정해서 선택적으로 공개한다.

이게 export이다.

모듈 사용자는 모듈이 공개한 자산 중 일부나 전체를 선택하여 자신의 스코프로 불러올 수 있으며 이를 import라고 한다.

자바스크립트와 모듈

자바스크립트는 웹페이지의 단순한 보조 기능을 처리하기위한 제한 적 용도를 목적으로 태어난 언어이다. 따라서 타 언어와 비교할때 부족한 점이 몇가지 있는데 대표적으로 모듈 시스템을 JS는 지원하지 않는다.

즉 JS파일을 여러개로 분리하여 script태그로 분리하여도 분리된 JS파일은 하나의 JS파일처럼 동작한다. 하지만 JS를 클라이언트 사이드 외 범용적으로 사용하려는 움직임이 생기고 이런 상황에서 제안된 것이 CommonJS와 AMD이다.

Node.js는 모듈시스템의 사실상 표준인 CommonJS를 채택하였다.

ES6모듈(ESM)

ES6에서는 클라이언트 사이드 자바스크립트에서도 동작하는 모듈 기능을 추가하였으며 IE를 제외한 대부분의 브라우저에서 ES6모듈을 사용할 수 있다.

ES6모듈 (ESM)은 script 태그에 type="module" 어트리뷰트를 추가하면 된다. 해당 js파일은 mjs파일 확장자로 사용하는것을 권장한다.

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

모듈 스코프

ESM은 독자적인 모듈 스코프를 갖는다.

// foo.js
// x 변수는 전역 변수다.
var x = 'foo';
console.log(window.x); // foo

// bar.js
// x 변수는 전역 변수다. foo.js에서 선언한 전역 변수 x와 중복된 선언이다.
var x = 'bar';

// foo.js에서 선언한 전역 변수 x의 값이 재할당되었다.
console.log(window.x); // bar

<!DOCTYPE html>
<html>
<body>
  <script src="foo.js"></script>
  <script src="bar.js"></script>
</body>
</html>

위 예제의 script태그로 분리된 2개의 JS파일은 하나의 JS파일 내에 있는것처럼 동작한다. 즉, 전역이 공유된다. 따라서 foo.js에서 선언한 x변수와 bar.js에서 선언한 x변수는 중복되게 된다.

ESM은 파일 자체의 독자적 모듈 스코프를 지원한다. 모듈 내에서 var 키워드로 선언한 변수는 전역변수가 아니며 window객체의 프로퍼티도 아니게 된다.

// foo.mjs
// x 변수는 전역 변수가 아니며 window 객체의 프로퍼티도 아니다.
var x = 'foo';
console.log(x); // foo
console.log(window.x); // undefined

// bar.mjs
// x 변수는 전역 변수가 아니며 window 객체의 프로퍼티도 아니다.
// foo.mjs에서 선언한 x 변수와 스코프가 다른 변수다.
var x = 'bar';
console.log(x); // bar
console.log(window.x); // undefined

<!DOCTYPE html>
<html>
<body>
  <script type="module" src="foo.mjs"></script>
  <script type="module" src="bar.mjs"></script>
</body>
</html>

모듈 내에서 선언한 식별자는 모듈 외부에서는 참조할 수 없게된다. 그 이유는 모듈 스코프가 다르기 때문!

// foo.mjs
const x = 'foo';
console.log(x); // foo

// bar.mjs
console.log(x); // ReferenceError: x is not defined

<!DOCTYPE html>
<html>
<body>
  <script type="module" src="foo.mjs"></script>
  <script type="module" src="bar.mjs"></script>
</body>
</html>

export 키워드

모듈이 독자적인 모듈 스코프를 가진다고 했다. export 키워드를 사용하면 선택한 식별자를 외부에 공개하겠다고 명시할 수 있다.

// lib.mjs
// 변수의 공개
export const pi = Math.PI;

// 함수의 공개
export function square(x) {
  return x * x;
}

// 클래스의 공개
export class Person {
  constructor(name) {
    this.name = name;
  }
}

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 키워드

다른 모듈에서 export한 식별자를 로드하려면 import 키워드를 사용하면 되며 export한 이름을 꼭 써야하며 ESM의 경우 파일 확장자를 생략할 수 없을을 알아두자.

// app.mjs
// 같은 폴더 내의 lib.mjs 모듈이 export한 식별자 이름으로 import한다.
// ESM의 경우 파일 확장자를 생략할 수 없다.
import { pi, square, Person } from './lib.mjs';

console.log(pi);         // 3.141592653589793
console.log(square(10)); // 100
console.log(new Person('Lee')); // Person { name: 'Lee' }

<!DOCTYPE html>
<html>
<body>
  <script type="module" src="app.mjs"></script>
</body>
</html>

app.mjs파일은 반드시 script 태그로 로드해야 하지만 lib.mjs는 import문에 의해 로드되기 때문에 굳이 script태그로 로드하지 않아도 된다.

만약 as를 활용하면 import된 식별자의 이름을 바꾸는 것도 가능하다.

// app.mjs
// lib.mjs 모듈이 export한 모든 식별자를 lib 객체의 프로퍼티로 모아 import한다.
import * as lib from './lib.mjs';

console.log(lib.pi);         // 3.141592653589793
console.log(lib.square(10)); // 100
console.log(new lib.Person('Lee')); // Person { name: 'Lee' }

모듈이 export한 식별자 이름을 변경하여 import하는것도 가능하다.

// app.mjs
// lib.mjs 모듈이 export한 식별자 이름을 변경하여 import한다.
import { pi as PI, square as sq, Person as P } from './lib.mjs';

console.log(PI);    // 3.141592653589793
console.log(sq(2)); // 4
console.log(new P('Kim')); // Person { name: 'Kim' }

모듈에서 하나의 값만 export한다면 default키워드를 사용할 수 있다.

// lib.mjs
export default x => x * x;

이 경우 var,let,const 키워드를 사용할 수 없다.

// lib.mjs
export default const foo = () => {};
// => SyntaxError: Unexpected token 'const'
// export default () => {};

default 키워드를 사용했다면 {}를 사용하지 않아도 된다. 하나의 값만 들어가기 때문

// app.mjs
import square from './lib.mjs';

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