React 프로젝트에 Electron 추가하기

1. 프로젝트 생성 및 실행

React 프로젝트를 만들고 프로젝트를 실행시킨다.

// 프로젝트 생성
npx create-react-app [앱 이름]

// 프로젝트 실행
npm start

기존 프로젝트에 Electron을 추가하는 것이라면 생략한다.

2. Electron 패키지 설치

프로젝트에 Electron 패키지를 추가한다.

npm i electron --save-dev

• 개발 환경에서만 Electron을 사용하여 개발 서버를 실행하고 애플리케이션을 테스트한다.
• 배포 환경에서는 Electron을 사용하지 않고 애플리케이션의 번들링된 결과물을 제공한다.
• 이에 따라 개발에만 필요한 패키지로 Electron을 설치하는 것이 일반적이다.

npm i electron-is-dev@v2

• 개발 환경인지, 배포 환경인지 구분하는 패키지
• require을 지원하는 2.0.0 버전으로 설치해준다. ==> 트러블슈팅 관련 글 참고

3. electron.js 파일 생성

public/electron.js 파일을 생성하고, Electron 공식문서 Quick Start를 참고하여 작성해준다.

const { app, BrowserWindow } = require('electron');
const isDev = require('electron-is-dev'); // 개발 환경인지 확인하기 위한 모듈
const path = require('path'); // 경로 관련 유틸리티 모듈

// 메인 창 변수 선언
let mainWindow = null;

// 새 창을 생성하는 함수 정의
function createWindow() {
  // 브라우저 창 생성
  mainWindow = new BrowserWindow({
    // 창 크기 설정
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      devTools: isDev,
    },
  });

  // 개발 모드에서는 로컬 서버로 연결
  // 프로덕션 모드에서는 빌드된 리액트 앱 파일 로드
  mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);

  // 개발 모드에서 개발자 도구를 자동으로 열림
  if (isDev) {
    mainWindow.webContents.openDevTools({ mode: 'detach' });
  }

  mainWindow.setResizable(true);
  mainWindow.on('closed', () => (mainWindow = null));
  mainWindow.focus();
}

// 애플리케이션이 준비되면 새 창 생성
app.on('ready', createWindow);

// 모든 창이 닫히면
app.on('window-all-closed', function () {
  // 플랫폼이 맥이 아니면 애플리케이션 종료
  if (process.platform !== 'darwin') app.quit();
});

• nodeIntegration : 웹 페이지에서 Node.js 모듈을 사용할 수 있게 한다.
• contextIsolation : false일 때, 웹 페이지와 Electron의 메인 프로세스가 같은 컨텍스트에서 실행된다.
• devTools: isDev : 개발 모드일 때 DevTools를 활성화한다.

• process.platform !== 'darwin' : macOS에서는 애플리케이션이 닫혀도 메뉴바에 남아있어야 하기 때문에 예외 처리를 한다.

4. Entry point 스크립트 추가

package.json에서 직전에 만든 electron.js 파일을 Electron Entry point로 설정한다.

"main": "public/electron.js"

5. Electron 실행

electron .

실행하면 Electron 어플리케이션 화면을 확인할 수 있다.
이때 반드시 리액트 서버가 실행되어 있어야 한다.

---

+ React와 Electron 한번에 실행하기

React를 실행한 후 Electron을 실행해야 하는 번거로움을 해결하기 위해 다음과 같은 작업을 해준다.

1. 패키지 설치

npm i concurrently wait-on --save-dev

• concurrently : Electron과 React 프로세스를 동시에 실행하기 위해 사용한다.
• wait-on : 프로세스 동시 수행 시 한 개의 프로세스가 완료되기를 기다리고, 완료된 후 다음 프로세스를 수행하게 만들어 준다.

2. 스크립트 변경

package.json에 start 스크립트를 변경해준다.

"scripts": {
  "start": "concurrently \"react-scripts start\" \"wait-on http://localhost:3000 && electron .\"",
  ...
},

-> concurrently를 통해 리액트를 실행시킨 후 http://localhost:3000이 로드 완료되면 Electron을 실행시킨다.

3. .env 파일 작성

실행 시 localhost 브라우저는 띄우지 않기 위해, 루트 폴더에 .env 파일 생성 후 아래와 같이 작성한다.

BROWSER=none

4. npm start

npm start로 실행하면 localhost 브라우저는 뜨지 않고, 일렉트론 어플리케이션이 바로 띄워지는 것을 확인할 수 있다.

npm start