GITHUB
React과 C#으로 Desktop Application 만들기
BLOG—ProjectSeohyun
Develop
25 Sep 2023
React과 C#으로 Desktop Application 만들기

임베디드 개발자와 협업해 만들어야 하는 프로젝트가 있었습니다. 센서로 전송 받은 데이터를 바탕으로 백엔드는 C#으로 구축하고, 프론트엔드는 React로 구축하되, 실행 프로그램(.exe)을 개발해야 했습니다. 이런 조건에서 Electron을 tech stack을 정했는데 그 이유는 다음에서 살펴보겠습니다.


Electron을 선택한 이유


1. Windows에 설치 가능한 실행 프로그램(.exe)

Electron은 desktop application입니다.


2. 크로스 플랫폼을 지원하는 점

Electron은 크로스 플랫폼을 지원하고 있습니다. Windows, Mac, Linux에 설치 가능한 desktop application입니다.


3. 많은 사용자

사용자가 많아야 참고 자료가 많고 처음 사용해보는 tech stack인 만큼 빠르게 사용할 수 있다고 생각했습니다. Electron은 Visual Studio, Slack, Discord 등에서 사용되어 개발되었던 만큼 참고 자료가 많아 선택하게 되었습니다.


4. Electron.NET

Electron.NET은 개발자가 electron을 이용해 desktop application을 개발할 수 있도록 도와주는 프로젝트입니다. 주로 C#, .NET tech stack(WPF, WinForms 등)을 사용해 desktop app을 개발하는 데 장점을 제공하는 Electron.NET이 electron 개발을 처음 하는 개발자에게 큰 도움이 될 것이라 생각했습니다.


5. 백엔드, 프론트엔드의 개발 조건

React와 C#을 사용한 프론테엔드 및 백엔드를 결합해 Electron을 이용해 개발이 가능했습니다.

또한 백엔드가 C#이 아닌 C++로 개발할 가능성이 있었기 때문에 여러 가능성을 고려했을 때 Electron을 선택하게 되었습니다.

Electron은 Node.js를 기반으로 하기 때문에, Node.js의 C++ 바인딩을 활용해 C++ 코드를 백엔드에서 실행 가능하고, C 또는 C++로 작성된 외부 프로그램을 호출해 백엔드의 기능이 수행 가능했습니다.

⚠️ 단 주의 사항이 있습니다. C나 C++은 웹 개발 언어가 아니므로, 프론트엔드와 백엔드 간의 통신을 위한 메커니즘을 적절하게 구축하는 것이 필요합니다. Electron의 ipcMain과 ipcRenderer를 활용하거나, 다른 통신 방식을 사용해 프론트엔드와 백엔드 간의 데이터 교환을 처리해야 합니다.



개발 흐름


1. frontend 개발

React를 사용해 사용자 인터페이스를 개발합니다. 이는 웹 기반으로 개발되며, 사용자 인터페이스 및 화면 구성 요소를 작성하는 데 사용됩니다.


2. backend 개발

C#을 사용해 애플리케이션의 서버 측 로직을 개발합니다.


3. Electron 적용

Electron을 사용해 react 기반의 frontend와 C#의 backend를 묶어 desktop application으로 생성합니다. Electron은 Node.js를 기반으로 하므로, Node.js를 사용해 frontend와 backend를 통합 가능합니다.


4. 빌드

Electron 애플리케이션을 빌드하고 패키징하여 실행 가능한 .exe 파일을 생성합니다. 이 파일은 사용자가 다운로드하고 컴퓨터에서 실행할 수 있는 desktop application입니다.



Project

실제 프로젝트에 적용한 프로젝트의 개발 흐름에 적용해서 정리해보겠습니다.


1. 프로젝트 구성

Electron desktop application의 디렉토리 구조를 설정합니다. frontend의 React와 backend의 C# 코드를 해당 디렉토리에 추가합니다.

project
    ├─assets
    ├─core // C#_BACKEND_CODE
    │   ├─Core
    │   ├─Core.csproj
    │   └─Program.cs
    └─src // React_FRONTEND_CODE
            ├─app
            │  ├─components
            │  └─renderer.tsx
            ├─index.html
            └─main.ts


2. React application 연결

필수 패키지를 설치합니다.

$ yarn add electron-is-dev
$ yarn add concurrently cross-env electron electron-builder wait-on --dev


Electron은 웹 기술을 사용하므로, React application을 Electron 창에 로드합니다. Electron의 BrowserWindow를 사용해 React application을 렌더링 하는 데 필요한 웹 페이지를 로드합니다.

import { app, BrowserWindow } from "electron";
function createWindow() {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });
  win.loadFile("index.html");
}
app.on("ready", createWindow);


3. backend와 frontend 간 통신

Electron의 ipcMain과 ipcRenderer를 사용해 backend의 C#과 frontend의 react 간의 통신을 설정합니다. 이를 통해 두 환경 간 데이터를 주고받거나 이벤트를 전달합니다.



4. Electron 빌드

Electron를 사용해 프로젝트를 패키징 후 실행 가능한 .exe 파일로 빌드합니다. 이는 사용자에게 배포할 수 있는 desktop application입니다.

© 2024 Park Seohyun