[JavaScript] 모듈

🌼모듈

= 재사용 가능한 코드 조각

• 코드를 분리해 작고 관리하기 쉬운 파일로 구분
• 모듈은 자체적인 스코프를 가져 코드와 네임스페이스 충돌을 먹음
• 각 모듈은 독립적인 기능을 가짐
• 필요한 함수, 변수, 클래스 등을 정의 가능
• 유지 보수성과 재사용성을 향상 가능
• 모듈 사용법은 크게 CJS(CommonJS)와 ESM(ECMAScript) 방식으로 나뉨

🌱 ESM (ECMAScript)

• JavaScript의 모듈 시스템을 정의
  -웹 브라우저 및 Node.js에서 지원
• 프론트엔드 영역에서 표준화 되어 널리 쓰이는 방식
• import 및 export 키워드를 사용하여 모듈을 정의하고 내보내고 가져오는 기능을 제공함

예제1 - math.js , main.js

// math.js
export function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}

'math.js' 모듈은 'add, substract' 함수를 'export' 키워드를 사용하여 외부로 공개함

// main.js
import { add, subtract } from './math.js';
console.log(add(5, 3)); // 출력: 8
console.log(subtract(10, 4)); // 출력: 6

'main.js' 파일에서 'math.js' 모듈에서 내보낸 'add, subtract' 함수를 'import' 키워드를 사용하여 가져옴

🟩 Named Export / import

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

예제1 - Named Export, Named Import

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from './math.js';
console.log(add(5, 3)); // 출력: 8
console.log(subtract(10, 4)); // 출력: 6

🟩 Default Export / import

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

예제1 - Default Export, Default Import

// math.js
const add = (a, b) => a + b;
export default add;

// math.js
const add = (a, b) => a + b;
export default add;

Named Export/import와 Default Export/import 차이점

Named Export/import	Default Export/import
여러 개의 항목	하나의 항목
가져올 항목의 이름이 명확하게 지정	가져올 항목의 이름을 임의로 지정
중괄호 없이 바로 가져올 수 있음	중괄호 안에 가져올 항목의 이름을 명시해야 함

---

🌼 Tree-shaking

• 사용 되지 않는 코드를 제거하는 행위
• ESM 을 사용할 경우 효과적으로 작동
• 브라우저 성능에 매우 중요한 단계

---

모듈 시스템은 어떤 것을 사용해야 할까?

프로젝트 요구 사항, 개발 환경을 고려

🌱 CommonJS (CJS)

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

🌱 ES Module (ESM)

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

CJS와 ESM의 차이점

Named Export/import	Default Export/import
동기적으로 필요한 시점에 모듈이 한 번에 로드됨	비동기적으로 필요할 때마다 모듈이 로드됨
module.exports 및 require()를 사용	export 및 import 키워드를 사용
Node.js 환경에서 사용되며, 웹 브라우저에서는 지원되지 않는 경우가 많음	웹 브라우저 및 Node.js에서 모두 지원됨
주로 서버 측 프로그래밍에서 사용됨	프론트엔드 및 백엔드 모두에서 모듈화를 위해 널리 사용됨