모듈 시스템: import export

핵심 개념

ES 모듈은 export로 내보내고 import로 가져옵니다. export default는 하나만 가능한 기본 내보내기, export const는 이름 있는 내보내기입니다. import { name } as alias로 별칭 사용, import * as obj로 전체 가져오기가 가능합니다. 모듈은 자체 스코프를 가져 전역 오염을 방지합니다. 현재 브라우저 환경에서 실습으로 확인합니다.

코드 분석

JS📋 코드 (9줄)

// math.js (모듈 파일)
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;
export default function power(base, exp) {
&nbsp;&nbsp;return Math.pow(base, exp);
}
// main.js (사용 파일)
import power, { add, multiply } from './math.js';
import * as MathUtils from './math.js';

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 JS '모듈 시스템: import export' 코드의 잠재적 버그와
메모리 누수·this 바인딩·비동기 경합 위험을
분석해서 프로덕션 수준으로 개선해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'모듈 시스템: import export'를 실제 서비스에서 어떻게 쓰는지
구체적 사례 3개와 복사 가능한 코드를
초보자가 이해할 수 있게 보여줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 JS '모듈 시스템: import export' 관련 코드 전체의 실행 흐름을 분석하고
성능 병목과 최적화 방안을 우선순위로 알려줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

'모듈 시스템: import export'에서 개발자들이 가장 많이 하는
실수 Top 3을 솔직하게 알려주고
2026년 권장 패턴을 함께 알려줘.

⭐ 이것만 기억하세요

모듈 시스템: import export는 이 3가지만 확실히 잡으세요

1.모든 코드를 한 파일에 넣으면 전역 변수 충돌이 발생하고, 파일이 커질수록 유지보수가 불가능해집니다

2.export로 내보내고 import로 가져오며, default export는 파일당 1개, named export는 여러 개 가능합니다

3.다음 챕터에서 깊은 객체 접근을 안전하게 하는 옵셔널 체이닝과 널 병합을 배웁니다

💬 이 챕터 질문 보기

JS · CH.28 — 질문하거나 답변을 확인하세요

→

진행도 28 / 34

← 커리큘럼으로 ← 목록으로 (JavaScript)