면접-JavaScript #04 | 모듈

📚 개념 요약

모던 JS Deep dive #48 | 모듈

💡 질문

❓ JS의 모듈

(미괄식)

먼저 모듈은 재사용 가능한 코드 조각을 말합니다. 이 모듈이 성립하려면 모듈은 자신만의 파일 스코프를 가질 수 있어야 합니다.

이렇게 개별적 존재로서 분리시키돼, 공개가 필요한 자산에 한정하여 선택적 공개가 가능해야하고, 모듈 사용자는 모듈이 공개한 자산 중 일부를 자신의 스코프로 불러들여 재사용할 수 있어야 합니다. 이를 export와 import라 합니다.

개별적 존재로 분리되어야하고, import, export 기능을 가진 모듈 기능을 JS는 태생적으로 지원하지 않았습니다. script태그로 로드해도 JS파일들이 결국 하나의 파일에 있는 것처럼 동작했고, 이런 상황에서 Node js라는 런타임 환경에서는 모듈의 필요성을 느껴 CommonJS 방식을 통해 모듈기능을 지원했습니다.

추후에 ES6에서도 모듈 기능을 추가했고, 이 ESM은 기존 script태그에 type=“module”속성을 추가하면 모듈로서 사용할 수 있습니다.

❓ import/export & require/exports

import / export 는 ESM 방식이고 require/exports는 NodeJS에서 사용되는 CommonJS 키워드 입니다.

두개의 모듈 시스템은 공통적으로 exports객체라는 것을 통해 모듈로부터 내보내지는 데이터를 관리하기 때문에 방식은 비슷하지만 문법적인 차이가 있습니다.

추가적으로 NodeJS에서도 package.json에 type설정을 추가한다면 ESM처럼 import문법을 사용할 수 있습니다.