변수 인식 ES6 가져오기

ES6에서 import 문은 모듈을 코드로 가져오는 편리한 방법을 제공합니다. 그런데 런타임에 변수 이름을 기반으로 모듈을 가져와야 한다면 어떻게 될까요? 이는 구성 설정에 따라 모듈을 동적으로 로드하는 시나리오에서 발생할 수 있습니다.

정적 가져오기

안타깝게도 ES6의 import 문은 정적으로 분석됩니다. 이는 가져오는 모듈이 컴파일 타임에 알려져야 함을 의미합니다. 따라서 변수명을 사용하여 가져올 모듈을 지정할 수 없습니다.

로더 API

모듈을 동적으로 로드하려면 로더 API를 사용해야 합니다. 이 API는 로드할 모듈을 지정하는 문자열을 받아들이는 System.import()라는 함수를 제공합니다. 다음 예에서는 이를 사용하여 변수 이름을 기반으로 모듈을 로드하는 방법을 보여줍니다.

System.import('./utils/'   variableName).then(function(module) {
  console.log(module);
});

System.import() 함수는 로드된 모듈을 확인하는 프라미스를 반환합니다. 그런 다음 모듈 객체를 사용하여 모듈에서 내보낸 멤버에 액세스할 수 있습니다.

호환성 고려 사항

Loader API는 최신 브라우저와 Node.js에서 지원됩니다. 그러나 이전 브라우저와의 호환성을 얻으려면 폴리필을 사용해야 할 수도 있습니다.