Electron 라이브러리를 만들면서

착오

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

CommonJS 스타일

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

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

 그리고 일렉트론을 웹 프론트엔드와 결합할 때 사용하는 임포트 방식마다 일렉트론 진입점의 확장자 형태도 맞춰주어야 함을 인지해야 한다.

react vs next.js with electron

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로 생성하면 된다. (물론 CommonJS 타입으로 코딩해야 한다는 전제하에)