모듈(module)
: 분리된 개별 코드 파일
모듈 프로그래밍
: 코드의 재사용성과 유지보수성을 높이기 위해 코드를 여러 모듈로 나누는 기법
모듈의 핵심 기능
- 엄격 모드(use strict)로 실행됨
- <script type="module"> 이어야 export, import 가능✨ - 모듈 만의 스코프(scope)가 있음
- 모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없다❌ - 한 번만 평가됨
- 동일한 모듈이 여러 곳에서 사용되더라도 모듈은 최초 호출 시 단 한 번만 실행된다. - 지연 실행된다.
- 인라인 모듈 스크립트도 비동기 처리할 수 있다.
export (내보내기)
: 변수, 함수, 클래스를 모듈 밖으로 내보낼 수 있다.
named export (이름 내보내기)
- 한 파일 내에서 여러 개 내보내기(export) 가능
- 여러 항목을 보내기 편함 (유틸리티 함수 등)
- import 할 경우
- as 키워드를 사용해서 다른 이름(별칭)을 지정할 수 있음⭕
- {중괄호} 사용⭕
// export
export const pi = 3.14159;
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
// import
import { pi, add, subtract } from './math.js';
console.log(pi); // 3.14159
console.log(add(2, 3)); // 5
console.log(subtract(5, 3)); // 2
// import alias
import { add as addition, subtract as subtraction } from './math.js';
console.log(addition(2, 3)); // 5
console.log(subtraction(5, 3)); // 2
default export (기본 내보내기)
export default
- 한 파일 내에서 1개만 내보내기(export) 가능
- 모듈의 주요 항목을 내보낼 때 사용 (변수, 클래스, 함수 등)
- import 할 경우
- as 키워드 없이 이름 변경 가능⭕
- 중괄호 사용 ❌
(ex. import 함수명 from '경로')
// export
export default function greet(name) {
return `Hello, ${name}!`;
}
// import
import greet from './utils.js';
console.log(greet('World')); // Hello, World!
// import alias
import welcome from './utils.js';
console.log(welcome('World')); // Hello, World!
import (가져오기)
: 다른 모듈에서 내보낸 변수, 함수, 클래스를 가져올 수 있다.
named import (이름 내보내기)
import { 이름 } from '경로';
- 특정 이름으로 내보낸 요소를 가져올 때 사용
- {중괄호} 사용⭕
- import All (모든 내용 한 번에 가져오기): import * [as]
// export
export const pi = 3.14159;
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
// import
import { pi, add, subtract } from './math.js';
console.log(pi); // 3.14159
console.log(add(2, 3)); // 5
console.log(subtract(5, 3)); // 2
// import alias
import { add as addition, subtract as subtraction } from './math.js';
console.log(addition(2, 3)); // 5
console.log(subtraction(5, 3)); // 2
// import all
import * as math from './math.js';
console.log(math.pi); // 3.14159
console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 3)); // 2
default import (기본 내보내기)
import 이름 from '경로';
- 모듈에서 하나의 기본(default) 요소를 가져올 때 사용
- 중괄호 사용 ❌
// export
export default function greet(name) {
return `Hello, ${name}!`;
}
// import
import greet from './utils.js';
console.log(greet('World')); // Hello, World!
모듈 소개
ko.javascript.info