자바스크립트 모듈
모듈화
공통된 기능이나 특별한 목적에 따라 각각의 파일로 분리하는 과정
이때, 파일 하나 = 모듈
1. 코드를 효율적으로 관리 가능
2. 다른 프로그램에서 재사용 가능
모듈 스코프
모듈이 되는 파일은 파일만의 독립적 스코프를 가져야 함 = 모듈 파일 내부에서 선언한 변수나 함수는 이 안에서만 사용가능
자바스크립트 파일에 모듈 스코프 만드는 방법
<body>
<script type = "module" src="index.js"></script>
</body>
다른 파일에서도 사용가능하지만, 사용하고자 하는 파일에서 불러오는 과정 한번 더 거쳐야 함
export { export 대상들 } | import { import 대상들 } from '모듈 파일의 경로'
모듈화 된 파일들은 모듈 문법을 통해 서로 연결됨 → html 파일에서는 자바스크립트의 진입점 역할 하는 파일 하나만 불러옴
ex) index.js
파일 내에서 사용하는 이름 변경 = ' 원래 이름 as 새로운 이름 '
모듈 파일에서 export 하는 모든 대상을 한꺼번에 import
import * as 새로운 이름 : 객체 형식으로 사용 여기서 * : 와일드 카드 문자
default
하나의 대상 or 값 하나 export 할 때 사용 : ' export default '
모듈 파일 내에서 딱 한 번만 사용 가능
default로 붙여준 값은 as 생략 가능, 괄호 밖으로 빼서 사용 가능
export 방식
○ default export
default 키워드를 통해서 하나의 대상 만을 export 하는 방식
○ named export
변수나 함수의 이름으로 여러 대상을 export 하는 방식
export default { title, print }
// = {title: title, print: print}🔻하나의 객체 값을 export 한 것으로 간주