Skip to main content

Electron + React + TypeScript 시작하기

electron이란

JavaScript, HTML, CSS를 이용하여 크로스 플랫폼 데스크탑 앱을 만들어보세요

Electron이란, 맥, 윈도우, 리눅스와 호환되는 소프트웨어 프레임워크입니다. 수많은 크로스 플랫폼 프레임워크가 세상에 존재하지만, 스마트폰 같은 모바일이 아닌 PC 데스크톱 환경을 지원하는 경우는 선택지가 생각보다 많지가 않습니다. 리눅스, 맥, 윈도우를 가리지 않고 폭넓게 쓰이는 Visual Studio Code(이하 VSCode)가 바로 이 Electron을 활용하여 크로스 플랫폼을 구현한 것으로 알려지고 있습니다.

이제 웹 지식을 활용하여, 데스크톱에서도 하나의 코드로 복수 플랫폼에서 작동하는 프로그램을 직접 개발할 수 있도록 첫 발걸음을 내딛어볼까 합니다.

기초 설정

brew 설정

brew는 맥에서 사용하기 가장 편한 홈브류 패키지 관리자입니다. 리눅스에서 쓰이는 다양한 프로그램을 맥에서도 원격 저장소에서 받아서 바로 설치할 수 있게 해줍니다.

https://brew.sh/index_ko 에 접속하면 즉시 설치할 수 있는 링크가 제공됩니다.

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

설치가 되면 바로 노드를 설치합니다. node 설치는 버전 관리에 상당히 번거로운 부분이 있는데, 오래된 소스 코드를 볼 일이 없는 저는 그냥 빠르게 패키지 관리자부터 설치하여 노드를 동시에 설정하고자 합니다.

yarn 설치

yarn은 brew에 공식적으로 패키지가 업로드되어 있으므로 MacOS 사용자에게 가장 편리한 설치 옵션입니다. 아래 명령으로 간단하게 설치가 가능합니다.

$ brew install yarn

아무 것도 준비되지 않아도 node가 자동으로 설치됩니다. nvm 같은 다른 버전 관리자를 통해 node를 이미 설치한 바 있는 분들은, 환경 변수 경로 $PATH에 node가 있는 폴더가 들어있어서, 아무 터미널에서나 node 명령이 먹는지 미리 확인해보시기 바랍니다.

node가 이미 설치되어 있고 npm으로 관리하는 분들은 npm 패키지의 yarn을 쓰는 것도 방법입니다. 어떻게 설치하는지는 상관 없습니다. 다만, 추후 업데이트를 고려해서 본인이 어떻게 설치했는지 기억을 미리해두시기 바랍니다.

엉뚱한 패키지 관리자에서 업데이트를 하면 당연히 yarn이 업데이트 되지 않을 것이기 때문입니다.

$ npm install -g yarn

템플릿에서 시작하기

우리는 Electron + React + TypeScript 조합으로 기본 뼈대를 만들어보도록 하겠습니다. 왜 공식적인 방법을 제치고 이런 방식으로 만드냐면…

  • React 지식을 활용하면 다른 프레임워크에 대한 지식이 있을 경우 접근이 편리하고, 없더라도 다른 프레임워크의 접근 장벽을 낮출 수 있습니다.
  • 기본값으로 JavaScript를 사용하는데, TypeScript의 타입에 엄격한 방식, eslint를 통한 코드 정리 일관성, 오류 판정 등의 유용한 기능을 쓰기 어렵습니다. 초보자는 끊임없이 실수를 바로잡아줄 선생님이 필요하죠.
  • 물론 숙련자라고 해도, 모든 파일의 오류를 검출하기 어렵기 때문에 TypeScript가 월등히 편리하게 느끼실 분이 많을 거라 생각합니다.

본격적으로 준비가 되었으니 npx를 써서 React 앱 초기화를 하겠습니다.

프로젝트 초기화

electron과 electron-is-dev, concurrently, wait-on 패키지에 대한 의존성을 등록하겠습니다. 의존성을 등록하면 프로젝트에서 이 라이브러리를 사용하게 되고, 기능을 활용할 수 있게 됩니다.

-D는 dev라는 뜻인데, 이 의존성은 개발시에만 활용하게 되고, 배포시에 포함되지 않는다는 소리입니다.

$ yarn add -D electron electron-is-dev concurrently wait-on

파일 electron.js를 public 폴더에 생성하여 다음과 같이 저장합니다. 참고로 편집기는 VSCode가 공짜 중에 가장 편리한 것 같습니다.

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow

const path = require('path')
const isDev = require('electron-is-dev')
let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    resizable: false,
    webPreferences: {
      nodeIntegration: true
    }
  })
  mainWindow.loadURL(
    isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`
  )
  if (isDev) {
    // Open the DevTools.
    // BrowserWindow.addDevToolsExtension('');
    mainWindow.webContents.openDevTools()
  }
  mainWindow.on('closed', () => (mainWindow = null))
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

package.json을 편집합니다. 다른 건 그대로 두고, 값이 있는 부분만 수정해 둡시다.

{
 .
 .
 "homepage":"./",
 "main":"public/electron.js",
 .
 .
 "scripts":{
  .
  .
  "dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\""
 }
}

앱 기동

앱을 기동하려면 이렇게 하면 됩니다.

$ yarn dev

다음 단계

Electron의 라이프사이클에 대해 배우고, 실제로 폼을 만들어보도록 하겠습니다.

Jinbaek Lee

일본 외노자입니다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다