[Electron + React + Typescript] React로 Electron 사용하기 1

오랜만에 글을 쓴다 ㅠㅠ 오랜만에 글쓰긴하지만 계속해서 코딩공부는 했습니다....

요번에는 Javascript 라이브러리인 Electron을 사용해볼거예요! html + css + js 로도 사용 할 수 있지만 많이 사용해오던 Reacrt를 이용할것입니다. React 가 더 편하기도 하고... 또 typescript로 개발을 해볼겁니다.

---

개발 환경 설치

먼저  기존에 typescript + react 환경을 설치하듯이 설치 해줄게요. 아래 내용을 터미널에서 실행하여 기본 환경을 만듭니다.

npx create-react-app electron_practice --template typescript

---

패키지 설치

그리고 electron_practice 폴더로 이동 해준 뒤 필요한 패키지들을 설치해줍니다.

npm i -D electron electron-builder concurrently cross-env wait-on
npm i electron-is-dev

---

package.json 수정

그리고 루트 폴더에 있는 package.json 을 아래와 같이 변경해줍니다.

...
"main": "./public/electron.js",
"homepage": "./",
...
"scripts": {
    "react-start": "react-scripts start",
    "react-build": "react-scripts build",
    "react-test": "react-scripts test",
    "react-eject": "react-scripts eject",
    "start-renderer": "cross-env BROWSER=none npm run react-start",
    "start-main": "electron .",
    "compile-main": "tsc ./public/electron.ts",
    "start-main-after-renderer": "wait-on http://localhost:3000 && npm run start-main",
    "dev": "npm run compile-main && concurrently -n renderer, main 'npm:start-renderer' 'npm:start-main-after-renderer'",
    "pack": "npm run compile-main && npm run react-build && electron-builder --dir",
    "build": "npm run compile-main && npm run react-build && electron-builder build",
    "build:osx": "npm run build -- --mac",
    "build:linux": "npm run build -- --linux",
    "build:win": "npm run build -- --win",
    "predist": "npm run compile-main"
 },

---

electron.ts 생성

그리고 public 폴더에 eletron.ts 파일을 아래와 같이 만들어줍니다.

import * as path from 'path';
import { app, BrowserWindow } from 'electron';
import * as isDev from 'electron-is-dev';

const BASE_URL = 'http://localhost:3000';

let mainWindow: BrowserWindow | null;

function createMainWindow(): void {
  mainWindow = new BrowserWindow({
    width: 1920,

    height: 1080,

    webPreferences: {
      contextIsolation: true,

      nodeIntegration: true,
    },
  });

  mainWindow.once('ready-to-show', () => {
    mainWindow.show();
  });

  if (isDev) {
    mainWindow.loadURL(BASE_URL);

    mainWindow.webContents.openDevTools();
  } else {
    mainWindow.loadFile(path.join(__dirname, '../build/index.html'));
  }

  mainWindow.on('closed', (): void => {
    mainWindow = null;
  });
}

app.on('ready', (): void => {
  createMainWindow();
});

app.on('window-all-closed', (): void => {
  app.quit();
});

app.on('activate', (): void => {
  if (mainWindow === null) {
    createMainWindow();
  }
});

---

실행 및 컴파일

그 뒤 아래처럼 터미널에서 실행하면 electron.ts 가 electron.js로 컴파일 되며 파일이 실행된다.

npm run dev

위와 같이 React가 뺑글뺑글 돌면서 잘 실행된다!

또 http://localhost:3000 에서도 잘 실행된다.

---

Build

아래 OS별 스크립트를 터미널에서 실행하게 되면 dist 폴더가 생기고 해당 폴더안에 실행파일이 생긴다. 

npm run build:win		// 윈도우
npm run build:osx		// 맥
npm run build:linux		// 리눅스

 

기본적인 Electron 개발환경 설정 방법이다. 추후 더 올라올 예정~

 

잘못된 정보나 문의사항은

codepam2020@gmail.com 으로 연락주세요!

훈수 대환영입니다!