일렉트론 electron : 'require is not defined' error

10여 년 만에 JS 생태계로 돌아왔다.
재입문 2주일째. 많은 것들이 달라져 있고 재미있는 것도 많다.

일렉트론을 만지다가 다음 에러를 만났다.  

Uncaught ReferenceError: require is not defined

require는 node.js 에서 사용하는 import 문법이다. 
이게 정의가 되지 않아서 참조에러가 뜬다니
이 무슨 황당한 이야기인가...

이걸 이해하려면 몇 가지 사실을 알아야 한다. 

1. 일렉트론에서는 JS가 백엔드와 프런트엔드 2가지 영역에서 사용된다.

백엔드의 JS는 node.js, 프런트엔드의 JS는 브라우저에서 사용되는 순수한 JS이다. 
이 두 영역에서 JS는 기본적으론 분리되어 있다. 

As of 'version 5', the default for 'nodeIntegration' changed from true to false. 
https://stackoverflow.com/questions/44391448/electron-require-is-not-defined

2. node.js에서는 require() 함수로 import 하고
순수한 JS인 ES6에서는 import문을 사용한다. 

JS에서 임포트가 생기기 전에 node.js에서 임포트를 구현하다 보니 심각한 파편화가 발생했다. 

결론 프런트엔드 영역에서 require 문법을 사용했을 경우 저런 에러가 생길 수 있다. 

해결책은 노드와 인터그레이션을 활성화, 콘텍스트 분리를 해제하는 것..

const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
        preload: path.join(__dirname, 'preload.js'),
        nodeIntegration: true,
        contextIsolation: false,
    }
})

이것 말고도 방법이 있을 것 같긴 한데.. 시간 관계상 더 파보는 것은 패스..

백엔드와 프런트엔드가 통합, 공유되면 보안문제를 일으키기가 쉬울 테니 기본값으로 분리를 선택한 것 같다.