Electron 시작하기 (2) 🏃‍♀️

이번 포스트에서는 실제로 일렉트론 실행 환경을 구축해볼 것입니다. 이전 포스트를 보고 오면, 더 이해가 쉬울 것입니다.😉

1. React + electron 프로젝트 생성하기

⭐ react 프로젝트를 생성합니다

npx create-react-app react-electron-project

⭐ 프로젝트에 일렉트로 패키지를 추가합니다.

npm install --dev electron

⭐ package.json에서 electron 관련 설정을 추가합니다.

{
 ...
 "main" : "src/main.js" 
 "scripts" : {
 	...
    "electron" : "electron ."
    }
}

-> 일렉트론의 entry point를 main.js로 설정합니다.
-> electron : electron 은 일렉트론 실행 스크립트를 나타냅니다.

2. main.js 설정하기

⭐ src/main.js를 만듭니다.

const { app, BrowserWindow } = require('electron');
const path = require('path')
function createWindow() {
	const win = new BrowserWindow({
    	width : 800,
        height : 600,
        webPreferences : {
        	nodeIntergration : true,
            contextIsolation : true,
            preload : path.join(__dirname, 'preload.js'),
        },
    })
    win.loadURL('http://localhost:3000')
   }
   app.whenReady().then(() => {
   	createWindow()
   })
   app.on('window-all-closed', function() {
   	if (process.platfrom !=='darwin') app.quit()
})

-> 리액트 화면을 보여주기 위해, win.loadFile을 win.loadURL('http://loacalhost:3000')로 변경합니다.

3. 패키지 추가

⭐ react와 electron을 같이 실행하기 위해 다음 아래 패키지를 추가합니다.

npm install --dev concurrently wait-on

-> concurrently : 일렉트론과 리액트 프로세스를 동시에 실행할 수 있는 패키지 입니다.
-> wait-on : 프로세스 동시 수행시 한개의 프로세스가 완료되기를 기다리다 완료된 후 다음 프로세스를 수행하게 만들어 줍니다.

⭐ package.json의 스크립트를 변경합니다.

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

⭐ 브라우저 창은 불필요하므로, .env 파일 생성 후 BROWSER=none이라는 내용을 추가해 줍니다

이제, 프로젝트를 실행하면 일렉트론에서 리액트를 실행한 화면이 나올 것입니다.
리액트 코드를 변경시 바로 반영이 되고, 브라우저 창과 함께 나오기 때문에 electron을 추가로 실행해주지 않아도 된다는 편리함을 얻게 되었습니다. ☺

4. api 코드 작성해보기

이전 포스트에서 정리했던 preload.js를 실제로 활용해 메인 프로세스와 렌더러 프로세스 간 api 통신 코드를 작성해보겠습니다.

사실, react와 electron을 함께 사용할 때 기존의 react와 달라지는 점이 크게는 없을 것입니다.
만약 렌더러 프로세스에서 nodejs의 모듈을 가져와야 할 필요가 있다면 preload 스크립트를 사용하겠지만 그 이외에는 api 통신을 하는 게 아니고선 기존의 react와는 크게 다른 점이 없기 때문에 쉽게 적응해 앱을 구축할 수 있습니다. 😉

1. signIn api 함수 생성

// ipcHandlers.js
const axios = require('axios');

async function handleSignIn(event, {userId, password}) {
	try {
    	const res = await axiosInstance.post('/user/login', {userId, password});
        return res.data;
    } catch (error) {
    	console.error(error)
    }
}

module.exports = {
	handleSignIn
}

2. main 프로세스에 api 함수 등록

// main.js
const ipcHandlers = require('./ipcHandlers');

function createWindow() {
	...
    
    app.whenReady().then(() => {
    	createWindow();
        
        ipcMain.handle('signIn', ipcHandlers.handleSignIn); ⭐
    });
    
    ...
}
-> 'signIn'이라는 채널에 handleSignIn listner등록 

3. ipcRender를 통한 렌더러 프로세스에서의 비동기적 통신 호출

// preload.js 
const { contextBride, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
	signIn : ({ userId, password}) => ipcRenderer.invoke('signIn', {userId, password}),
})

-> 'signIn' 채널 호출 

4. 렌더러 프로세스에서 사용하기

// App.tsx
function App() {
	// 전역적으로 선언된 electronAPI 가져오기
	const signIn = (window as any).electronAPI.signIn;
    const [accessToken, setAccessToken] = useState();
    
    useEffect(() => {
    	signIn({userId : '1', password : '1'})
        	.then((res) => {
            	setState(res.accessToken);
            })
            .catch((err) => {
            	console.error(err);
            })
   	}, []);
    
    retrn (
    	<>
        	<div>{accessToken}</div>
        </>
    

-> 이렇게 렌더러프로세스에서 preload에서 호출한 signIn 채널의 함수를 가져와 사용할 수 있는 것을 볼 수 있습니다.

+++ 참고로 electron에서는 BrowserRouter가 아닌, HashRouter를 사용해야 합니다.