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

작성한 질문수

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

4.2) 첫 React App 생성하기

모듈 시스템 질문

작성

·

21

0

4.2) 첫 React App 생성하기 강의 질문 입니다.

10:15에서 module.exports = { … } 로 시작하는데 이건 cjs 시스템 문법으로 알고 있는데, 5:14에서 나오는 package.json의 type은 module로 되어있는데 두개의 시스템을 동시에 사용하는게 가능한건가요?

javascript react node.js 카카오공채-개발

답변 2

0

이정환 Winterlood

지식공유자

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

말씀하신 10분 15초 경의 파일은 .eslintrc.cjs 파일입니다. 이처럼 cjs 확장자를 명시적으로 설정해 둔 경우에는 강제로 Common JS로 해석되어 혼용이 가능합니다.

참고로 이 파일에만 특별히 cjs 확장자가 설정된 이유는 ESLint 도구의 설정 자체가 기본적으로 CommonJS로 동작하기 때문입니다.

PS. ESModule 시스템으로 코드를 바꿔서 작성하셔도 괜찮지만 의도하지 않은 설정 오류가 발생하게 될 수 있습니다!

0

인프런 AI 인턴

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

Node.js 환경에서 ESM(ECMAScript Module)과 CJS(CommonJS) 모듈 시스템을 함께 사용할 수 있는지에 대한 질문이시군요. 기본적으로 Package.json의 “type”: “module” 설정은 JavaScript 파일들을 ESM 방식으로 취급하게 만듭니다. 하지만 프로젝트 내의 일부 파일에서는 명시적으로 CJS를 사용할 수도 있습니다.

ESM과 CJS 혼용 사용 가능성

파일 확장자 별 구분:
- .mjs 확장자로 파일을 저장하면 ESM 모듈로 간주합니다.
- .cjs 확장자로 저장하면 CJS 모듈로 간주합니다.
- 이러한 방식을 통해 특정 파일별로 모듈 시스템을 달리 설정할 수 있습니다.
Node.js 버전에 따른 차이:
- 최신 Node.js 버전에서는 ESM과 CJS 간의 통합이 개선된 부분이 있어 혼용 사용이 가능합니다. 예를 들어, CJS에서 ESM 모듈을 불러올 때 동적 import(import())를 사용하는 등의 실험적 기능이 존재합니다.

관련 질문 및 해결방안

아래 링크에서는 npm run start에서 발생할 수 있는 다양한 문제와 혼용 사용 예제에 대해 다루고 있습니다. 추가적인 이해에 도움이 될 것입니다.
- 3.3)Node.js 사용하기 강의 중 npm run start 시 오류 발생

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

작성한 질문수