| sitelink1 | |
|---|---|
| sitelink2 | |
| sitelink3 | |
| sitelink4 | |
| extra_vars4 | |
| extra_vars5 | |
| extra_vars6 |
Vanilla JavaScript에서 외부 JS 파일에 클래스를 선언하고
이를 모듈로 로드하여 사용하는 방법은 ES6 모듈 문법을 사용하는 것입니다.
다음은 간단한 예제입니다:
1. 외부 JavaScript 파일(myModule.js)에 클래스를 선언합니다:
// myModule.js 파일
export class MyModule {
constructor() {
console.log('MyModule 클래스가 생성되었습니다!');
}
greet() {
console.log('안녕하세요!');
}
}
2. HTML 문서에서 <script> 태그의 type 속성을 "module"로 설정하여 외부 JavaScript 파일을 로드하고 클래스를 사용합니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Module Example</title>
</head>
<body>
<!-- 모듈 스크립트 로드 -->
<script type="module">
import { MyModule } from './myModule.js';
// 클래스 인스턴스 생성 및 메서드 호출
const myModuleInstance = new MyModule();
myModuleInstance.greet();
</script>
</body>
</html>
이 예제에서는 import 문을 사용하여 myModule.js 파일에서 MyModule 클래스를 가져옵니다.
그런 다음 클래스의 인스턴스를 생성하고 greet 메서드를 호출합니다.
type="module" 속성은 브라우저에게 해당 스크립트가 모듈임을 알려줍니다.
모듈 스크립트는 기본적으로 엄격 모드(strict mode)에서 실행되며, 모듈 파일은 CORS 정책을 따르기 때문에 동일 출처 정책을 준수해야 합니다.
또한, 모듈 스크립트는 비동기적으로 로드되므로, 페이지의 로드 시간에 영향을 주지 않습니다.
