모듈 시스템 (Import / Export)
파일 하나에 코드를 1만 줄씩 쓰면 유지보수가 불가능합니다. 코드를 여러 파일(모듈)로 예쁘게 쪼개어 정리하고, 필요할 때 부품처럼 조립해서 쓰는 시스템입니다. 모던 웹팩(Webpack)과 Vite 생태계의 핵심 기반입니다.
파일 간의 부품 배송 시스템 (ES Modules)
math.js
export add
app.js
import { add }
// [math.js] 파일 - 공구 상자
// 함수 앞에 export를 붙이면 다른 파일에서 가져다 쓸 수 있습니다.
export const PI = 3.14;
export function add(a, b) { return a + b; }
// 파일당 딱 1개만 설정할 수 있는 메인 대표 도구
export default function multiply(a, b) { return a * b; }
// [app.js] 파일 - 작업장
// 1. 일반 도구(export)는 반드시 중괄호 {} 로 이름을 콕 집어 가져옵니다.
import { PI, add } from "./math.js";
// 2. 대표 도구(default)는 중괄호 없이 내가 원하는 이름으로 가져옵니다.
import myMulti from "./math.js";
console.log(add(PI, 2));