JavaScript import와 export

📦 자바스크립트 모듈화 - import와 export 완전 정복

복잡한 애플리케이션을 개발할수록 코드를 잘게 나눠 모듈화(modularization)하는 것이 중요합니다. ES6 이후 자바스크립트는 import와 export 키워드를 도입하여 모듈을 공식적으로 지원합니다.

📌 1. 모듈이란?

모듈은 각각의 자바스크립트 파일을 독립적인 단위로 나눈 것입니다. 변수, 함수, 클래스 등을 외부로 내보내기(export)하고 다른 모듈에서 가져오기(import)하여 사용할 수 있습니다.

장점:

• 코드의 재사용성 증가
• 파일 간 의존성 관리
• 가독성과 유지보수 향상

🚀 2. export - 내보내기

변수, 함수, 클래스 등을 다른 파일에서 사용할 수 있게 내보냅니다.

✅ 2-1. named export (이름 있는 내보내기)

// mathUtil.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

✅ 2-2. default export (기본 내보내기)

// greeting.js
export default function greet(name) {
  console.log(`Hello, ${name}!`);
}

default는 모듈당 한 번만 사용할 수 있으며 이름 없이 가져올 수 있습니다.

📥 3. import - 가져오기

✅ 3-1. named import

// main.js
import { add, subtract } from './mathUtil.js';

console.log(add(3, 2));      // 5
console.log(subtract(5, 1)); // 4

✅ 3-2. default import

// main.js
import greet from './greeting.js';

greet('철수'); // Hello, 철수!

✅ 3-3. 전체를 import

// main.js
import * as math from './mathUtil.js';

console.log(math.add(1, 2));
console.log(math.subtract(5, 3));

⚙️ 4. 모듈 사용 시 주의 사항

• 모듈 파일은 반드시 확장자 포함 (ex: .js, .mjs)
• 브라우저에서 <script type="module"> 사용 필수
• 동일한 모듈은 한 번만 로드됨 (캐싱)

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

💡 Node.js 환경에서는 CommonJS 방식 (require, module.exports)도 존재하지만, ES6 모듈 방식이 점점 더 많이 사용되고 있습니다.

📚 5. 마무리

import/export는 자바스크립트의 모던 개발에서 필수 기능입니다. 모듈을 적절히 나누고 가져오는 방식에 익숙해지면 프로젝트 관리와 협업 효율이 크게 향상됩니다.