<Frontend> JavaScript / 모듈 시스템 (Module)

Module

모듈(Module)이란 무엇인가?

• 재사용 가능한 코드 조각
• 코드를 분리해 작고 관리하기 쉬운 파일로 구분
• 모듈은 자체적인 스코프를 가져 코드와 네임스페이스 충돌을 막음
• 모듈 사용법은 크게 ESM, CJS 방식으로 나뉨

JS에서 모듈은 코드를 구성하고 재사용하기 위한 도구입니다.

모듈을 사용하면 코드를 논리적으로 구성하고 다른 파일에서 재사용할 수 있어 편리합니다.

---

 

ESM ( ECMAScript ) Module

• 프론트엔드 영역에서 표준화되어 널리 쓰이는 방식
• node.js 12버전 부터 ESM을 공식 채택 했으나 CJS 방식을 주로 사용
• import, export 키워드를 사용
• 비동기적

장점

• 비동기적 로딩을 통해 성능 향상을 기대할 수 있다.
• 브라우저 및 최신 Node.js에서 기본적으로 지원된다.

단점

• Node.js의 이전 버전에서는 기본적으로 지원되지 않는다.

구현방식

- Named Export / import

• 여러 값을 내보낼 때 각각의 고유한 이름으로 내보내기 사용
• 하나의 모듈에서 여러 함수, 변수, 클래스 등을 내보내기 할 때 사용

// namedExport.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;
export const divide = (a, b) => a / b;

// index.js
import {add, subtract, miltiply, divide} from './namedExport.js'

 

 

 

- Default Export / import

• 모듈당 하나의 값을 내보낼 때 사용
• 모듈 전체가 하나의 클래스나 객체 일 때 유용
• import 시 명칭 변경 가능

// defaultExport.js
export default class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  }
  
  birthday() {
    this.age += 1;
    console.log(`Happy birthday ${this.name}, you are now ${this.age} years old.`);
  }
}

// index.js
import NameChange from './defaultExport.js';

const user1 = new NameChange('Kim', 30);
user1.greet();
user1.birthday();

 

 

---

CJS (CommonJS) Module

• Node.js에서 기본적으로 사용되는 모듈 시스템이다.
• require, module.export 키워드를 사용하여 모듈을 가져오고 내보낸다.
• 동기적 로딩
• 파일 기반의 모듈 시스템으로 구조화되어 있다.

장점

• Node.js에서 초기부터 지원되었기 때문에 널리 사용되고 익숙한 형식이다.
• 동기적인 로딩을 통해 모듈의 순서를 보장한다.

단점

• 대규모 어플리케이션에서는 성능 이슈가 발생할 수 있다.
• 브라우저에서는 기본적으로 지원되지 않는다.

구현방식

// math.js
const add = (a, b) => {
  return a + b;
};

const subtract = (a, b) => {
  return a - b;
};

module.exports = {
  add,
  subtract
};

 

위 코드는 main.js 파일에 있는 CJS 스타일의 모듈입니다.

add와 substract 함수를 정의하고, module.exports를 통해 외부에서 사용할 수 있도록 내보냅니다.

 

// app.js
const math = require('./math');

console.log(math.add(5, 3)); // 8
console.log(math.subtract(5, 3)); // 2

 

module.exports로 내보낸 모듈을 require를 통해 불러와 add와 substract 함수가 사용하였습니다.

---

EMS vs CJS

정답은 없습니다. 프로젝트의 요구 사항, 개발 환경을 고려하여 알맞은 모듈 시스템을 활용해야 합니다.

 

ESM ( ECMAScript ) Module

• 최신 웹 개발 환경
• 최적화가 필요한 환경 (Tree-shaking, Code Splitting, Dynamic imports - Lazy Loading)
• FE - BE 스텍을 맞추고 싶은 경우

CJS (CommonJS) 모듈

• 백엔드 개발
• Node.js를 활용한 SSR개발 시
• 기존 Node.js 프로젝트를 사용하거나 라이브러리를 사용해야 하는 경우