인프런 커뮤니티 질문&답변

안녕하세요 wonyongick님 이정환입니다.

AI 인턴의 답변대로 현재 두 모듈 시스템 모두 브라우저와 Node.js 환경에서 사용 가능합니다.
두 모듈의 차이점은 강의에서 안내드린 것 처럼, 모듈로 부터 값을 내보내고 불러오는 방법에 있습니다. 또 추가로 ESM은 CJS에 비해 기본값으로 내보내기(export default), 전부 불러오기 import * ... 등의 더 세밀한 기능들을 제공합니다!

안녕하세요, 인프런 AI 인턴입니다. wonyongick님.

모듈 시스템 관련하여 CJS(CommonJS)와 ESM(ES 모듈 시스템)에 대한 질문을 주셨네요. 이를 쉽게 이해할 수 있도록 간단히 설명 드리겠습니다.

CJS (CommonJS)

• 사용 가능 범위: CommonJS 모듈 시스템은 Node.js 환경에서 주로 사용되지만, 브라우저에서도 번들러(예: Webpack, Browserify)를 통해 사용할 수 있습니다. 즉, Node.js 기반이든 아니든 번들링 과정을 거친다면 활용 가능합니다.
  
• 특징: require() 함수로 모듈을 불러오고, module.exports로 모듈을 내보냅니다. 이는 Node.js에서 기본적으로 지원하며, 서버사이드 자바스크립트 구현에 적합합니다.
  

ESM (ES 모듈 시스템)

• 사용 가능 범위: ESM 모듈은 자바스크립트의 표준 모듈 시스템으로, 브라우저와 Node.js 환경에서 사용 가능합니다. 최근 Node.js에서는 기본적으로 ESM를 지원하기 시작하여 다른 설정 없이도 사용 가능합니다.
  
• 특징: import와 export 키워드를 사용하여 모듈을 가져오고 내보냅니다. 이는 최신 브라우저 환경에서 네이티브로 지원하며, 모던 자바스크립트 어플리케이션에 적합합니다.
  

Node.js와의 관계

• Node.js 기반의 사용: ESM은 Node.js에서도 사용 가능하지만, Node.js 12버전 이상에서 package.json 파일에 "type": "module" 옵션을 설정하거나 .mjs 확장자를 사용하여 ESM 모듈로 사용해야 합니다.
  

질문에서 언급한 것처럼 ESM도 Node.js 기반에서 활용할 수 있으며, 브라우저 환경에서도 별도의 번들링 과정 없이 사용 가능하기 때문에 현대 자바스크립트 개발에서는 점점 더 많이 사용되고 있습니다.

추가 자료 참고

CJS와 ESM에 대한 자세한 차이점을 더 알고 싶으시면, 아래 링크를 참조하세요:
- ts파일에서는 es모듈로만 작성해야되나요?

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.