티스토리 뷰
728x90
반응형
- 모듈이란? 파일을 분리해서 연관된 코드들을 묶어두는 것 | 한 파일에서 구현하고자 하는 게 더 명확해짐 | 코드 재사용 가능
- 모듈파일의 조건
- 모듈 스코프 : 모듈 파일들이 가지는 독립적인 스코프 | 모듈 내에서 선언한 변수, 함수는 그 모듈 안에서만 사용되어야 함
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
// html에서 모듈 선언: type="module" 지정
<script type="module" src="./test.js"></script>
</body>
</html>- 모듈 문법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<!-- main에서 불러오기 때문에 sub.js는 부를 필요 X -->
<script type="module" src="./main.js"></script>
</body>
</html>// sub.js
export const title = 'hello!';
export function print(value){
console.log(value);
}
// main.js - 모듈 문법
import {title, print} from './sub.js'
print(title);
- 이름 바꾸기
// import {변수이름 as 바꿀변수이름} from 파일명
import {title as printTitle, print} from './sub.js'
const title = 'memo';
print(title); // memo- 한꺼번에 다루기 - 모듈 파일에서 내보내는 모든 대상을 한꺼번에 import 하기 : *(와일드카드문자)사용
- 단, 필요 없는 것까지 모두 불러오기 때문에 상황에 따라 적절히 사용해야 함
// printer.js에서 내보내는 모든 대상이 printJS에 전달
import * as printerJS from './printer.js';
// 객체형식으로 사용 가능
console.log(printerJS.title);
printerJS.print(membersTitle);// export 한꺼번에 다루기
// export 다음에 내보낼 대상을 { }로 묶어주기
// 선언문마다 항상 export 키워드를 붙일 필요 X
const title = 'hello!';
function print(value){
console.log(value);
}
// export에서 미리 as 키워드 사용 가능
export {title as printTitle, print};- default export : 한 파일에 하나의 대상만 내보낼 수 있음
export default title;
export default 'hello'; // 문자열도 내보내기 가능// import에서 선언시 as로 이름을 붙여줘야 함
default as title,
// 밖에 있는 것이 default로 named export와 구분 가능
import title, {
name as membersName,
data as membersData
} from './sub.js';
// 와일드카드문자 사용시
import * as membersJS from './members.js';
console.log(membersJS.default); // 이렇게 접근 가능
728x90
반응형
'JavaScript' 카테고리의 다른 글
| [JS중급] Web API 배우기 (0) | 2024.11.21 |
|---|---|
| [JS중급] 웹 기초 다지기 (1) | 2024.11.21 |
| [JS중급] JS배열 메서드(forEach, map, filter, find, some, every, reduce, sort, reverse, set) (0) | 2024.11.19 |
| [JS중급] 문법과 표현 (0) | 2024.11.14 |
| [JS] 간단한 문제 풀이(팩토리얼, 거스름돈 구하기, 팰린드롬) (0) | 2024.11.13 |