23/11/21 TIL __ ESM과 CommonJs 차이 및 ESM방식으로 변경 실패.

 

 

🐣상황

 

오늘부터 뉴스피드 프로젝트가 시작되었다.

첫날이라 초기 셋팅과 방향에 대한 회의를 오래 진행했는데,

지난번 과제들에서 require를 이용해 express와 sequelize 를 사용했기 때문에,

이번 과제에서는 모듈을 사용해 보고 싶었다.

 

 

 

 

🐣액션

 

모듈을 사용하기 위해 나는 아래와 같은 행동을 했다.

1. package.json 파일에 type:module 을 설정했다.
2. index.json 파일에 있는 require 로 사용한 애들을 모두  export로 바꿨다. 
3. config.json 파일에서 dotenv를 가져올때 export로 가져와 환경변수로 사용했다.
4. config.js 파일로 파일 형식을 바꾼 뒤에, 안에 내용물을 js 타입으로 변경했다.

 

그러나 예상과 달리 DB를 생성하는 아래의 명령어는 작동하지 않았다. 

npx sequelize db:create

 

 

 

구글 검색을 통해 다른 코드로 테스트를 해봤지만, 여전히 작동하지 않았다. 

시퀄라이즈에서는 module을 지원하지 않는걸까? 

아래의 에러메세지만 내뿜고 있었다.

 

 

ERROR: Error reading "config/config.cjs". Error: Error [ERR_MODULE_NOT_FOUND]: Cannot find module

 

 

공식문서에서는 내가 사용하는 버전에 해당하는 6 버전에 대한 예제를 require를 통해 보여주고 있었다.

그렇지만 다른 동기분들중  module로 바꾸신 분이 계시다는걸 알고 있었기에 분명 방법이 있을 것 같았다.

 

해당 에러를 해결하기 위해 검색하던 중, ESM 방식과 CJS 방식에 대한 차이를 제대로 모르고 있다는 생각이 들었다. 

그러다 좋은 블로그를 봐서 좀더 정리가 되었는데, (해결은 못했지만 공부는 되었다.)

 

🚍  ESM 방식, CJS 방식

• CJS 방식에서 require()은 동기적 처리를 한다. 
• ESM 방식에서는 비동기 환경에서 실행한다.
• (파일을 비동기로 다운 및 파싱 후, import된 스크립트 가져온 후_병렬다운로드, 준비 완료되면 실행한다._순차적 실행 )
• CJS는 여전히 기본값이다.
• ESM 모드를 사용하려면, .mjs로 바꾸거나, 'type: module'을 설정해 주면 된다.

 

 

참고한 사이트 

https://yceffort.kr/2020/08/commonjs-esmodules

CommonJS와 ES Modules은 왜 함께 할 수 없는가?

 

그러다 드디어 작동했는데,,,,

사실 해결을 한게 아니였다.  

 

 

🚍   babel-register

babel-register

 

이 라이브러리를 설치했다.

.js 파일이 아니라 .cjs 파일로 변경했다.

import로 한 파일들을 모두 require로 변경했다.

 

그러자... 작동이 시작했다..

그치만 이유를 알 수 없었다.

저 라이브러리를 설치하면 해결된다는 동기의 조언으로 일단 시도해본 방법이였기 때문이다.

 

 

나는 이것에 대한 이유가 알고싶어, 다시 검색을 시작했다.

도대체 저 라이브러리는 어떤 역할을 하는 애일까?

 

 

개념을 잘 설명해주는 착한 GPT에게 물어봤더니 답변은 이랬다.

 

• Babel을 사용해 ES6 코드로 변환하는데 도움을 주는 도구 중 하나이다.
• node 에서 ES6 모듈을 지원하지 않는 상황에서도 해당 도구를 사용하면 잘 사용할 수 있게 된다.

 

즉.. 

module 로 작성했지만 저 babel-register 라는 애가 다시 CJS 로 변경을 해준다는 말이다..

그런데 이렇게 쓸거면 의미가 없는듯 느껴졌다..

왜냐면 module 을 사용하고자 했지만 실제로는 사용하지 않는것과 동일하다고 생각했기 때문이다. 

 

 

그런데, 다른 동기분에게 이 상황을 말씀드리니, babel-register 를 사용하지 않고도 module로 사용하셨길래

다시 궁금증이 시작되었다.

뭐가 다른걸까 싶어서, 코드를 보여주실 수 있냐고 여쭤봤고, 흔쾌히 보여주셧다.

시퀄라이즈 버전도 동일했고, 정말  babel-register 를 사용하지 않았는데도 작동했다.

 

이유가 궁금해서 코드를 복사해서 내 vsCode 환경에서 테스트 해봤다. 

그런데...?! 작동하지 않았다.

의심가는 부분이 생겼다. 버전차이 

 

작동한 코드와 동일하고, 셋팅도 동일한데, 작동하지 않는다는건

버전 차이일 확률이 커보였다.

그래서 node 환경을 여쭤보니 16버전을 이용하고 있었다.

나의 node 환경은 20버전이였다.

그러나 검증을 위해서는 버전을 낮춰서 테스트를 해봐야 했지만, 

팀프로젝트 진행을 위해 더 시간을 사용할 수 없어 검증하지 못했다.

 

내일 module을 사용하신 다른 분에게 사용한 node의 버전 및 코드를 비교해 봐야겠다.