Module
- 모듈은 JS개발자라면 반드시 알아야 할 기본 컨셉.
- 모듈 덕분에 코드들이 작은 파일로 나뉘어질 수 있다.
- 동적 모듈(Dynamic Module):
- export/import문은 정적인 방식이라 문법이 단순하고 제약사항이 있음.
- 첫번째 제약은 import문에 동적 매개변수를 사용할수 없다는것. 모듈 경로엔 원시 문자열만 들어갈 수 있기 때문에 호출 결과값을 경로로 쓰는 것이 불가능
// 모듈 경로는 문자열만 허용되기 때문에 에러가 발생 import ... from getModuleName(); // 이래야 정상적으로 작동 import ... from getModuleName; - 두번째 제약은 런타임이나 조건부로 모듈을 불러올 수 없다는 점
if(...) { import ...; // 모듈은 조건부로 불러올 수 없으므로 에러 발생 } { import ...; // 블록 안에 올 수 없으므로 에러 발생 }
Import & Export
import {Module} from "./module";
import Module from "./mudule";
import * as Module from "./module";
const Module = await import("./module");- 이런 제약사항이 만들어진 이유는 import/export는 코드 구조의 중심을 잡아주는 역할을 하기 때문
- 코드 구조를 분석해 모듈을 한데 모아 번들링하고, 사용하지 않는 모듈은 제거해야 하는데, 코드 구조가 간단하고 고정되어 있을 때만 이런 작업이 가능.
import() 표현식
- import(module)표현식은 모듈을 읽고 이 모듈이 내보내는 것들을 모두 포함하는 객체를 담은 이행된 프라미스를 반환하고 호출은 어디서나 가능. 코드 내 어디에서 동적으로 사용할 수 있음.
let modulePath = prompt("어떤 모듈을 불러오고 싶으세요?");
import(modulePath)
.then(obj => <모듈객체>)
.catch(err => <로딩에러, 해당하는 모듈이 없는 경우>) - async 함수 안에서 let module = await import(modulePath)와 같이 사용하는 것도 가능함.
export function hi() {
alert('hi!');
}
export function bye() {
alert('bye!');
}
export default fuction() {
alert('load export default module.');
}- 위의 모듈들을 사용할려면
<!doctype html>
<script>
async function load() {
let say = await import('./say.js');
say.hi(); // 안녕하세요.
say.bye(); // 안녕히 가세요.
say.default(); // export default한 모듈을 불러왔습니다!
}
</script>
<button onclick="load()">클릭해주세요,</button>참고
- 동적으로 모듈 가져오기(https://ko.javascript.info/modules-dynamic-imports)
- Expert Default(https://www.youtube.com/watch?v=WUirHxOBXL4)
'하루를 참고 인내하면 열흘을 벌 수 있고 사흘을 참고 견디면 30일을, 30일을 견디면 3년을 벌 수 있다.'