[JavaScript] 모듈

모듈(Module)

모듈의 정의 

• 재사용 가능한 코드 조각 → 함수, 변수, 클라스, 파일 등을 포함

모듈의 특징

• 각각의 모듈은 독립성을 가짐
• 다른 코드 내부에서 재사용 가능
• 네임스페이스 관리: 모듈 자체의 이름을 가짐(다른 모듈과의 충돌을 방지)
• 가독성 및 조직화 향상

ES6 모듈

• ES2015 이후에 JS에서 공식적으로 모듈 시스템을 도입 → import, export문을 통해 모듈을 가져오고 내보내는 방식 도입
• 스코프 격리 : 모듈 내에서 선언된 변수, 함수, 클래스 등은 모듈 외부에서 접근 x → 전역 변수의 사용 줄이고 이름 충돌을 방지
• 재사용성과 유지보수성 향상

(import문 사용 예시)

import { PI as PIE, multiply as mp } from './module02.js';

console.log(PIE); // 3.1412341234
console.log(mp(2, 3)); // 6





[module02.js]
export const PI = 3.1412341234;

export function multiply(x, y) {
  return x * y;
}

1. import문

1) 이름 붙여 가져오기 - 중괄호 사용 가능

• 여러 개의 export가 가능 → 중괄호 내에서 ,(콤마)로 구분하여 나열

2) 이름 붙여 가져오기의 as 구문

• as 키워드(alias: 별칭, 별명) → 가져오는 모듈 내에서 별칭을 사용하여 해당 기능에 대한 참조

3) 전체 모듈을 별칭으로 가져오기

• 하나의 모듈(파일)을 하나의 별칭으로 가져와 모듈 내의 모든 기능을 해당 별칭을 통해 접근
• 하나의 모듈을 객체로 파악

import * as module02 from './module02.js';

console.log(module02.PI); // 3.1412341234
console.log(module02.multiply(9, 2)); // 18

4) 기본 가져오기

• import 모듈명(변경 x) from './파일의경로.확장자'; 

import add from './module02.js';
console.log(add(4, 5)); // 9

 

2. export문

• 모듈에서 다른 파일로 함수, 변수, 클래스 등을 내보낼 때
• 이름 붙여 내보내기, 기본 내보내기

1) Named Exports (이름 붙여 내보내기)

• 하나의 모듈에서 여러 항목을 내보내기 가능
• 각 항목은 고유한 이름으로 참조
• 각 항목앞에 export 키워드 참조

2) Default Exports (기본 내보내기)

• 모듈 당 하나의 항목만 내보내기 가능
• 주로 한 모듈에 하나의 주요 기능이 있는 경우에 적합
• 각 항목 앞에 export default 키워드 사용