48장. 모듈

본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다.

48.1 모듈의 일반적 의미

• 모듈 : 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각
• 모듈의 자산(변수, 함수, 객체)은 기본적으로 비공개 상태
  • 캡슐화되어 다른 모듈에서 접근 불가
  • 애플리케이션과 분리
• 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개는 가능
  • export
• 모듈 사용자 : 공개된 모듈의 자산을 사용하는 모듈
  • 다른 모듈이 공개한 자산을 선택해 자신의 스코프 내로 불러 재사용 가능
• 모듈의 의의
  • 코드의 단위를 명확하게 분리
  • 재사용성, 개발 효율성, 유지 보수성 증대

48.2 자바스크립트 모듈

• 자바스크립트는 script 태그로 분리를 하여도 하나의 자바스크립트 파일 내에 있는 것처럼 동작
  • 하나의 전역 공유
• CommonJS, AMD(Asynchronous Module Definition) 제안
• Node.js는 CommonJS를 채택

48.3 ES6 모듈(ESM)

• ES6
• 클라이언트 사이드 자바스크립트에서도 동작하는 모듈
• script 태그에 type="module" 어트리뷰트 추가
  • 확장자는 mjs 사용
• 기본적으로 strict mode 적용
• ESM은 독자적인 모듈 스코프를 가짐
• export 키워드를 선언문 앞에 사용하여 다른 모듈들이 재사용 가능하게 함
• import 키워드를 사용하여 다른 모듈에서 공개한 자산을 스코프 내부로 가져와 사용
  • import되는 식별자는 as 뒤에 지정한 이름의 객체에 프로퍼티로 할당