모듈: import와 export

코드를 파일로 나눕니다

여기까지의 예제는 모두 파일 하나였습니다. 실제 프로젝트는 파일이 수십 개입니다. 나누지 않으면 이름이 부딪히고, 어디에 무엇이 있는지 알 수 없습니다.

모듈(module) 은 파일 하나를 뜻합니다. 그 안의 것은 기본적으로 그 파일 안에서만 보이고, 내보낸 것만 다른 파일에서 가져다 쓸 수 있습니다.

• export — 밖에서 쓸 수 있게 내보냅니다.
• import — 다른 파일에서 가져옵니다.

이름을 붙여 내보내기

가장 많이 쓰는 방식입니다. 하나의 파일에서 여럿을 내보낼 수 있습니다.

export const TAX = 0.1;

export function withTax(price) {
	return Math.floor(price * (1 + TAX));
}

export const half = n => n / 2;

import { withTax, TAX } from "./util.js";

console.log(TAX);
console.log(withTax(10000));

중괄호 안에 가져올 이름만 적습니다. half 는 가져오지 않았으므로 main.js 에서 쓸 수 없습니다.

경로는 ./ 로 시작합니다. 같은 폴더라는 뜻입니다. 브라우저에서는 확장자까지 적어야 합니다.

기본으로 하나 내보내기

파일이 하나만 내보낸다면 default 를 붙입니다. 가져올 때 중괄호가 없고 이름을 마음대로 붙일 수 있습니다.

export default class Cart {
	#items = [];

	add(item) { this.#items.push(item); }
	get count() { return this.#items.length; }
}

import Cart from "./Cart.js";
import ShoppingCart from "./Cart.js";   // 이름을 바꿔도 됩니다

const cart = new Cart();
cart.add("연필");

console.log(cart.count);

한 파일에 default 는 하나뿐입니다. 이름 내보내기와 함께 쓸 수도 있습니다.

불러 쓰는 자리

HTML 에서 모듈을 불러올 때는 type="module" 을 적습니다. 이것을 빠뜨리면 import 에서 오류가 납니다.

<script type="module" src="main.js"></script>

모듈에는 파일 하나짜리 코드와 다른 점이 몇 가지 있습니다.

• 한 번만 실행됩니다. 여러 파일이 같은 모듈을 가져와도 그 파일은 한 번만 돕니다.
• 내보내지 않은 것은 밖에서 보이지 않습니다. 이름이 부딪히지 않습니다.
• 언제나 엄격 모드입니다. 선언 없이 값을 넣으면 오류가 납니다(2.4).

이 화면에서는 실행할 수 없습니다

이 단원의 예제에는 실행 단추가 없습니다. 모듈은 파일이 둘 이상이라야 뜻이 있는데, 이 화면의 실행기는 파일 하나만 받습니다.

다만 모듈이 하는 일은 3.6 에서 배운 객체로도 확인할 수 있습니다. 아래는 같은 생각을 파일 하나 안에서 적어 본 것입니다.

// util.js 가 내보내는 것들이라고 치면
const util = {
	TAX: 0.1,
	withTax(price) {
		return Math.floor(price * (1 + this.TAX));
	}
};

// main.js 에서 가져다 쓰는 것이라고 치면
const { withTax } = util;

console.log(util.TAX);
console.log(util.withTax(10000));

모양은 닮았지만 다른 점이 있습니다. 구조 분해로 꺼낸 withTax 는 this 를 잃습니다(6.3). 진짜 모듈에서는 그런 일이 없습니다 — 함수가 객체에 매달려 있지 않기 때문입니다.

처음에 자주 걸리는 것

SyntaxError: Cannot use import statement outside a module

import { Cart } from "./Cart.js";   // default 로 내보냈다면 undefined 입니다
import Cart from "./Cart.js";       // 이렇게 적습니다

직접 해보기

이 단원의 정리