Vue 개발환경 준비
일단 이 포스트에서는 2.6.14버전을 사용 할 것입니다.
아래를 그대로 진행 해보도록 하자
npm install -g vue-cli
vue init webpack my-project
Electron 개발환경 준비
index.js
const {app, BrowserWindow} = require('electron')
const path = require('path')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadURL('http://localhost:8080')
}
app.whenReady().then(() => {
createWindow()
})
win.loadFile('index.html') => win.loadURL('http://localhost:8080')
위 처럼 코드를 바꾸고
npm run start를 해봅시다
Electron api 개발
자 이제 프런트엔드에서 사용 할 수 있는 api를 개발을 해봅시다. 간단하게 파일 읽고 쓰기 를 해보도록 합시다.
index.js를 아래와 같이 셋팅 합니다. 해당 window가 로드 될 때 미리 로드될 스크립트를 지정 하는 것입니다.
const {app, BrowserWindow} = require('electron')
const path = require('path')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadURL('http://localhost:8080')
}
app.whenReady().then(() => {
createWindow()
})
아래와 같이 preload.js를 만들어둡니다.
preload.js 파일은 아래와 같이 셋팅 합니다.
const { contextBridge } = require('electron')
const fs = require('fs').promises
const path = require('path')
contextBridge.exposeInMainWorld(
'api', {
writeFile(fileName, ...args) {
return fs.writeFile(path.join(__dirname, fileName), ...args)
},
readFile(fileName, ...args) {
return fs.readFile(path.join(__dirname, fileName), ...args)
}
}
)
위에있는 contextBiridge는 쉽게 말하면 프런트엔드 페이지가 노출되는 window와 electron간의 소통을 도와주는 역할을 해줍니다.
index.js를 아래와 같이 변경 하고 npm run start를 해봅니다.
const {app, BrowserWindow} = require('electron')
const path = require('path')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadURL('http://localhost:8080')
win.webContents.openDevTools()
}
app.whenReady().then(() => {
createWindow()
})
Vue api 연동
이제 vue 코드를 수정 해보자.
vue 프로젝트를 나와 같이 프로젝트를 생성하였다면 이와 같을 것이다.
src\components\HelloWorld.vue를 아래와 같이 수정 하면 된다.
<template>
<div>
<label>
<input type="radio" value="write" v-model="mod">
쓰기
</label>
<label>
<input type="radio" value="read" v-model="mod">
읽기
</label>
<input type="text" v-model="title">
<input type="text" v-model="contents" v-show="mod === 'write'">
<button @click="execute">실행</button>
<div>{{ loaded }}</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
mod: 'write',
title: 'test.txt',
contents: 'contents',
loaded: '',
}
},
methods: {
async execute() {
if (this.mod === 'write') {
await window.api.writeFile(this.title, this.contents, 'utf8')
} else {
this.loaded = await window.api.readFile(this.title, 'utf8')
}
}
}
}
</script>
window.api.writeFile과 window.api.readFile을 적절히 사용 해보면 위와 같이 구성을 하면 간단하게 메모장(?)을 만들 수 있다.
쓰기 모드로 적당히 title과 contents를 채워서 작성을 하면 아래와 같이 파일이 생성 되는 것을 확인 해볼 수 있다.
이정도면 간단한 어플리케이션은 만들어 볼 수 있을 것이다. 다음장에는 배포와 관련된 내용을 진행 하려 한다.
👍
답글삭제