Electron 라이브러리를 만들면서

 이전 일렉트론에 대한 포스팅을 하면서 잘못 이해하고 있던 점을 몇 가지 깨달았다.

 일렉트론을 ESM 모듈 시스템, 그러니까 "type" : "module" 형태로 코드를 작성해야한다고 기재했었다.

 하지만 이는 필자가 잘못 알고 있었던 부분이다. 이러한 오개념을 바로 잡기 위해 이 포스팅을 작성한다.

commonJS 스타일

 일렉트론에서는 commonJS 모듈 시스템으로 코드를 작성해야한다. 일렉트론은 node.js의 기본 모듈 시스템인 commonJS 모듈을 따르기 때문이다.

 물론 ESM 모듈 타입으로 코딩하는 것이 불가능한건 아니다. 하지만 일렉트론에 대한 레퍼런스가 대부분 commonJS 타입으로 되어있기 때문에 생산성을 생각하면 commonJS 타입으로 코드를 작성하는 것을 권하고 싶다.

 다만 일렉트론을 웹 프론트엔드와 결합할 때는 일렉트론 진입점인 main.js 확장자 형태가 프론트엔드 프레임워크마다 다르다.

react

 본 포스팅에서는 react와 next.js에서의 차이점을 다루고자 한다.

 결합한 웹 프론트엔드가 react라면 package.json에 "type": "module"이 필수인 점을 간과하면 안된다. 그리고 그렇기 때문에 일렉트론을 commonJS 타입으로 코딩하기 위해서는 일렉트론 진입점을 main.cjs로 생성해야한다.

next.js

 반면 Next.js에서는 package.json에 "type": "module"을 오히려 추가하면 안된다. 비록 이는 Next.js가 기본적으로 ESModules(ESM)와 CommonJS(CJS) 모두를 지원하지만, 일렉트론이 CommonJS 모듈을 사용하기 때문에 혼용하면 문제가 발생할 수 있다.

 예를 들어, 프로젝트의 package.json 파일에 "type": "module"을 추가하면, 모든 파일이 ESModules로 해석되기 때문에 일렉트론의 CommonJS 모듈과 호환성 문제가 발생할 수 있다. 이러한 문제를 피하기 위해서 일렉트론과 결합한 Next.js 프로젝트에서는 package.json 파일에 "type": "module"을 추가하지 않는 것이 좋다.(아니, 하면 안된다.)

 그렇다보니 next.js에서는 진입점을 굳이 main.cjs로 생성할 필요가 없다. 그냥 main.js로 생성하면 된다.