반응형
1. 모듈(Module)이란?
모듈은 자바스크립트에서 코드의 재사용성과 캡슐화를 위한 구조화된 방법입니다. 코드를 독립적인 단위로 나누어 필요한 부분만 가져올 수 있어 대규모 프로젝트에서도 효율적인 코드 관리를 가능하게 합니다.
모듈의 주요 이점:
- 코드 가독성: 코드를 작은 단위로 나누어 읽기 쉽고 관리가 편리합니다.
- 네임스페이스 충돌 방지: 각 모듈은 독립적인 스코프를 가지므로, 변수나 함수 이름이 겹치는 문제가 발생하지 않습니다.
- 의존성 관리: 필요한 모듈만 가져와 사용할 수 있어 효율적입니다.
- 재사용 가능성: 공통 기능을 모듈화하여 다양한 프로젝트에서 재활용할 수 있습니다.
2. type="module"의 역할
HTML의 <script> 태그에 type="module" 속성을 추가하면 브라우저는 해당 스크립트를 모듈로 처리합니다. 이를 통해 import와 export 문법을 사용할 수 있습니다.
예제:
<script type="module">
import { myFunction } from './module.js';
myFunction();
</script>위 코드에서 import 문을 사용해 module.js 파일의 myFunction을 가져옵니다. type="module" 속성이 없으면 import 문이 동작하지 않습니다.
3. 모듈의 주요 특징
- 지연 실행: 모듈 스크립트는 기본적으로
defer속성이 적용되며, HTML 파싱이 완료된 후 실행됩니다. - 스코프 분리: 모듈 내 변수와 함수는 해당 모듈 내부에서만 유효하며, 전역 네임스페이스를 오염시키지 않습니다.
- ES6+ 지원: 최신 자바스크립트 표준(ES6 이상)을 사용하며, 고급 기능을 활용할 수 있습니다.
- 엄격 모드: 모듈은 기본적으로
use strict가 적용되어, 암시적 전역 변수 선언과 같은 비효율적 코드 작성을 방지합니다. - 중복 로드 방지: 동일한 모듈은 브라우저에서 한 번만 로드됩니다.
4. 모듈 사용 예제
1) 모듈 파일 작성
module.js라는 파일을 생성하고 다음과 같이 작성합니다:
// module.js
export function greet(name) {
return Hello, ${name}!;
}
export const version = '1.0.0';
export default function sayGoodbye(name) {
return Goodbye, ${name}!;
}2) 모듈 가져오기
HTML 문서에서 모듈을 가져와 사용합니다:
<!DOCTYPE html>
<html>
<body>
<script type="module">
import { greet, version } from './module.js';
import sayGoodbye from './module.js';
console.log(greet('Alice')); // Hello, Alice!
console.log(Version: ${version}); // Version: 1.0.0
console.log(sayGoodbye('Alice')); // Goodbye, Alice!
</script>
</body>
</html>결과: 브라우저 콘솔에 다음과 같은 결과가 출력됩니다:
Hello, Alice!Version: 1.0.0Goodbye, Alice!
3) 동적 모듈 로딩
필요할 때만 모듈을 로드하는 방식입니다:
async function loadModule() {
try {
const { greet } = await import('./module.js');
console.log(greet('Dynamic Load')); // Hello, Dynamic Load!
} catch (error) {
console.error('Error loading module:', error);
}
}
loadModule();5. 주의사항
- CORS 정책: 모듈은 보안상의 이유로 로컬 파일 시스템(
file://)에서 실행되지 않습니다. 로컬에서 테스트하려면http-server나live-server와 같은 서버 도구를 사용해야 합니다. - 브라우저 호환성: 최신 브라우저는
type="module"을 지원하지만, 구형 브라우저는 폴백이 필요할 수 있습니다.
폴백 예제:
<script type="module" src="modern.js"></script>
<script nomodule src="legacy.js"></script>위 코드에서 modern.js는 모듈을 지원하는 브라우저에서만 로드되며, legacy.js는 구형 브라우저에서 로드됩니다.
6. 모듈 사용의 실제 이점
- 대규모 프로젝트 관리: 코드 구조화와 유지보수를 더 쉽게 할 수 있습니다.
- 재사용 가능성: 공통 기능을 모듈로 만들어 여러 프로젝트에서 사용할 수 있습니다.
- 성능 최적화: 브라우저 캐시를 활용해 네트워크 부하를 줄일 수 있습니다.
- 의존성 명확화: 모듈 시스템을 통해 코드 간 의존성을 시각적으로 명확히 할 수 있습니다.
요약
type="module" 속성은 자바스크립트의 모듈 시스템을 사용하기 위한 핵심 도구로, 코드를 재사용 가능하고 효율적으로 유지관리할 수 있게 합니다. 브라우저 호환성과 보안 정책(CORS)을 고려하며 모듈 시스템을 활용해 효율적인 개발 환경을 만들어 보세요.
반응형
'개발' 카테고리의 다른 글
| 가상 메모리란? (0) | 2025.01.22 |
|---|---|
| 스프링 프레임워크의 특징: 개발자가 알아야 할 핵심 포인트 (0) | 2025.01.21 |
| <script> 태그 사용법과 팁 (0) | 2025.01.21 |
| 디바운싱(Debouncing)과 쓰로틀링(Throttling): 개념과 활용 방법 (0) | 2025.01.21 |
| 코테 연습 (0) | 2021.11.09 |