4. Node 기능 살펴보기 (2) - 모듈 사용하기 : 다이나믹 임포트

 

 

 

 

다이나믹 임포트(dynamic import), 이것은 말 그대로 동적으로 import를 진행한다는 의미입니다. 간단하게 설명하면 조건문을 기반으로 import 하는 경우를 생각하시면 됩니다. 특히 CommonJS에서는 다이나믹 임포트를 지원하지만 ES 모듈에서는 지원하지 않습니다. (물론, 다른 방법을 사용합니다)

 

우선 앞선 예제에서 살펴보았던 var, func 파일(js와 mjs모두)이 있는 폴더에서 계속 예제 작성을 이어나가도록 하겠습니다. 일단 [dynamic.js]를 하나 만들어 보겠습니다.

 

 

// [dynamic.js]

const a = false;
if (a) {
    require('./func');
}

console.log('done');

/* 출력
done
*/

 

 

간단해 보이지만, 위 예제는 다이나믹 임포트의 예제입니다. 조건문을 사용해 require를 진행했기 때문이죠. 실제로 이 예제에서 require는 실행되지 않았습니다. a가 false였기 때문입니다. 

 

이번에는 ES 모듈에서도 동일한 방식의 조건이 수행되는지 확인해 보겠습니다. 

 

 

// [dynamic.mjs]

const a = false;
if (a) {
    import './func.mjs';
}
console.log('done');

 

 

위 예제는 오류가 발생합니다. ES 모듈은 if문 안에서 import를 수행하는 것이 불가능하다는 것을 확인할 수 있습니다. 그럼 ES 모듈에서는 다이나믹 임포트를 어떻게 실행할 수 있을까요? 결론만 이야기하면 async await를 사용하는 것입니다. 

 

아래와 같이 [dynamic.mjs]를 수정해 보도록 하겠습니다. 

 

// [dymnamic.mjs]

const a = true;
if (a) {
    const m1 = await import('./func.mjs');
    console.log(m1);

    const m2 = await import('./var.mjs');
    console.log(m2);
}
console.log('done');

/* 출력
Module {default: <accessor>, Symbol(Symbol.toStringTag): 'Module'}
Module {even: <accessor>, odd: <accessor>, Symbol(Symbol.toStringTag): 'Module'}
done
*/

 

 

기본적으로 함수 import는 Promise를 반환하는 함수입니다. 그래서 await 또는 then을 사용해야 하는데, ES모듈 최상위 스코프에서는 async 함수가 없어도 await를 할 수 있습니다. 이는 CommonJS에서는 불가능한 방식입니다. 

 

참고로 [func.mjs]에서는 export default checkOddOrEven; 를 사용했습니다. 이 경우 default라는 이름의 속성으로 import가 되었습니다. 참고로 CommonJS에서 module.exports 한 것도 default라는 이름으로 import됩니다.