모던 자바스크립트_Module Pattern(import,export)

 

모듈 패턴의 Primary goals

• ⭐ 캡슐화: 내부 변수와 함수는 외부에서 접근할 수 없고, 필요한 부분만 노출합니다.
• ⭐  전역 네임스페이스 오염 방지: 전역 변수의 남발을 줄입니다.
• ⭐  재사용성: 모듈화된 코드는 독립적으로 동작하며 재사용이 가능합니다. 또한 유지보수성과 가독성이 향상됩니다.

 

모듈 패턴의 단점

• ⭐  복잡한 의존성 관리를 위해 추가 도구 (Webpack, Rollup 등) 가 필요할 수 있습니다.

 

---

 

ES6 모듈 시스템_기본 예제

* 쇼핑몰에 옷을 등록 (옷장.js)

const 셔츠 = "셔츠";
const 바지 = "바지";
const 양말 = "양말";

// 양말만 외부에 공개
export const 공개된아이템 = 양말;

 

 

* 쇼핑몰에서 옷 가져오기 (메인.js)

import { 공개된아이템 } from "./옷장.js";

console.log(공개된아이템); // 출력: 양말

 

 

결과

* 쇼핑몰(모듈 파일)은 여러 종류의 옷 (셔츠, 바지, 양말)이 있지만, 외부에서는 "공개된 아이템"에만 접근 할 수 있다.

* 사용자는 쇼핑몰에서 양말만 가져올 수 있다.

 

---

ES6 모듈 시스템_심화 예제

//모듈 파일(mathModule.js)
// 비공개 변수와 함수 (파일 내부에서만 접근 가능) 
const PI = 3.14159; 
function privateSquare(x) {
return x * x; 
} 
// 공개 인터페이스 
export function calculateCircleArea(radius) { 
return PI * privateSquare(radius); 
}



// 모듈 사용(main.js)
import { calculateCircleArea } from "./mathModule.js"; 
console.log(calculateCircleArea(5)); // 출력: 78.53975

특징

• ES6+에서는 import와 export 키워드를 사용하여 모듈을 구현한다.
• 네이티브 모듈 시스템은 브라우저와 Node.js에서 지원된다.