2021) 데스크탑 앱 만들기 #2 - Hot reload

돌아온 앱 만들기 시리즈, 그 두 번째!

Hot reload!

---

링크

① 데스크탑 앱 만들기 #1 - Vite2 + Vue3 + Electron

② 데스크탑 앱 만들기 #2 - Hot reload

③ 데스크탑 앱 만들기 #3 - ipcMain, ipcRenderer(예정)

 

 자, 데크스탑 앱 만들기 두 번째 Hot reload 기능 구현하기입니다. Electron도 Web처럼 프론트와 백엔드로 나누어져 있습니다. 백엔드는 main.js(또는 background.js)에 해당하고, 프론트는 src안에 있는 파일들입니다.

 

 백엔드 코드가 바뀔 때는 앱 자체가 꺼졌다가 다시 실행되고, 프론트 코드가 바뀔때는 바로바로 적용될 수 있게 만들어볼게요.

 

---

 먼저 백엔드입니다.

 

1. 백엔드 리로드

 백엔드 리로드 기능을 구현하기 위해 라이브러리가 여러 가지 있지만 저는 2021년 11월 11일 현재 2-알파 버전인 electron-reload를 쓰도록 하겠습니다.

npm install --save-dev electron-reload
//or
yarn add -D electron-reload

 설치 이후 백엔드에 해당하는 main.js파일을 엽니다

 

/main.js

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

// 이부분을 넣어주세요!!
require('electron-reload')(__dirname, {
  electron: path.join(__dirname, 'node_modules', '.bin', 'electron'),
})
// 여기까지!!

function createWindow() {
  // ... 코드생략

 이제 electron-reload 라이브러리가 electron이 자리 잡고 있는 저 경로를 바라보고 변경이 일어날 때마다 앱을 껐다가 다시 켜줍니다.

 

 백엔드는 끝났습니다. 간단하죠?

 

---

2. 프론트 핫 리로드

 백엔드는 껐다 켜주는 수준이면 프론트는 확실히 핫하게 리로드해줍니다. vite를 쓰는 이유가 바로 이거지 않겠습니까? 그럼 설정 들어갑니다.

 

 먼저 기본적인 로직은 이렇습니다. 현재는 npm run start(또는 yarn start)를 하면 프론트 코드들이 build 되어서 /dist폴더에 묶어져서 들어갑니다. 그래서 /src에 있는 파일을 수정을 해도 변경이 되었는지 Electron이 알아챌 방법이 없죠.

/main.js

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1000,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });

  // and load the index.html of the app.
  // mainWindow.loadFile("./dist/index.html");
  // 여기부터
  if (process.env.NODE_ENV === 'production') {
    mainWindow.loadFile('./dist/index.html')
  } else {
    mainWindow.loadURL('http://localhost:3000')
  }
  // 여기까지 코드 삽입!

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

 여기서 NODE_ENV 환경변수를 이용합니다. 개발환경에서는 Electron이 build되어 있는 파일을 바라보는 게 아니라 vite가 실행되고 있는 URL을 바라보게 해서 수정될 때 적용되게 만드는 겁니다.

 

/vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
const path = require("path");

// https://vitejs.dev/config/
export default defineConfig({
  base: process.env.NODE_ENV === "production" ? path.resolve(__dirname, "dist") : "", // <-- 얘 수정해주세요.
  plugins: [vue()],
});

 여기서는 development 환경에서는 아이들이 asset들이 build 된 파일을 바라보지 않아야하니까!

 

 자, 이제 스크립트를 바꿉니다.

/package.json

// ...생략

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "start": "vite && electron ." // <-- 이부분 vite && 추가
},
  
// ... 생략

 

 그리고 실행해보시면.

vite v2.6.7 dev server running at:

> Local: http://localhost:3000/
> Network: use `--host` to expose

ready in 467ms.

 이렇게 뜨고 일렉트론은 실행조차 되지 않습니다. 그렇다고 start 스크립트에서 "vite"를 빼면 아래 에러가 뿜뿜하죠.

 

스크립트 에러

 에러의 이유는 일렉트론이 실행되면서 localhost:3000를 읽어오지 못하기 때문입니다. localhost:3000이 만들어지기 전에 electron이 먼저 실행되면서 읽어올 수 없다고 찡찡대는 거죠.

 

자, 그럼 방법이 보입니다.

1) vite를 실행시킨다.(개발환경에서만 쓸 거니까 NODE_ENV도 development로 설정해준다.)

2) localhost:3000을 기다린 이후에 일렉트론을 실행한다.

 

 이 두 개의 명령이 따로 실행되면 안 되니 같이 실행될 수 있게 해주는 뭔가가 또 필요하겠죠.

 

 그럼 이제 세 개의 라이브러리가 필요해집니다

cross-env: 윈도우, 맥, 리눅스 환경에 구애받지 않고 환경변수를 설정할 수 있게 해주는 애

wait-on: port가 열릴 때까지 기다릴 수 있게 만들어주는 애

concurrently: 1)과 2)가 동시에 실행될 수 있게 만들어주는 애

 

그럼 설치!

npm install --save-dev concurrently wait-on cross-env
//or
yarn add -D concurrently wait-on cross-env

 설치가 완료되면 스크립트 파일을 아래처럼 만들어주세요./package.json

// ... 위에 생략

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "start": "concurrently -k \"cross-env NODE_ENV=development && vite\" \"wait-on tcp:3000 && electron .\"" // <-- 여기요 여기
},

// ... 아래 생략

 

그리고 npm run start(또는 yarn start)를 실행해봅니다.

제발 실행되었기를 빕니다.

 

 잘 실행이 되었다면 소스코드를 변경해봅니다.

/src/App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite!!" /> // <-- 이부분에 느낌표 두개 추가해볼게요.
</template>

편안

---

 마음이 편안해지는군요. 이제 백엔드와 프론트 둘 다 소스코드가 변경되면 알아서 앱이 껐다 켜지거나, 화면이 리로드 됩니다. 한번 체험해보세요 속도를. 감동입니다.

 

 이제 여러분도 그 감동과 함께 하시기를! 그리고 다음 포스팅은 2021 버전 데스크탑 앱 만들기 마지막입니다. preload.js를 활용해서 ipc 통신하는 방법을 올려보겠습니다. 굿바이!

 

---

2021.11.12 오류 발생!

NODE_ENV=development 환경에서 localhost:3000이 실행된 이후에 electron이 안뜬다면 start 스크립에서 wait-on tcp:3000을 빼보세요! 그러니 되더군요!

 

 

한 글자 바꿀 때마다 새로고침 하고 싶어.. 너무 좋아..