[JS] 8. 모듈 (Module)

모듈 (Module) : 코드를 재사용 가능한 파일 단위의 조각으로 나눈 것

• 자신만의 모듈 스코프를 갖고, 어플리케이션과 독립적으로 자체 컴파일한 단위
• 코드의 변수, 상수, 함수, 클래스 등을 선택적으로 공개 (Export)
• 이름 충돌, 종속성 등 문제 해결 및 엄격 모드 자동 적용
• Read-Only로 로드되며 동일 영역에 중복 import 가능

모듈 시스템 (Module System) → 현재는 ESM (ECMAScript Module)이 표준!

1. package.json에 "type": "module", 추가
2. 모든 파일의 확장자를 mjs
3. npm i esm → $> node -r esm mod.js

{
  "name": "js",
  "version": "1.0.0",
  "description": "package.json for test",
  "main": "npm.js",
  "author": "pocj8ur4in",
  "type": "module", 
  "license": "ISC"
}

임포트 (Import) & 익스포트 (Export) : 특정 모듈에서 Export한 것을 Import

• 모듈을 찾을 위치를 문자열로 지정하는 모듈 지정자 (Module Specifier) 사용
• 중복으로 임포트하더라도 실행 컨텍스트 단위 하나당 한번만 로드 (Module Map/Tree)
• 임포트 및 익스포트 선언은 최상위 스코프에서만 가능, 표현식이 아니라 선언이므로 호이스팅

export function fn() { ... }
export const value = 1;

import {} from './mod.js';
import '.mod.js'; // side-effect only! → 임포트로 실행만 할 경우에 선언

간접 익스포트 (Indirect Export & Aggregating) : 다른 모듈의 일부 혹은 전체를 받아 다시 익스포트

• 필요한 모듈만 모아놓은 또 다른 모듈을 만들 때에 활용

export { xxx } from './mod1.js';
export { yyy } from './mod2.js';
export { zzz } from './mod3.js'; // 사용하려면 명시적으로 import한 후 export해야 함

→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→

// import 후 export
import { xxx } from './mod3.js';
export { xxx };

→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→

// 개선된 방법 with Aggregating
import { xxx, yyy, zzz } from './agg.js';

export * from './mod1.js';
export * from './mod2.js';
export * from './mod3.js';

import * as agg from './agg.js';

동적 임포트 (Dynamic Import) : 코드 실행 중에 모듈을 비동기적으로 불러옴

• 어플리케이션 초기 로딩 시 모든 모듈을 불러오지 않고, 필요한 모듈만 필요한 시점에 불러와서 성능을 최적화

// 동적 임포트
import('./path/to/module')
  .then((module) => {
    // 모듈을 사용
    console.log(module);
  })
  .catch((error) => {
    // 에러 처리
    console.error('모듈을 불러오는 동안 에러 발생:', error);
  });

// 조건에 따라 모듈 동적으로 로드
const condition = true;

if (condition) {
  import('./path/to/someModule')
    .then((someModule) => {
      someModule.doSomething();
    })
    .catch((error) => {
      console.error('모듈을 불러오는 동안 에러 발생:', error);
    });
}

모듈 로더 (Module Loader) : 내부에서 임포트 및 익스포트를 관리

• [ImportEntries]와 [ExportEntries]라는 내장 슬롯으로 관리
  1. 임포트 & 파싱 (구문 분석) : 모듈 레코드, 모듈 맵을 생성
  2. 인스턴스화 : 모듈의 바인딩 및 환경 레코드를 생성
  3. 모듈 실행 : 모듈 코드를 실행, 모듈이 ‘평가됨’으로 표시

import { a } from './A.js'

Name: 'a'
Type: identifier
Value: 100
Mutable: false

npm 모듈 생성 및 업로드 (https://www.npmjs.com)

npm : Node.js의 패키지를 관리할 수 있는 도구

• Node.js에서 사용할 모듈을 패키지화해 모아둔 저장소 및 패키지 설치 및 관리를 위한 CLI 제공
• npx (node package execute)을 통해 패키지를 설치 및 실행
• 국내에서는 패키지 중복 문제를 링크 방식으로 해결한 yarn을 많이 사용하는 추세

1. 패키지 이름 정하기 (npm info <pkg>)
2. npm init으로 package.json 작성
3. 의존 관계가 있으면 npm install
4. npm login 후 배포 npm publish --access public