🧩 자바스크립트 모듈 시스템 정리

📌 모듈이란?

모듈(Module)은 하나의 큰 프로그램을 구성하는 독립된 파일 단위입니다.
여러 파일로 어플리케이션을 분리하고, 각각의 파일을 모듈이라 부릅니다.

• 코드 재사용을 높이고
• 유지보수를 쉽게 하며
• 전역 스코프 오염을 방지합니다.

---

✅ 모듈 사용하는 방법

배열에 다양한 동물 이름을 담고, 각 동물에 맞는 울음소리를 출력하는 예제를 통해 알아볼게요.

---

1. 📤 모듈 내보내기 (export)

example1.mjs

// 강아지 울음소리
export const dog = () => {
  return "bow-wow";
};

example2.mjs

// 고양이 울음소리
export const cat = () => {
  return "meow";
};

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

import { dog } from "./example1.mjs";
import { cat } from "./example2.mjs";

3. 🛡️ 모듈 시스템의 장점

• 내보내지 않은 변수/함수는 외부에서 접근 불가
• 캡슐화를 통해 외부로부터 자원 보호
• 코드 충돌 방지

4. 💻 전체 예제 코드

import { dog } from "./example1.mjs";
import { cat } from "./example2.mjs";

const animals = ["dog", "cat", "rabbit", "cow", "bird"];

animals.forEach((animal) => {
  if (animal === "dog") {
    console.log(`${animal} is `, dog());
  } else if (animal === "cat") {
    console.log(`${animal} is `, cat());
  } else {
    console.log(`${animal} is search plz`);
  }
});

---

🖨️ 출력 결과

---

✚ 추가 내용

📄 .mjs 확장자란?

.mjs는 "module JavaScript"의 줄임말로,
ES6 모듈을 사용하고 있다는 것을 명시하는 파일 확장자입니다.

✅ 사용 이유

• 브라우저 또는 Node.js에서 해당 파일이 모듈 형식이라는 걸 명확히 하기 위해 사용합니다.
• 특히 Node.js에서는 .js 확장자만으로는 모듈인지 스크립트인지 구분이 어려워 .mjs를 사용합니다.

✅ 예시

node example.mjs

.html 없이도 터미널에서 직접 실행이 가능하며 모듈을 사용할 수 있습니다.