모던 자바스크립트 Deep Dive - 48. 모듈

48.1. 모듈의 일반적 의미

• 모듈 (module): 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각
  • 기능을 기준으로 파일 단위로 분리하여 개별적인 파일로 작성됨
  • 애플리케이션과 별개로 존재함
  • 자신만의 파일 스코프(모듈 스코프)를 가짐
  • 파일 스코프는 캡슐화 되어 다른 모듈에서 접근할 수 없음
• export : 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개
  • 다른 모듈에서 재사용 가능
  • 모듈 사용자(module consumer): 공개된 모듈 자산을 사용하는 모듈
• import: 모듈 사용자는 공개된 자산을 자신의 스코프 내에서 재사용할 수 있음
  • 코드의 단위를 명확히 분리하여 애플리케이션 구성 가능
  • 재사용성, 개발 효율성, 유지보수성 향상

48.2. 자바스크립트와 모듈

• 자바스크립트 한계
  • 최초 자바스크립트는 웹페이지의 보조 기능을 목적으로 하여, 모듈 시스템을 지원하지 않음
  • 독립적인 파일 스코프를 갖지 않기 때문에 하나의 전역을 공유함
• 자바스크립트의 모듈 시스템
  • 브라우저 환경: CommonJS와 AMD 모듈 로더 라이브러리 사용
  • Node.js 환경: CommonJS 채택한 모듈 시스템 지원
    • 독립적인 파일 스코프(모듈 스코프) 가짐

48.3. ES6 모듈 (ESM)

• ES6 모듈 도입 (ESM)
  • script 태그 type="module" 어트리뷰트 추가
  • 파일 확장자 mjs 사용 권장
  • strict mode 기본 적용

48.3.1. 모듈 스코프

• ESM은 파일 자체의 독자적인 모듈 스코프 제공
  • var 키워드를 사용해도 전역 변수가 아니며, window 객체의 프로퍼티도 아님
  • 모듈 내 식별자는 모듈 외부에서 참조 불가

48.3.2. export 키워드

• 모듈 내부에서 선언한 식별자를 외부에 공개하여 재사용 가능하도록 함
• export 키워드를 선언문 앞에 사용함
  • 변수, 함수, 클래스 등 모든 식별자 가능
  • 하나의 객체로 한 번에 export 가능
    • ex. export { pi, square, Person }

48.3.3. import 키워드

• 다른 모듈에서 export한 식별자를 내부에서 사용함
• export한 식별자와 동일한 이름으로 import
  • as 사용하여 다른 이름으로 변경하여 사용 가능
  • ESM은 파일 확장자 생략 불가
  • 하나의 이름으로 한 번에 import 가능
    • ex. import * as lib from './lib.mjs'; -> lib.pi
• 모듈에서 하나의 값만 export하는 경우 default 키워드 사용 가능
  • var, let, const 키워드 사용 불가
  • {} 없이 임의의 이름으로 import
    - ex. import square from './lib.mjs';
    
    

[출처] 모던 자바스크립트, Deep Dive