📓 JS 모듈
애플리케이션의 크기가 커질 때 파일을 여러 개로 분리하여 이 분리한 파일들 각각을 모듈이라고 한다.
지시자 export와 import 를 사용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것처럼 공유할 수 있다.
🏷️ export
// 변수, 함수 선언식을 하나씩 export
export let name1, name2, …, nameN; // var, const도 동일
export function functionName(){...} // 클래스도 가능
export { name1, name2, ..., nameN };
export const { name1, name2: bar } = o; // 비구조화로 export- Named exports
여러값을 export 하는에 사용.
export된 이름을 사용하여 import해서 사용할 수 있다.
export const arrs = [10, 20, 30, 40]; // 개별로 선언해서 export
export { arrs2, getName }; // 묶어서 export
const arrs2 = [100, 200, 300, 400];
function getName() {
return "aaaaaaaaa";
}- Default exports
모듈(파일) 당 딱 한 개의 default export만 있어야 한다.
let cube = function cube(x) {
return x * x * x;
}
export default cube;🏷️ import
// named
import * as name from 'module-name';
import name from 'module-name';
import { member } from 'module-name';
import { member as alias } from 'module-name'; // member이름이 길 경우 as 별명 가능
import { member1, member2 } from 'module-name';
import { member1, member2 as alias2, [...] } from 'module-name';
// default
import defaultMember, { member [, [...]] } from 'module-name';
import defaultMember, * as alias from 'module-name';
import defaultMember from 'module-name';
import 'module-name';name : 가져온 값을 받을 객체 이름.
member, memberN : export된 모듈에서 멤버의 이름
defaultMember : export된 모듈의 default 이름
alias, aliasN : export된 멤버의 이름을 지정한 이름
module-name : 가져올 모듈 이름 (파일명)
* 를 통해서 모듈 전체를 가져오거나 {member} 하나의 멤버 가져오거나 여러 멤버를 가져올 수 있다.
다른 이름으로 멤버를 가져오고 싶으면 as 사용.
📓 동적으로 import
export, import로 정적인 방식을 봤다.
import 문에 동적 매개변수를 사용할 수 없고 원시 문자열만 들어갈 수 있기 때문에 함수 호출 결과값을 경로로 사용은 에러가 발생한다.
import는 모듈을 읽고 이 모듈이 내보내는 것들을 모두 포함하는 객체를 담은 이행된 프로미스를 반환한다.
// 📁 say.js
export function hi() {
alert(`안녕하세요.`);
}
export function bye() {
alert(`안녕히 가세요.`);
}let say = await import('./say.js');
say.hi();
say.bye();
let {hi, bye} = await import('./say.js');
hi();
bye();모듈을 동적으로 불러옴.
// 📁 say.js
export default function() {
alert("export default한 모듈을 불러왔습니다!");
}let obj = await import('./say.js');
let say = obj.default;
// 위 두 줄을 let {default: say} = await import('./say.js'); 같이 한 줄로 줄일 수 있습니다.
say();default export한 모듈을 사용하려면 모듈 객체의 default 프로퍼티를 사용.
브라우저(HTML) 에서 모듈을 사용할 수 있다.
<!DOCTYPE html>
<script type="module">
import {sayHi} from './say.js';
document.body.innerHTML = sayHi('John');
</script>
<html>Reference
🔗 모듈 사용하기
일상의 인연에 감사하라. 기적은 의외로 가까운 곳에 있을지도 모른다.