초창기의 JavaScript의 경우 스크립트의 크기도 작고 기능도 단순했기 때문에 모듈이 필요 없었다. 이후 Node.js의 등장하면서 자바스크립트의 사용법이 확장되면서 코드가 전체적으로 비대해지면서 모듈의 필요성이 증가하게 된다. 이에 ECMAScript6에서 모듈 시스템을 표준화 하여 import와 export 문을 통해 모듈화된 코드를 지원하게 된다.
모듈(module)
모듈이란 기본적으로 JavaScript 코드를 담고 있는 파일을 의미한다. 이 파일은 관련된 함수, 객체, 클래스, 변수 등을 포함하고 있다. 모듈 시스템을 통해서 코드의 재사용성 및 유지보수를 용이하게 할 수 있다.
모듈은 모듈마다 자신의 스코프를 갖는다. 따라서 변수나 함수를 내보내거나(export) 가져오지(import)않는다면 해당 변수나 함수에 접근할 수 없다.
모듈 사용하기
모듈 작성하기 (module1.js) : export
// export를 하는 방법 (1) : 각각의 변수/함수 앞에 export를 작성
export const name = "코딩쥐";
export function callName(name){
console.log(`반갑습니다. ${name}님`);
}
// export를 하는 방법(2) : 각각의 변수/함수명을 모아서 export로 작성
const favoriteFood = "햄버거";
function orderFood(favoriteFood){
console.log(`주문하신 ${favoriteFood} 나왔습니다.`);
}
export {favoriteFood, orderFood}
// export를 하는 방법(3) : 이름을 변경하여 export하기
const hobby = "독서";
function tellHobby(hobby){
console.log(`저는 쉬는 날에 ${hobby}을/를 해요.`);
}
export {hobby as hb1, tellHobby as tellhb1}
모듈 가져오기 (exercise.html) : import
script를 가져올 때 type="module"로 작성하게 되면 HTML 문서의 파싱과는 독립적으로 로드되며(비동기적 로딩), HTML문서가 파싱(프로그램을 분석하고 런타임 환경이 실제로 실행할 수 있는 내부형식으로 변환)이 완료된 후에 실행된다. 즉, 문서의 구조가 완전히 준비된 상태에서 스크립트가 동작한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module">
// export 시에 작성한 변수명으로 불러오면 된다.
import { name, callName, favoriteFood, orderFood, hb1, tellhb1 } from "./module1.js"
callName(name);
orderFood(favoriteFood);
tellhb1(hb1);
</script>
</body>
</html>
만약 해당 모듈에서 export한 내용을 모두 가져와야할 때 import * as 설정이름 from "모듈위치"로 설정하여 설정이름.변수명으로 접근할 수 있다.
<script type="module">
// export 시에 작성한 변수명으로 불러오면 된다.
import * as module1 from "./module1.js"
module1.callName(module1.name);
module1.orderFood(module1.favoriteFood);
module1.tellhb1(module1.hb1);
</script>
default export
export를 할 때 해당 내용을 명명하지 않고 함수, 변수, 값, 클래스 등을 가져오고자 할 때 default로 선언하여 가져올 수 있다. default는 해당 모듈 파일 내에 단 한개만 존재할 수 있으며, import 시에 명시된 함수, 변수, 값 등이 없을 경우 default로 선언한 것을 가져오게 된다.
아래 예제의 경우 export default로 해당 내용을 명명하지 않고 함수를 내보냈다. 이후 import를 통해 logValue라는 이름으로 default로 선언된 함수를 가져와서 사용한 것을 볼 수 있다.
<module.js>
export default (value) => {
console.log(value);
}
export const name = "코딩쥐";
export const favoriteFood = "햄버거";
<exercise.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module">
import logValue, { name, favoriteFood } from './module1.js';
logValue(name);
logValue(favoriteFood);
</script>
</body>
</html>
'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript : 웹 스토리지 (2) - IndexedDB란? (0) | 2024.08.18 |
|---|---|
| JavaScript : 웹 스토리지 (1) - Cookie와 Web Storage (0) | 2024.08.17 |
| JavaScript: location 객체란? (0) | 2024.08.15 |
| JavaScript: Screen 객체 (0) | 2024.08.15 |
| JavaScript : 비동기 통신에 대해서 (Fetch & Axios) (0) | 2024.08.14 |
| JavaScript : 비동기를 처리하는 방법 (Async / Await) (0) | 2024.08.13 |
| JavaScript : DOM의 키보드 이벤트에 대해서 (0) | 2024.08.12 |
| JavaScript : 비동기를 처리하는 방법 (Promise) (0) | 2024.08.11 |