[javascript] 조건에 따라서 동적으로 module을 import하기

ECMAScript 6 (ES6)는 정적 모듈 구조를 사용합니다. 즉, import와 export 문은 파일의 최상단에 위치해야 하며 조건문 내에서 사용할 수 없습니다. 하지만, 동적으로 모듈을 로드할 수 있는 방법이 있습니다: import() 함수를 사용하는 것입니다.

import() 함수는 프로미스를 반환하며, 모듈이 필요할 때 동적으로 로드할 수 있도록 해줍니다. 이는 코드 분할이나 조건부 모듈 로딩에 유용하게 사용될 수 있습니다.

예를 들어, 선택자에 따라 모듈을 동적으로 로드하려면 다음과 같은 방식으로 구현할 수 있습니다:

if (document.querySelector(selector)) {
  import('/path/to/module.js')
    .then((Module) => {
      // 모듈 사용
      const myModule = new Module();
    })
    .catch((error) => {
      // 로드 실패 처리
      console.error('Module loading failed:', error);
    });
}

이 코드는 document.querySelector(selector)를 사용하여 주어진 선택자와 일치하는 첫 번째 요소를 찾습니다. 요소가 존재하면 (즉, null이 아니면), import() 함수를 호출하여 모듈을 동적으로 로드합니다. 모듈이 성공적으로 로드되면 then() 블록 내의 코드가 실행되고, 오류가 발생하면 catch() 블록으로 오류를 처리합니다.

또한, ECMAScript 모듈은 브라우저와 최신 Node.js 환경에서 지원되지만, 이전 버전의 Node.js 또는 다른 환경에서는 트랜스파일링이나 폴리필이 필요할 수 있습니다.