[React 와 ElectronJS 로 데스크톱 앱 만들어보기] [#1] 프로젝트 세팅하기

이번 튜토리얼 시리즈는 React, ElectronJS, Typescript, Material UI, React Router를 사용해서 크로스 플랫폼 데스크톱 앱을 제작해보도록 하겠습니다.

필수지식

  1. Javascript 기본기. 모든 라이브러리들이 Javascript 기반이므로 Javascript에대한 기본 지식은 갖추셔야 합니다.
  2. React 기본지식. React에대해 상세히 알아보는 시간은 다른 튜토리얼에서 갖도록 하겠습니다. 기본적으로 Create React App을 사용해 한두번 웹사이트를 제작해보신 분들이 보기 편하실 수준으로 설명을 진행하겠습니다.
  3. Typescript 기본지식. Typescript 또한 다른 튜토리얼에서 상세히 다루도록 하겠습니다.

이 튜토리얼은 React, ElectronJS, Typescript를 사용해 React 앱을 데스크톱으로 빌드하는 가이드입니다. 각각 라이브러리 및 프레임워크 상세 사용법은 별도 튜토리얼을 제작하도록 하겠습니다.

먼저 저희가 사용할 프레임워크 및 라이브러리들은 아래와 같습니다.

React 홈페이지

React는 처음 들어보는 분은 아마 없으실겁니다. SPA (Single Page Application) 시장을 React, VueJS, AngularJS 셋이서 큼직하게 나눠먹고 있는데 그중 현재는 가장 인기있는 프레임워크가 ReactJS라고 생각하시면 되겠습니다. Facebook에서 개발을 주도하고있고 대기업과 스타트업 가릴것 없이 많은 웹사이트들이 React 기반으로 만들어져 검증된 프레임워크입니다. 저희는 데스크톱 앱의 프론트엔드를 React를 사용해 개발해보도록 하겠습니다.

Electron 홈페이지

저희의 React 앱을 웹사이트가 아닌 데스크톱 앱으로 컴파일해줄 ElectronJS 프레임워크입니다. 많이들 아시는 Slack, Atlassian, Discord등 규모있는 데스크톱 앱이 ElectronJS로 제작되었고 요즘은 사실 ElectronJS를 사용하지 않을 이유가 없을정도로 데스크톱 앱에서는 최강자라고 볼 수 있습니다.

Typescript 홈페이지

Javascript를 써보신분이면 모르는분 없으실거라 믿습니다. 요즘 Typescript는 선택이 아니라 필수입니다. 스타트업 MVP 수준만 한다고 해도 Typescript를 꼭 사용하라고 권해주고 싶습니다. Typescript를 사용하게되면 코드 퀄리티 뿐만이 아니라 엔지니어간 협업 및 소통또한 월등히 좋이지기때문에 사용하지 않을 이유가 없습니다. 오버헤드 무시할만한 수준입니다. 모르시면 꼭 배워서 사용하세요!

React Router 홈페이지

React Router는 React 프레임워크를 사용할때 가장 많이 사용되고있는 라우팅 라이브러리입니다. 이 튜토리얼에서는 React Router를 사용해 모든 라우팅을 진행할 계획이지만 만일 선호하시는 다른 라우팅 라이브러리가 있다면 다른 라이브러리를 사용하셔도 전혀 문제가 없으십니다. 다만 꼭 주의해야할점은 BrowserRouter가 아닌 HashRouter를 사용할 수 있어야 파일시스템으로 라우팅을 진행해야하는 electron앱에서 문제가 안생깁니다.

Material UI 홈페이지

Material UI는 구글에서 지정한 디자인 프린시플입니다. 위 라이브러리는 구글의 Material UI를 React에서 사용하기 간편하게 컴포넌트들을 제작해놓은 라이브러리입니다. Bootstrap이나 Ant Design등 선호하시는 다른 라이브러리가 있으시다면 해당 라이브러리를 사용하셔도 문제 없습니다. 다만 Material UI는 100% Typescript 지원에 JSS까지 기본 사용이라 Typescript와의 호환성이 상당히 좋다는 장점이 있습니다.

프로젝트 세팅하기

프로젝트 매니저로 yarn을 사용하도록 하겠습니다. 아래 링크에 가서 yarn을 설치해주세요

Yarn 다운로드

아래 커맨드를 실행해서 yarn이 제대로 설치해졌는지 확인해주세요. 없는 커맨드라고 나오시면 안됩니다.

yarn --version

yarn을 사용해서 create-react-app을 실행해보겠습니다. 아래 커맨드를 사용해서 typescript가 활성화된 create-react-app을 생성해주세요.

yarn create react-app --template typescript medium-electron-react

1분정도 기다리시면 yarn이 create-react-app 프로젝트를 생성하게됩니다. 프로젝트 루트에서 아래 커맨드를 실행해주세요.

yarn start

localhost:3000으로 브라우저가 실행되며 아래와같은 화면이 나오신다면 잘 따라오신겁니다.

Electron

이 화면을 데스크톱 앱으로 전환하는 프로세스를 진행해보도록 하겠습니다.

먼저 아래 커맨드를 입력해서 필수 라이브러리인 electron, electron-builder를 설치해줍니다.

yarn add -D electron electron-builder

아래 코드를 package.json에 추가해줍니다.

{
  "main": "public/Main.js",
  "homepage": "./"
}

첫번째줄은 electronJS의 메인 엔트리 파일을 설정해주는 부분입니다. 두번째는 react 앱을 빌드했을때 생기는 build 폴더의 기준으로 홈페이지를 정해주는 코드입니다.

package.json에 scripts 키를 아래처럼 변경해주도록 하겠습니다.

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "react-start": "BROWSER=none yarn start",
    //윈도우즈 유저의경우 위 커맨드를 "set BROWSER=none && yarn start" 로 사용해주셔야합니다.
    "electron-start": "ELECTRON_START_URL=http://localhost:3000 electron .",
    //윈도우즈 유저의경우 위 커맨드를 "set ELECTRON_START_URL=http://localhost:3000 && electron ." 이렇게 사용해주셔야합니다.
    "electron-pack": "yarn build && electron-builder build -c.extraMetadata.main=build/Main.js"
  }
}

react-start 커맨드는 start 커맨드와 똑같지만 create react app을 실행할때 디폴트로 진행되는 액션이 브라우저를 실행하는 기능을 스킵하는 커맨드입니다. 저희는 electron 화면을 보며 개발을 진행할거라 브라우저를 띄울 필요가 없습니다.

다음으로 electron-start 커맨드는 개발환경에서 electron 앱을 실행할때 사용되는 커맨드입니다. create react app의 기본 포트인 3000번 포트로 화면을 실행시킵니다. 만일 포트가 바뀌셨다면 이곳에서 포트변경을 해주셔야합니다. 또한 Windows를 사용하실경우 윈도우즈에서 해당되는 환경변수 지정법을 이용해주세요.

이어서 electron-pack은 React 앱을 electron 데스크톱 앱으로 패키징해서 배포할때 사용되는 커맨드입니다. 보시다시피 yarn build커맨드를 통해서 React 앱 빌드를 먼저 진행하고 electron-builder를 사용해서 electron 앱으로 패키징하는 커맨드를 묶어놓았습니다.

이제 electron의 진입 포인트가되는 Main.js 파일을 생성해줄 차례입니다. Create React App은 src 폴더에 있는 파일들만 Typescript 에서 Javscript로 컴파일하게 세팅되어있습니다. Main.js파일을 Typescript로 사용하려면 src 폴더에 넣고 컴파일을 해줘야 하는데 저는 아직 해당 방법은 찾지 못해서 혹시 아시는분 있으시면 댓글을 달아주시면 감사하겠습니다. 결과적으로 이 튜토리얼에서 유일하게 사용될 .js 파일은 지금 제작할 Main.js 파일 딱 하나입니다. public 폴더에 Main.js 파일을 생성해주시고 아래 코드를 붙여넣어주세요.

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

function createWindow() {
    /*
    * 넓이 1920에 높이 1080의 FHD 풀스크린 앱을 실행시킵니다.
    * */
    const win = new BrowserWindow({
        width:1920,
        height:1080
    });

    /*
    * ELECTRON_START_URL을 직접 제공할경우 해당 URL을 로드합니다.
    * 만일 URL을 따로 지정하지 않을경우 (프로덕션빌드) React 앱이
    * 빌드되는 build 폴더의 index.html 파일을 로드합니다.
    * */
    const startUrl = process.env.ELECTRON_START_URL || url.format({
        pathname: path.join(__dirname, '/../build/index.html'),
        protocol: 'file:',
        slashes: true
    });

    /*
    * startUrl에 배정되는 url을 맨 위에서 생성한 BrowserWindow에서 실행시킵니다.
    * */
    win.loadURL(startUrl);

}

app.on('ready', createWindow);

이제 프로그램을 실행해보도록 하겠습니다. 프로젝트 루트에 터미널을 두개 실행해주시고 한곳에 아래 커맨드를 실행해주세요.

yarn react-start

아래와같은 창이 실행되시면 문제 없는겁니다.

success

두번째 창에는 아래 커맨드를 실행해주세요.

yarn electron-start

커맨드 실행과 함께 위에 브라우저에서 봤던 React 앱이 데스크톱 앱으로 실행되는걸 보실 수 있습니다.

electron home

src 폴더의 App.tsx 파일에 들어가서 Learn React 다음에 느낌표를 세개 꼿아주고 저장해봅시다. 바로 해당 변경이 자동으로 반영되는 아래 화면을 보실 수 있습니다.

electron home

이번엔 package.json에 지정했던 세번째 커맨드 electron-pack을 실행해서 실제 데스크톱앱을 제작해보겠습니다. 아래 커맨드를 실행해주세요.

yarn electron-pack

빌드가 완료되면 프로젝트의 dist 폴더에 medium-electron-react-0.1.0.dmg파일 (윈도즈에선 아마.exe가 배포될겁니다.)이 생성되는걸 보실 수 있습니다. 실행하시면 위와 같은 똑같은 화면을 보실 수 있습니다. 이 파일은 http://localhost:3000번의 웹 환경을 미러링 하는게 아니라 실제 패키징된 React 파일을 실행하는겁니다. 의심이 되신다면 첫번째 터미날창을 닫아주시고 http://localhost:3000의 React 앱이 더이상 실행되지 않아도 패키징된 프로그램은 문제가 없는걸 보실 수 있습니다. 다음시간엔 라우팅 및 Material UI를 사용한 디자인을 해서 아래와같은 화면을 제작해보도록 하겠습니다.

electron home

©Code Factory All Rights Reserved