아리콩다리콩의 즐거운 코딩생활

생소해서 어려운. 하지만 의외로 쉬운.

링크

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

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

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

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

 위 포스팅에서 Vue CLI를 이용해서 frontend(renderer)를 만들고, electron-builder를 이용해서 backend(Main)를 만들었습니다. 그리고 excel 파일을 읽는 라이브러리를 ExcelJS를 이용해서 로딩에 성공하였으니 이제 이 객체를 frontend로 보내줘야 데이터를 가지고 이것저것 만지작 거릴 수 있겠죠? 그 이후에 만지작 거린 객체를 다시 백엔드로 보내서 엑셀 파일에 저장해주면 제 프로젝트가 성공하게 됩니다.

 아, 그 전에 애초에 frontend에서 파일을 읽고 바로 수정하면 되지 않냐 생각도 했었는데 시스템 안에 있는 파일을 직접 읽고 쓰기 위해서는 일렉트론 같은 시스템 프로그램이 필요하더라구요. 시스템 프로그램이 없으면 프로젝트 로컬 폴더 안에 있는 내용만 접근 가능하고, 폴더 밖에 있는 파일들은 접근이 안되니 업로드하는 방식으로 밖에 없는 것 같았습니다. 애초에 기획이 자동화니까 일렉트론을 쓰기로 결정했었죠.

 그럼 이제 본격적으로 fontend와 backend의 데이터 교환 방법을 알아보겠습니다.

 일렉트론 공식 문서에 뭐라고 설명되어있는지 부터 확인하고 갈게요!

★ ipcRenderer - renderer 프로세스에서 main 프로세스로 비동기적인 통신을 합니다.

★ ipcMain - main 프로세스에서 renderer 프로세스들로 비동기적인 통신을 합니다.

 내용만 봐서는 뭔지 정확히 감이 오질 않습니다. 혹시 Javascript 좀 해보신 분들은 좀 익숙하실지도 모르겠습니다. 웹페이지에서 event emit, listen과 많이 닮아 있다고 생각이 들었거든요.

 그럼 공식 문서에 나와있는 테스트 코드를 확인해봅니다.

 다음 코드는 frontend에 있는 아무 파일에 넣으면 되는데 저는 App.vue 파일에 넣어서 테스트를 해보겠습니다.

// renderer 프로세스(웹 페이지)안에서
const { ipcRenderer } = require('electron')
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // "pong"이 출력됩니다.

ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log(arg) // "pong"이 출력됩니다.
})
ipcRenderer.send('asynchronous-message', 'ping')

 ipcRenderer 테스트 코드에서 사용된 메소드는 on, send, sendSync로 3가지입니다.

- on: backend에서 frontend로 통신을 시도하면 받아 주는 메소드

- send: frontend에서 backend로 통신을 보내는 메소드

- sendSync: send메소드는 비동기적으로 보내지고, 이 메소드는 동기적으로 작동한다(동기, 비동기는 여기서 설명하기엔 내용이 복잡해지므로 패스!).

 아래 코드가 backend 파일인 background.js에 들어갑니다.

// main 프로세스안에서
const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg) // "ping" 출력
  event.reply('asynchronous-reply', 'pong')
})

ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg) // "ping" 출력
  event.returnValue = 'pong'
})

 ipcMain 테스트 코드에서 사용된 메소드는 on, reply로 2가지입니다.

- on: frontend에서 background.js로 통신을 요청하면 받는 주는 메소드

- reply: on이 성공하면 frontend로 다시 통신을 넣어주는 메소드

 위의 테스트 코드를 실행했을 때의 결과는 다음과 같습니다.

▶︎ frontend(renderer) side

▶︎ backend(main) side

 frontend에서 pong 두 번, backend에서 ping 두번이 로그에 출력이 되었네요. 보내고 받고를 두번 했다는 뜻인데 코드를 한번 살펴볼게요.

 빨간색은 비동기(asychronous) 통신을 나타내고, 파란색은 동기(synchronous) 통신을 나타냅니다. 두 가지의 통신을 테스트하는 코드였네요. 그래서 frontend와 backend 콘솔에 pong이 2개, ping이 2개가 출력된 것입니다.

 자세히 좀 볼까요?

▶︎ 비동기 통신(분홍색, asychronous)

① frontend에서 ipcRenderer.send 메소드를 'asynchronous-message' 채널을 통해 'ping'이라는 데이터를 backend로 보냅니다.

② backend에서 ipcMain.on 메소드에서 정의한 'asynchronous-message' 채널을 통해서 인자를 받고 콘솔에 출력하네요.

③ 그리고 바로 ipcMain.reply 메소드를 'asychronous-reply' 채널을 통해 'pong'이라는 데이터를 frontend로 보냅니다.

④ 마지막으로 frontend에서 ipcRenderer.on 메소드를 통해 정의된 'asychronous-reply' 채널을 통해 받아진 'pong'이라는 데이터는 콘솔에 출력되는 것으로 끝이 납니다.

▶︎ 동기 통신(파란색, sychronous)

① frontend에서 ipcRenderer.sendSync 메소드를 'synchronous-message' 채널을 통해 'ping'이라는 데이터를 backend로 보냅니다.

② backend에서 ipcMain.on 메소드에서 정의한 'synchronous-message' 채널을 통해서 인자를 받고 콘솔에 출력하네요.

③ 그리고 event의 returnValue를 'pong'으로 입력하면서 자동적으로 frontend로 데이터가 리턴됩니다.

④ 마지막으로 frontend로 ipcRenderer.sendSync의 리턴 값이 'pong'으로 전달되었고 바로 콘솔에 출력됩니다.

 어떤가요? 일렉트론의 frontend와 backend이 통신을 어떻게 하는지 같이 살펴보았는데 이해가 되셨으면 좋겠네요. 저는 테스트 코드를 해보면서 생각보다 쉽다는 생각을 했습니다. ipc라는 용어 자체가 헷갈릴 뿐이죠.

 그럼 다음 포스팅에서는 제 프로젝트에서 ExcelJS와 ipcMain, ipcRenderer를 이용해서 어떻게 구현하였는지, 그리고 Listner가 중첩돼서 중복적으로 통신 이벤트가 발생하는 현상을 수정하는 방법들을 적어보도록 하겠습니다.

※ 동기와 비동기의 차이점은 생활코딩님께서 영상으로 너무 잘 설명해주셔서 링크를 남깁니다. 영상은 개념 설명이고 아래 더보기에 강좌 링크는 남겨놓았으니 동기, 비동기가 궁금하신 분은 참고해주세요!

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

더보기 : 생활코딩 - nodejs에서의 동기, 비동기, 콜백

프로젝트가 끝나갈 무렵, 코딩은 참 즐겁다는 생각이 들었다.

어떤 라이브러리를 쓰는 것이 좋을까?

링크

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

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

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

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

 6개의 엑셀 파일에 데이터를 매일 집어넣는 게 귀찮아서 시작한 데스크톱 앱 만들기 2탄입니다. 이번 글에서는 엑셀 파일을 일렉트론 background.js(웹앱으로 치면 backend 또는 server)로 불러오는 작업을 실행해볼 겁니다. 방대한 JAVASCRIPT 생태계에 분명 이와 관련된 라이브러리가 있을 거라고 생각했습니다. 그리고 구글링을 시작했죠. 그리고 처음 발견한 라이브러리가 SheetJS입니다.

 결과적으로 저는  ExcelJS 라이브러리를 사용하고 있습니다. 이유는 스타일 오류 때문입니다.

 SheetJS는 엑셀을 JSON 형식으로 뽑아서 읽고 쓸 수 있다는 점은 정말 편리합니다. 보기에 익숙하니 그 장점이 컸었죠. 엑셀 파일을 읽어서 JSON 형식으로 읽어오는 데는 대부분 문제가 없었습니다. 문제는 쓰기에서 발생했죠.

  위처럼 데이터가 들어간 부분의 대부분이 검은색이 되어버렸습니다. 고칠 방법을 찾아 이리저리 헤맸더랬죠. SheetJS에서 문제가 발생했으니 혹시 다른 라이브러리를 적용하면 어떨까 해서 js-xlsx도 써보았습니다. 하지만 결과는 같았죠. 더 찾아보니 xlsx-style 라이브러리도 있다길래 희망을 가지고 추가로 사용해보았습니다. 역시 실패.

 그리고 혹시나 SheetJS의 유료버전은 어떤가 싶어서 가격 정책을 알기 위해 구글링 해보았으나 찾는데 실패. 그래서 직접 이메일을 보내보았습니다. 답변은 

가격은 "누가"(회사 내부, 다른 회사의 계약 작업, 고객 대면, 공개), "무엇"(아래에 설명 된 기능 세트) 및 "어디"(서버 측 또는 브라우저 또는 인앱)에 따라 다릅니다.

라고 왔습니다.

 혼자 쓸꺼니까 얼마냐고 물어보려다가 왠지 비쌀 거 같기도 하고 굳이 돈을 내면서까지 만들어야 하나 생각도 들고 귀찮기도 해서 참았습니다. 그리고 첨부된 PDF 파일에 프로 버전에 대한 설명이 있었는데요.

 네, 돈주면 cell backgrounds와 borders를 customize 할 수 있다고 합니다. 회사에서 프로젝트를 받아서 만든다면 SheetJS 프로 버전도 써보고 싶다는 생각이 들었습니다. JSON은 편리하거든요.

 어쨋든 실패하고 다시 찾은 라이브러리가 ExcelJS입니다. 깃헙에 들어가서 쭉 읽어보니 코딩 초보인 저에게는 SheetJS보다 확실히 어려운 코드들이었습니다. 그래도 어떻게 하겠나요. 이 또한 넘어야 할 산인 것을.

 먼저 설치!

npm install exceljs
// or
yarn add exceljs

 background.js에 임포트 해줍니다. 파일을 로드할 거니까 경로 관리를 쉽게 하기 위해 path도 임포트 합니다.

import path from 'path'
import ExcelJS from 'exceljs'

 그럼 하단에 async function을 하나 만들어줍니다. 파일을 읽는 동안 기다려주지 않으면 오류를 내뿜거든요.

const filePath = '/Users/username/filepath/filename.xlsx'

async loadExcelFile(filePath) {
	const workbook = new ExcelJS.Workbook()
	await workbook.xlsx.readFile(filePath)
	const worksheet = workbook.worksheets[0]

	console.log(worksheet)
}

loadExcelFile(filePath)

 아래처럼 Worksheet 객체가 소환되면 성공!

 이제 객체에서 행(row)과 셀(cell)을 순회하면서 값을 받아오겠습니다.

const filePath = '/Users/username/filepath/filename.xlsx'

async loadExcelFile(filePath) {
	const sheetData = [] 

	const workbook = new ExcelJS.Workbook()
	await workbook.xlsx.readFile(filePath)
	const worksheet = workbook.worksheets[0] // 첫 번째 sheet 선택
    
	const options = { includeEmpty: true }

	await worksheet.eachRow(options, (row, rowNum) => {
		sheetData[rowNum] = []
		row.eachCell(options, (cell, cellNum) => {
			sheetData[rowNum][cellNum] = { value:cell.value, style:cell.style }
		})
	})

	console.log(sheetData)
}

loadExcelFile(filePath)

 ExcelJS 라이브러리에서는 eachRow를 이용해서 각 행을 순회하면서 값을 가져오고, 각 행을 돌 때 다시 row객체에서 eachCell을 이용해서 각 cell의 내용을 가져옵니다. 행 또는 셀의 내용을 가져올 때 빈 셀의 값과 스타일도 가져오고 싶다면 options에 includeEmpty를 true로 설정하면 됩니다.

 이제 콘솔 창을 보면 잘 다듬어진 결과값이 보입니다. 깔끔하지요?

 다음 포스팅에서는 이 결과값을 가지고 FrontEnd와 BackEnd 사이에서 통신하는 방법인 ipcMain, ipcRenderer에 관해 다뤄보겠습니다. 그럼 안녕히!

다음 : 데스크탑 앱 만들기 #3 - ipcMain, ipcRenderer

오늘도 하나 해냈다..

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

링크

① 데스크탑 앱 만들기 #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에 익숙하니 누군가 두 가지를 섞어 놓은 것이 있지 않을까 싶어서 검색!

 그리고 찾아냈습니다. 문서도 깔끔하게 되어있고 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는 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를 설치하게 되면 노란색으로 보이는 파일 내용이 변하고 초록색 파일은 background.js파일이 생깁니다. 바로 이 파일이 데스크톱 앱에서 우리의 컴퓨터를 컨트롤해줄 영역이죠. 웹 앱으로 치면 backend 정도가 되겠습니다.

그리고 실행!

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

 짜잔!

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

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