모듈 (module)
애플리케이션이나 웹 개발에 필요한 문서의 크기가 커지면 여러 개로 분리할 필요가 있는데
이 때 분리한 각 파일을 모듈이라고 함.
모듈 = 하나의 파일 = 하나의 스크립트 = ...
모듈은 항상 엄격 모드 (use strict)로 실행 됨.
외부 모듈(파일)을 불러오기
html파일에 외부 스크립트를 불러오기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>모듈 module</title>
<!-- import, export 사용시 type="module"값 필수 -->
<script defer src="./module1.js" type="module"></script>
</head>
<body></body>
</html><import>
외부 모듈의 기능을 불러오는 지시자
// 외부 js 문서 불러오기
// css : @import
// JavaScript : import
// ----------------module1.js-----------------
import { fn1, fn2 } from "./module2.js";
import basic1 from "./module2.js";
import basic2 from "./module3.js";
fn1();
fn2();
basic1(); // module2.js의 fn3 함수가 호출됨.
basic2();
<export>
외부 모듈로 내보내는 지시자
지시자를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있음.
// ------------ module2.js-------------
// 1. 직접 내보내기 : 앞에 export를 작성해 외부 문서로 전달
export function fn1() {
console.log("module2.js의 fn1함수");
}
// 2. export 키워드는 중괄호{}를 사용해 따로 작성 가능.
function fn2() {
console.log('module2.js의 fn2 함수')
}
export {fn2};
// 3. default
export default function fn3() {
console.log('module2.js의 fn3 함수')
}
// ------------ module3.js-------------
function fn4() {
console.log('module3.js의 fn4 함수')
};
export default fn4; // 작성된 함수명만 작성 가능.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 속성 property 접근_more (0) | 2022.12.08 |
|---|---|
| [JavaScript] DOM객체 노드 탐색 (0) | 2022.12.08 |
| [JavaScript] 클로저 (closure)_more (0) | 2022.12.07 |
| [JavaScript] 전개 구문 (spread syntax) _ more (0) | 2022.12.07 |
| [JavaScript] 배열의 메서드 종류_more (0) | 2022.12.07 |