[electron] electron과 react 함께 사용하기

1. react 생성

// npx create-react-app 프로젝트명
npx create-react-app auto-commute

 

2. 프로젝트 이동

// cd 프로젝트명
cd auto-commute

 

3. electron 모듈 설치

yarn add electron concurrently wait-on cross-env

• electron: electron 핵심 모듈
• concurrently: react와 electron을 동시에 실행할 수 있도록 해주는 모듈. 설치하지 않으면 react와 electron을 따로 실행해야함
• wait-on: electron과 react의 동작 순서를 제어하기 위한 모듈
• cross-env: CLI환경에서 환경변수 설정(특정 OS에 상관없이 환경변수를 적용함)

 

4. package.json에 코드 추가

// 최상위에 코드 추가
"main": "public/main.js",
"homepage": "./",
//...
"scripts": {
  "electron:serve": "concurrently -k \"cross-env BROWSER=none yarn start\" \"yarn electron:start\"",
  "electron:build": "",
  "electron:start": "wait-on tcp:3000 && electron .",
  //...
},

 

5. IPC 통신을 위한 모듈 설치

yarn add @electron/remote

 

6. public 폴더에 main.js 파일 생성 후, 코드 작성

const {app,BrowserWindow} = require('electron');
 
const remote = require('@electron/remote/main')
remote.initialize()
 
function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            enableRemoteModule: true
        }
    })
 
    win.loadURL('http://localhost:3000')
 
    remote.enable(win.webContents);
}
 
app.on('ready', createWindow)
 
app.on('window-all-closed', function() {
    if(process.platform !== 'darwin') {
        app.quit()
    }
})
 
app.on('activate', function() {
    if(BrowserWindow.getAllWindows().length === 0) createWindow()
})

 

7. (선택사항) react 포트 변경 ▷ 회사 프로그램을 돌리고 있어서 3000 포트를 사용중이므로, 나는 포트 변경이 필요.

https://olppaemmit.tistory.com/179

[React] Port 변경 방법

참고로, main.js에서 변경한 포트로 바꿔주어야 한다는 점!

 

8. React & Electron 실행

yarn electron:serve

electron 위에서 react가 실행되는 것을 확인할 수 있다.

---

# 참고 사이트 : https://developer-talk.tistory.com/335