※ 본 내용은 해당 교재를 참고하여 공부한 내용과 본인의 생각을 정리한 글입니다.
https://www.yes24.com/Product/Goods/105608999
바닐라 자바스크립트 - 예스24
실무 역량까지 한 번에 잡을 수 있는바닐라 자바스크립트 이론서자바스크립트는 이제 브라우저를 넘어 웹 애플리케이션뿐만 아니라 마이크로 컨트롤러까지 점점 사용하는 곳이 늘어나고 있다.
www.yes24.com
웹 애플리케이션의 크기가 커지면서 자바스크립트로 구현하는 함수를 기능별로 분리하고 필요한 곳에서 호출해서 사용할 수 있도록 물리적인 자바스크립트 파일을 분리해서 사용할 수 있는 방법이 요구되었다.
모듈은 export, import 지시자를 사용해서 다른 모듈에서 불러와 사용할 수 있도록 구성.
export : export 지시자를 변수나 함수 앞에 붙이면 다른 외부 모듈에서 해당 변수나 함수를 import 해서 사용할 수 있다.
Import : import 지시자를 사용해서 다른 외부 모듈을 가져와서 사용할 수 있다.
let a = 10;
let b = 100;
● 한 개일 경우
export default a;
import {작명} from './data.js';
● 여러 개일 경우
export {a, b};
import {a, b} from './data.js';
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script type="module">
import { log } from "./log.js"; //log.js 파일에서 export로 지정된 함수 중 log 함수만 import함.
log("log로 메시지 출력"); //log 함수 사용 가능
</script>
</body>
</html>
'02. JavaScript > 01. 기본개념, 문법 (ES6)' 카테고리의 다른 글
| JavaScript_02. 문법_16_Error (0) | 2023.11.27 |
|---|---|
| JavaScript_02. 문법_15_Class (0) | 2023.11.27 |
| JavaScript_02. 문법_13_02. Async/Await (0) | 2023.11.25 |
| JavaScript_02. 문법_13_01. Promise (0) | 2023.11.23 |
| JavaScript_02. 문법_12_Fetch API (0) | 2023.11.22 |
