Electron으로 웹 데스크탑 앱 만들기 (1) (feat. React, Typescript)

너무 오랜만에 블로그 글을 써서 조금 어색하네요..

 

핑계지만 인턴 생활 적응하느라 정신없기도 하고,,, 솔직히 인턴 됐다고 한시름 놓은 게 컸던 것 같습니다

앞으로는 꾸준히 작성해보려고 합니다 :)

 

글을 작성하게 된 계기

우선 왜 갑자기 electron에 대해 관심이 생겼느냐부터 말씀드리자면...

사실 예전부터 제가 즐겨했던 게임들 (피파, 롤 등) 모두 각자만의 클라이언트(?) (클라이언트라고 통일하겠습니다)를 사용해서 게임을 실행했는데 이게 궁금했습니다.

 

그래서 최근에 갑자기 생각이 나가지고 출근길에 찾아봤는데 자세한 자료는 안나오더라구요?

대신 펄어비스라는 게임회사에서 electron으로 게임 런처 및 클라이언트를 만든다고 합니다.

 

때문에 간단하게 electron에 대해 공부를 했는데 그에 대해 작성해보려고 합니당

 

electron의 정의

우선 electron은 웹 기술 즉, HTML, CSS, JS를 사용해 크로스 플랫폼 데스크탑 애플리케이션을 개발할 수 있도록 해주는 오픈 소스 프레임워크라고 합니다. 또 Chromium (웹 브라우저 엔진)과 Node.js (서버 사이드 JS 런타임)를 결합해, RN처럼 한 번의 코드 작성으로 Windows, macOS, Linux 등 다양한 운영체제에서 실행 가능한 애플리 케이션을 만들 수 있도록 도와줍니다.

electron의 동작 원리

동작 원리도 한 번 알아봐야겠죠?

우선 electron 애플리케이션은 크게 두 가지 프로세스로 구성되어 있는데요

하나는 메인 프로세스, 다른 하나는 렌더러 프로세스 입니다.

 

메인 프로세스 (Main Process)

• 역할 : 애플리케이션의 생명 주기 관리, 창(window) 생성, 시스템 이벤트 처리 등을 담당합니다.
• 특징 : Node.js 환경에서 동작하며, 애플리케이션의 진입점(entry point)으로 main.js 같은 파일에서 실행됩니다.

렌더러 프로세스 (Renderer Process)

• 역할 : UI를 구성하는 웹 페이지를 렌더링합니다.
• 특징 : Chromium 기반의 웹 페이지로 HTML, CSS, JS를 사용해 UI를 구성합니다. 메인 프로세스와는 IPC (Inter-Process Communication)를 통해 통신합니다.

참고로 최신 electron에서는 보안을 강화하기 위해 nodeIntegration을 false로 설정하고, contextIsolation을 true로 사용하는 것을 권장한다고 합니다.

 

nodeIntegration

• 역할 : 렌더러 프로세스에서 node.js의 API와 모듈(require, fs, path 등)을 사용할 수 있도록 허용할지 여부를 결정합니다.
• true로 설정하면, 렌더러 프로세스에서 node.js 모듈을 직접 사용할 수 있게 된다고 합니다.
• 하지만 보안상의 위험이 존재하는데요, 애플리케이션 외부에서 들어오는 콘텐츠나 악의적인 스크립트가 실행된다면, node.js API에 접근하여 시스템에 해를 끼칠 가능성이 있다고 합니다.
• 따라서 보안 강화를 위해 대부분의 경우 nodeIntrgration을 false로 설정하는것이 좋다고 합니다.

contextIsolation

• 역할 : contextIsolation 옵션은 단어뜻 그대로 렌더러 프로세스의 JS 실행 컨텍스트를 격리하여, 애플리케이션의 내부 API와 웹 페이지에서 실행되는 코드가 서로 영향을 주지 않도록 보호합니다.
• 격리된 컨텍스트는 렌더러 프로세스에서 preload 스크립트를 통해 노출된 API와 웹 페이지의 스크립트가 서로 다른 JS 컨텍스트에서 실행됩니다.
  이렇게 하면, 만약 웹 페이지에 악의적인 코드가 포함되더라도 preload 스크립트에서 제공한 민감한 API나 데이터에 직접 접근하기 어려워집니다.
• 또 외부에서 불특정 다수의 콘텐츠가 로드되는 경우, contextIsolation을 통해 애플리케이션 내부의 중요한 기능이나 데이터를 보호할 수 있습니다.
• 따라서 보안을 위해 contextIsolation을 true로 설정하는 것이 권장됩니다.

코드 예시 (nodeIntegration, contextIsolation)

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 보안을 위해 Node.js 통합을 비활성화합니다.
      nodeIntegration: false,
      // 렌더러 프로세스의 컨텍스트를 격리하여 보안을 강화합니다.
      contextIsolation: true,
      // preload 스크립트를 사용해 필요한 Node.js 기능을 제한적으로 노출할 수 있습니다.
      preload: __dirname + '/preload.js'
    }
  });

  mainWindow.loadFile('index.html');
}

app.whenReady().then(createWindow);

 

다음 글에서부터는 React, Typescript, electron을 결합해 간단한 게임 런처를 만들어 보려고 합니다.