Electron 셋업하기
2021년 12월 24일 수정
≡ 목차 (Table of Contents)
Electron 패키지 의존성 추가
Electron도 일반적인 의존성 패키지 형태로 설치한다. 프로젝트가 생성되어 있다는 가정 하에서 아래와 같이 yarn이나 npm을 이용해 프로젝트에 패키지를 포함할 수 있다.
yarn add electron # or npm install electron
하지만 Electron 패키지 자체는 개발할 때 주로 필요하고 실제 프로덕션을 위한 패키징 시에 알아서 바이너리가 포함되기 때문에 프로덕션용 의존성 자체는 필요가 없다. 따라서 아래와 같이 개발 의존성으로만 포함하는 것이 일반적이다.
yarn add -D electron # or npm install --save-dev electron
진입점(Entrypoint)
index.js 라는 이름으로 파일을 생성하고 대충 아래와 같은 식의 내용을 채운다.
const { app, BrowserWindow, screen } = require('electron'); const createWindow = () => { const { width, height } = screen.getPrimaryDisplay().workAreaSize; window = new BrowserWindow({ width: width / 1.25, height: height / 1.25, webPreferences: { nodeIntegration: true } }); // 원하는 경로로 설정 window.loadFile('public/index.html'); }; let window = null; app.whenReady().then(createWindow) app.on('window-all-closed', () => app.quit());
이 코드가 앱이 실행되면 제일 먼저 실행되는 내용이다. 보다시피 Electron 앱의 가장 기본적인 동작을 정의하는 파일이다.
파일 이름은 꼭 index.js 일 필요는 없지만 이외의 이름을 지을 경우 실행 시 해당 파일명을 옵션으로 넘겨줘야 한다.
Electron 시작 스크립트
프로젝트 디렉터리의 package.json 파일을 보면 scripts 항목을 찾을 수 있는데 여기서 start 항목을 수정하거나 만들어주자.
"start": "electron ."
이렇게 하면 이제 아래와 같은 명령으로 앱을 띄워볼 수 있다.
yarn run start # or npm run start