CJS & ESM 모듈 관련
제가 front를 잘 몰라서 질문을 드립니다.
외부모듈에 사용방식이 CJS, ESM 2가지 말씀하셨는데
궁금한 내용은
CJS(Common Js) 방식은 현재 javascript 기반에서도
node.js기반하고 상관없이 사용이 가능한가요?
ESM ( ES 모듈 시스템) - node.js 기반하에서 동작되는
외부모듈 사용방식으로 이해해도 되는지 문의드립니다.
답변 2
0
안녕하세요 wonyongick님 이정환입니다.
AI 인턴의 답변대로 현재 두 모듈 시스템 모두 브라우저와 Node.js 환경에서 사용 가능합니다.
두 모듈의 차이점은 강의에서 안내드린 것 처럼, 모듈로 부터 값을 내보내고 불러오는 방법에 있습니다. 또 추가로 ESM은 CJS에 비해 기본값으로 내보내기(export default), 전부 불러오기 import * ... 등의 더 세밀한 기능들을 제공합니다!
0
안녕하세요, 인프런 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모듈로만 작성해야되나요?
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
useEffect와 lifecycle문의
0
32
2
프론트엔드 학습 수준 문의
0
44
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
51
2
데이터 로딩중 화면만 계속 나와요!!
0
56
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
80
2
이후의 커리큘럼 문의
0
102
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
50
2
최적화 관련 질문있습니다 (useMemo 등)
0
85
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
82
3
Date 객체에 관련하여 질문드립니다.
0
85
2
리액트 개정판 교재 질문
0
60
2
예제코드가 안나와요!
0
78
2
select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com
0
109
2
onMouseEnter 관련 문의 드립니다
0
93
3
배열의 렌더링 관련 질문 드립니다.
0
73
2
2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.
0
113
2
TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?
0
137
2
useCallback 적용한 onCreate, onUpdate, onDelete 함수..
0
71
1
vs code 자동완성관련 문의
0
113
2
91강 useEffect내에서 상태변화함수 호출시 발생하는 에러
1
181
2
87강 필터 함수 질문
0
69
2
useRef, useState count 비교
0
67
2
안된다고했던 이유가 무엇이었는지 모르겠습니다
0
91
2
85강에서 객체를 왜 클래스로 만들어서 new 하지 않는건지 궁금합니다.
0
76
2