1. 자바스크립트 모듈(Module)의 이해
1.1 모듈의 정의와 핵심 특징
모듈은 애플리케이션을 구성하는 재사용 가능한 독립적 코드 조각입니다.
- 독자적인 파일 스코프: 각 모듈은 자신만의 스코프를 가져 전역 변수 중복 충돌을 근본적으로 방지합니다.
- 명시적 인터페이스:
export로 공개하고import로 가져오는 명확한 의존 관계를 가집니다.
1.2 ESM(ES6 모듈) 사용법
브라우저에서 ESM을 직접 사용할 때는 <script> 태그에 type="module"을 명시해야 합니다.
- 독립 스코프: 일반 스크립트와 달리 파일 간 변수명이 겹쳐도 안전합니다.
- 기본 내보내기:
export default를 사용하면 이름 없이 하나를 내보낼 수 있으며, 가져올 때 원하는 이름을 붙일 수 있습니다.
2. 최신 자바스크립트 개발 환경 구축
2.1. 개발 환경이 필요한 이유
현대 프론트엔드 개발에서 빌드 도구는 선택이 아닌 필수입니다.
- 브라우저 호환성: IE11 등 구형 브라우저는 ES6 사양 지원율이 매우 낮습니다.
- 모듈 해석: 브라우저는
import/export구문을 직접 해석하기보다, 번들링된 파일을 실행하는 것이 성능상 유리합니다.
2.2. Babel: 트랜스파일러(Transpiler)
Babel은 최신 구문을 구형 브라우저가 이해할 수 있는 ES5 수준의 코드로 변환합니다.
- 핵심 역할: 화살표 함수, 클래스, 구조 분해 할당 등 ‘문법(Syntax)’ 변환.
- 주요 패키지:
@babel/core,@babel/preset-env(브라우저 환경 맞춤형 프리셋).
2.3. Webpack: 모듈 번들러(Bundler)
Webpack은 수많은 모듈 파일(JS, CSS, 이미지 등) 간의 의존성을 분석하여 하나의 파일로 병합합니다.
- 주요 설정 사항:
- Entry: 번들링을 시작할 진입점 파일.
- Output: 결과물이 저장될 경로와 파일명.
- Loaders: Babel과 연결해주는
babel-loader등 파일 타입별 처리 도구.
2.4. Polyfill: 기능의 빈틈 채우기
Babel이 문법을 바꾼다면, 폴리필은 구형 브라우저에 없는 API를 직접 구현해 넣어줍니다.
- 대상:
Promise,Object.assign,Array.from등. - 적용:
@babel/polyfill을 설치하고 엔트리 파일 최상단에서 로드하여 크로스 브라우징을 완성합니다.