[Electron] Electron 과 Vue 의 간단한 연결 방법

원래는 Window 프로그램을 만들어보려 Flutter 에 대해 공부하던 중에 Slack 이 Electron 으로 만들어진 프로그램이라는 이야기를 듣고 급선회하여 Electron 을 알아가는 시간을 가져보았다.

 

Electron 에 서버에 있는 홈페이지를 띄우는 것 만으로도 엄청난 반응을 보여주었고 Web 에서 시스템 UI 로 사용하던 alert(), confirm() 함수라던가 파일 다운로드라던가 하는 기능들을 Window 에 맞게 재구성하여 만들어주기도 해서 이 정도면 원하는 프로그램을 만들 수 있다는 충분한 가능성을 확인하여 작업을 착수했고, 기존에 사용하던 Vue 를 Electron 위에 얹어 개발 환경을 꾸리려고 한다.

 

해당 환경은 'Electron-Vue' 를 사용하지 않은 방식이기 때문에 쉬운 구성을 하고자 한다면 Electron-Vue 를 찾아보도록 하자. 그리고 간단 연결이기 때문에 실제 프로젝트 사용 시에는 좀 더 구조적인 방법으로 풀어주도록 한다.

---

1. 프로젝트 만들기

 프로젝트는 Vue 를 기준으로 먼저 만들었다. 컴퓨터에 Vue-CLI 3 이 설치되어있어 해당 환경 기반으로 프로젝트를 구성하였다.

 

2. Electron 설치하기

 해당 프로젝트 폴더에 NPM 을 통해서 Electron 을 설치한다.

npm install electron --save-dev

나중에 Electron-Builder 를 통해 빌드하고자 할 때에는 "package.json" 에서 Electron 이 devDependency 에 있어야 하기 때문에 "--save-dev" 를 꼭 붙여주어야 한다.

 

3. Electron main.js 생성

 Electron 은 main.js 를 통해서 라이프사이클이 생성되고 Window 객체가 생성되고 하는, Android 로 따지자면 Application 정도의 단위가 될 것 같고 iOS 로 따지자면 AppDelegate 일 것 같다. (지극히 내 생각)

 

 프로젝트 내에서 Vue 의 작업 환경과 분리되게 하기 위해서 Electron 을 별도로 관리해야 할 폴더를 만드는게 좋을 것 같아 electron 이라는 폴더를 만들고 그 안에 main.js 파일을 만들었다. 파일을 만든 후에 package.json 파일 안에 다음항목을 추가하도록 한다.

{
    // 이 부분은 이미 package.json 에 있는 내용이 채워져 있음...
    ,
    "main": "./electron/main.js"
}

package.json 에 main 키 값을 지정해주어야 electron 이 package.json 을 확인하고서 main.js 을 실행시킨다.

 

4. Electron 위에 Vue 띄우기

 설명은 Electron 공식 문서에 잘 나와 있다.

Quick Start | Electron

먼저, main.js 에 다음과 같이 코딩을 써내려가 준다.

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


function createMain() {
    const mainFrame = new BrowserWindow({
        width: 1280,
        height: 1060,
    });
    
    // 내용 채울 거임
}

app.whenReady().then(() => {
    createMain()

    app.on('activate', () => {
        if(BrowserWindow.getAllWindows().length === 0) createMain()
    })
})

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

공식 문서와 별반 다를 거 없는 모습이다.

 

BrowserWindow 는 안드로이드는 Activity 이고 iOS 는 ViewController 로 매칭을 할 수 있을 것 같다.  Electron 이 준비가 된다면 BrowserWindow 를 생성해 준다. 별도의 옵션을 달아주지 않으면 생성과 동시에 화면에 띄워진다. 그리고 Layout XML 이나 XIB 들을 각각 Activity 와 ViewController 에 지정하여 화면에 띄우는 것 처럼 웹 페이지를 지정하여 화면을 띄워준다.

function createMain() {
    const mainFrame = new BrowserWindow({
        width: 1280,
        height: 1060,
    });
    
    mainFrame.loadURL("http://localhost:8080")
}

BrowserWindow 에 load 관련 메소드는 다음과 같이 있다.

1. loadURL : 웹뷰처럼 URL 주소를 통해 웹 페이지를 띄우는 방식
2. loadFile : 로컬 파일을 사용하지만 파일은 웹 페이지 이다

현재는 개발모드이기 때문에 npm 으로 Vue 를 개발 환경으로 올린 로컬호스트 주소로 타겟을 잡아주었다.

일단 main.js 를 작성했고 Electron 을 실행시켜보도록 한다.

 

5. Electron 실행

 하기 전에, Vue 를 먼저 로컬호스트에 띄워보도록 한다. Vue CLI 로 자동으로 프로젝트를 만들었다면,

npm run serve

만 치게 되면 npm 이 알아서 Vue 를 구성하고 로컬호스트에 띄워주며, 어떤 주소에 띄웠는지 알려주기도 한다. 일단 Vue 는 띄웠고, 다음 Electron 을 실행시키도록 설정해본다.

 

 공식 문서에는 프로젝트 폴더 내에서 터미널을 통해서 "electron ." 을 실행시키면 작동을 한다고 되어있다. 이렇게 실행시켜도 되고, NPM 을 통해 실행시킨다 하면 package.json 에 다음 부분을 추가해주면 된다.

{
    // 여기도 이미 내용이 있을 거임
    "scripts": {
    	"electron": "electron ."
    }
}

scripts 영역에 다음과 같이 Key-Value 를 입력하면,

npm run electron

 을 입력 하면 자동으로 electron . 으로 변환되어 실행을 할 수 있게 된다.

---

여기까지 간단하게 알아보았으나 Electron-Builder 를 통해 사이닝을 하게 될 때에는 이런 단순한 방식은 사용하면 안된다는 것을 깨닫게 된다...

 

일단 간단 연결이기 때문에 해당 방법으로도 돌릴 수 있다는 것을 알고 있도록 한다.