[TIL] JavaScript 모듈: import와 export

자바스크립트에서 모듈이란?

코드를 재사용 가능한 단위로 만드는 방법으로, 이를 통해 전체 코드베이스를 유지 보수하기 쉽고, 모듈 간의 의존성을 관리할 수 있어요.(긴 코드를 여러개로 쪼개서 관리하는 방법)

예제

// modules/main.js
const add = (a, b) => a + b;
const sub = (a, b) => a - b;
const mul = (a, b) => a * b;
const div = (a, b) => a / b;

console.log(add(1, 2)); // 3
console.log(sub(3, 1)); // 2
console.log(mul(4, 2)); // 8
console.log(div(6, 3)); // 2

Export와 import를 사용하여 자바스크립트 파일 모듈화하기

export

키워드는 자바스크립트 파일 안에서 외부로 공개하고자 하는 함수, 변수 또는 클래스를 지정할 수 있어요.

import

키워드는 외부 자바스크립트 파일에서 함수, 변수 또는 클래스를 가져오는 데 사용되요.

// modules/math.js
export const add = (a, b) => a + b;
export const sub = (a, b) => a - b;
export const mul = (a, b) => a * b;
export const div = (a, b) => a / b;

export 키워드를 통해 math.js 파일 내부에 있는 함수들을 외부로 내보내줘요.

// modules/main.js
import { add, div, mul, sub } from "./math.js";

console.log(add(1, 2)); // 3
console.log(sub(3, 1)); // 2
console.log(mul(4, 2)); // 8
console.log(div(6, 3)); // 2

import 키워드를 통해 math.js 파일에 있는 함수들을 main.js 파일로 가져와서 사용해요.

근데?!?!?!

에러가 발생한이유는..??

index.html에서 모듈 가져오기

JavaScript 모듈을 index.html 파일에서 가져오려면 type="module" 속성을 사용하여 스크립트 태그를 작성해야해야해요.

<!-- index.html -->
<script type="module" src="./modules/main.js"></script>

이제 정상적으로 콘솔에 출력되는 것을 확인할 수 있어요.

주의사항

모듈을 가져올 때 확장자를 생락하면 모듈을 찾지 못해요.

개발 서버에서는 보안 상의 이유로 file://URL에서 모듈을 가져올 수 없는 경우가 있는데 그럴 경우 Live Server와 같은 익스텐션을 사용해야해요.

named export vs default export

default Export는 모듈 안에서 하나의 값을 외부로 공개

// name.js
const Name = () => {
}

export default Name

// other file 
// 아무 이름으로 import 가능
import newName from "name.js"
import NameFromOtherModule from "name.js

named export는 하나의 모듈 안에서 여러 개의 값을 공개할 수 있어요.

// 하나의 파일에서 여러 변수/클래스 등을 export 하는 것이 가능

export const Name1 = () => {
}

export const Name2 = () => {
}

// other file
import {Name1, Name2} from "name.js"
import {newName} from "name.js" // x

// 다른 이름으로 바꾸려면 as 사용
import {Name1 as newName, Name2} from "name.js"

// default export 처럼 가져오려면 * 사용
import * as NameModule from "name.js"

console.log(NameModule.Name1)

모듈은 항상 엄격 모드(use strict)로 실행

type=”module”로 실행시킨 ES6 모듈 파일은 상단 파일에 “use strict”를 명시하지 않아도 항상 엄격 모드로 실행되요.

모듈로 만들어진 파일은 항상 지연 실행

defer 속성을 붙인 것처럼 비동기적으로 처리된다고 생각하면 되요.

예시

div 태그 부분은 alert가 꺼지고 난 뒤에 나타나요! 동기적으로 동작했기 때문이에요.

// modules/test.js
alert("안녕");

<script src="./modules/test.js"></script>
<div>내가 언제 나타나게?</div>

type=”module”을 넣으면 HTML부분이 렌더링이 되요.

<script defer src="./modules/test.js"></script>
// 또는
<script type="module" src="./modules/test.js"></script>
<div>내가 언제 나타나게?</div>