[Javascript] New Javascript 10장 모듈 시스템

✅ 1. 자바스크립트 모듈 시스템

자바스크립트에서 모듈(module)은 코드의 재사용과 관리 편의성을 위해 나눠서 작성하는 파일입니다. 대표적으로 ESM(ES Module)과 CommonJS(CJS)가 있습니다. 대부분은 ESM 방식을 채택하고 있습니다. 먼저 기존 모듈을 불러오는 방식에 대해서 설명해보겠습니다.

// 상수 내보내기
export const PI = 3.14;

// 함수 내보내기
export function add(a, b) {
  return a + b;
}

• export -> 다른 파일에서 사용할 수 있도록 내보내는 키워드
• 모듈로 내보낸 값은 여러개 사용 가능
• 브라우저에서는 <script type="module"> 안에서 사용

---

✅ 2. 모듈 가져오기 (import)

import 문을 사용해 export한 값을 가져올 수 있습니다. 여러개의 값을 가져올 수 있으며, 이름을 바꿀 수 도 있습니다. 모듈을 가져오면 가져온 값은 읽기 전용입니다.

import { add, PI } from "./math.js";

console.log(add(3, 4)); // 7
console.log(PI); // 3.14

---

✅ 3. ESM 기본 (default) 내보내기 예제

• math.js

// 여러 값 내보내기
export const name = "Jake";
export function jump() {
  console.log("Jump!");
}

// 기본 (default) 내보내기
export default function multiply(a, b) {
  return a * b;
}

• app.js

// default는 중괄호 없이 가져옴
import multiply, { jump, name } from "./math.js";

console.log(name); // Jake
jump(); // Jump!
console.log(multiply(4, 5)); // 20

 

💡 설명

• export default -> 한 파일당 하나만 가능, import 시 이름 자유롭게 지정
• 중괄호 없이 가져오는 것이 export
• default와 일반 export를 같은 파일에서 동시에 사용 가능함

---

✅ 4. 요약

항목	설명
모듈 시스템	코드를 파일 단위로 나눠 재사용 가능
브라우저 지원	ESM만 지원 (import/export)
내보내기	export, export default
가져오기	import {  } from './해당 파일.js', import 변수명 from './파일.js'
장점	코드의 재사용성 증가, 이름 충돌 방지, 가독성 향상
주의점	<script type="module">이 필요, default는 파일당 하나만

---

 

GitHub - javascript-only/newJSRoom: https://thinky.tistory.com/category/Front-End/JavaScript