데스크탑 앱 만들기 #1 - Vue CLI + Electron

시작은 업무 중에 매일 작성하는 엑셀 파일이 많아서 그 시간을 줄여보고자 함이었다.

---

---

링크

① 데스크탑 앱 만들기 #1 - Vue CLI + Electron

② 데스크탑 앱 만들기 #2 - ExcelJS, SheetJS, js-xlsx, js-xlsx-style

③ 데스크탑 앱 만들기 #3 - ipcMain, ipcRenderer

④ 데스크탑 앱 만들기 #4 - ExcelJS, ipcRenderer, ipcMain, removeListener

 

 저는 직장인입니다. 직장에서 근무를 하면 매일 작성해야 하는 문서들이 있죠. 매일 작성하다 보니 그런 생각이 들었습니다.

 

반복 작업하는 거 귀찮다.. 

 

 그래서 만들었습니다. 적당한 값을 입력받으면 나머지 파일에 그 정보들을 뿌려주는 방식이었습니다. 그런 것이 가능할 것이라고 생각할 수 있었던 계기는 웹사이트를 만들면서 다져진 것이랄까. 그 정도는 가능하지 않을까 하는 생각에 시작을 해보았습니다.

---

대략적인 프로그램의 내용은 다음과 같았습니다.

 

1. 프로그램을 실행한다.

2. 자동으로 엑셀 파일(6개)을 불러온다.

3. 그날 업무내용을 양식에 입력한다.

4. 입력한 내용을 적절히 엑셀 파일에 뿌린다.

5. 끝.

 

데스크톱 프로그램을 만들기 위해 electron이 필요하고, VueJS에 익숙하니 누군가 두 가지를 섞어 놓은 것이 있지 않을까 싶어서 검색!

 

electron-vue

 그리고 찾아냈습니다. 문서도 깔끔하게 되어있고 GitHub Star도 12,000개가 넘어 바로 설치를 해보았고 내용을 좀 살펴보다가 결론을 냈습니다.

 

탈락!

 

 이유는 electron이 2.0.4 version으로 설치가 되어서입니다. 최근 버전이 9.0.1인데 잘 모르지만 뭔가 문제가 생길 것 같은 느낌이 들어서 무서웠어요(문서를 작성하고 있는 2020.9.1 현재 10.1.0 버전까지 나왔습니다).

 

 그럼 이제 electron 최신 버전을 유지하면서 VueJS를 사용하는 방법이 무엇인가를 검색하다가 Vue CLI에 electron builder를 덮어 씌우는 방식으로 만들 수 있는 방법을 찾아냈습니다.

 

Vue CLI Plugin Electron Builder

 Vue CLI는 VueJS를 표준화된 방법으로 시작할 수 있게 도와주는 데(여기서 CLI는 Command Line Interface를 말합니다) 맥의 경우 터미널에서, 윈도는 command창을 이용해서 쉽게 프로젝트를 시작할 수 있게 만들어줍니다.

 

 먼저, Vue CLI를 설치하고,

// 이미 설치되어 있으면 패스!
npm install -g @vue/cli
// OR
yarn global add @vue/cli

 

 그리고 잘 설치되어 있는지 확인!

vue --version

 

 저는 4.1.1 버전이지만 2020년 9월 1일 현재 4.5.4 버전이 최신입니다. 그럼 이제 버전 확인이 잘 되었으면 테스트 프로젝트를 하나 만들어볼게요. vue-electron-test 프로젝트를 만들어보겠습니다.

vue create vue-electron-test

 

 

 이것저것 설치하라고 나오는데 저는 코딩 습관을 누가 잡아줘야 하니까 Linter도 깔고, Router와 Vuex도 쓸 거 같으니까 같이 설치를 합니다. 그 이후에도 뭐 이것저것 물어보는데 ESLinter standard만 고르고 나머지는 계속 엔터 쳐서 넘겼습니다.

 

 여기에 electron builder를 입혀봅시다.

// 프로젝트 폴더로 이동
cd vue-electron-test
// electron builder 설치
vue add electron-builder

 

 설치를 시작하면 electron version을 선택하라고 나옵니다. 7, 8, 9 버전이 있으니 혹시 electron 이전 버전에 익숙한 분은 선택하시면 될듯합니다. 하지만 저는 잘 모르니까 최신의 안정적일 것 같은 9 버전을 선택합니다.

 

 

electron builder 설치 전(좌)과 후(우)

 electron builder를 설치하게 되면 노란색으로 보이는 파일 내용이 변하고 초록색 파일은 background.js파일이 생깁니다. 바로 이 파일이 데스크톱 앱에서 우리의 컴퓨터를 컨트롤해줄 영역이죠. 웹 앱으로 치면 backend 정도가 되겠습니다.

 

그리고 실행!

npm run electron:serve
// OR
yarn electron:serve

 

 짜잔!

성공!

---

다음 : 데스크탑 앱 만들기 #2 - ExcelJS, SheetJS, js-xlsx, js-xlsx-style

 

만드는 시간이 길어질수록 그냥 엑셀 파일에 데이터를 직접 넣을걸 하는 후회가 밀려왔다.