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

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

링크

① 데스크탑 앱 만들기 #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

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

이 글은 PHP 공식 문서 사이트에서 함수를 보는 방법을 담고 있습니다.

 생활코딩을 통해 웹페이지 만들기 코스를 졸업한 사람이라면 한 번쯤은 PHP공식문서 사이트에 접속해 본 일이 있을 겁니다. 혹시 한 번도 공식 문서 사이트에 접속한 적이 없는 분이 있을까 봐 링크를 아래에 남겨드릴게요.

 코딩을 하다 보면 막히는 구간도 많고 커뮤니티에 질문을 올리면 공식 문서 링크를 남겨주시는 분들이 많습니다. 처음 공식 접하는 분들께서는 보자마자 가슴이 답답해지는 것을 느껴보셨을 거예요. 그 답답함을 지금부터 하나씩 같이 해결해보죠.

 사실 저 같은 경우에는 공식 문서에 들어가서 함수를 검색하는 일은 거의 없었습니다. 당연하게도 구글 검색을 하는 게 더 간단하니까요. 구글은 위대합니다. 혹시나 네이버나 다음에서 궁금한걸 자주 물어보는 습관을 가지셨다면 코딩에 관해서는 그냥 구글 이용하세요. 두 번 추천드립니다.

 그럼 배열 안에 값이 존재하는지 확인하고 싶을 때 어떻게 하는지 한번 볼까요? "PHP 언어에서 배열 안에 값을 찾고 싶다!"라고 구글에 입력하면 여러 가지 결과가 나옵니다. array_search, in_array 정도가 나오는데 저희는 공식문서를 보면서 배울 거니까 Manual - PHP라고 쓰인 웹페이지를 클릭하세요. 그럼 in_array부터 살펴보겠습니다.

 이제 들어가면 처음 보는 분들은 네 번째 줄부터 처음 보는 형식이 신기할 것이고, 익숙하신 분들은 바로 사용 방법과 리턴 형식을 파악했을 겁니다. (참고로 in_array, array_search와의 차이점을 간단하게 설명드리면 in_array는 boolean(true, false)을 리턴하고, array_search는 찾고자 하는 value의 key값을 리턴합니다.)

가장 처음 보이는 내용은 in_array 함수의 정의입니다. 배열 안에 값이 존재하는지 체크하는 함수라고 적혀있군요.

 두 번째는 함수의 구성입니다. 익숙해지면 이 구성만 보고도 함수의 역할을 확실하게 알 수가 있습니다. 하나하나 살펴볼까요?

• in_array : 함수의 이름입니다.
• mixed $needle: $needle은 찾고자 하는 내용입니다. 앞에 mixed는 이 $needle이라는 값이 "혼합형", 쉽게 말해서 자료형이 문자열, 숫자 등을 가리지 않는다는 뜻입니다.
• array $haystack : 값을 찾고자 하는 대상 배열을 말합니다. 이 값은 array여야 한다고 명시가 되어 있으니 배열만 가능합니다.
• bool $strict = FALSE : strict는 엄격하다는 의미입니다. 이 값이 참일 경우 값을 찾을 때 값의 type(자료형)까지 확인한다는 내용일 것 같습니다. 아래 parameters(매개변수)에서 확인해보도록 할게요. 이 strict의 경우 중괄호([])로 감싸져 있는데 생략이 가능하다는 표현이에요. 생략할 경우 기본값은 FALSE로 설정되어 있군요.
• : bool : 마지막에 콜론 이후에 bool이라는 말은 이 함수의 결과 값이 boolean, 참 또는 거짓으로 나온다는 뜻입니다.

 대부분의 경우 구성 설명을 보고 바로 함수를 사용해보면 됩니다. 이후에 나오는 Parameters, 매개 변수에 대한 설명은 대략적으로 훑고 넘어가면 됩니다. 그리고 Note는 꼭 챙겨보세요. 놓치기 쉬운 내용을 알려주거든요.

 needle parameter에 Note가 있군요. needle이 문자열일 경우에는 대소문자를 구분한다고 합니다. 영문으로 된 문자열을 찾을 때는 주의를 해야겠네요. haystack은 배열이라는 내용이고, strict가 TRUE일 경우 haystrck, 즉 검사 대상이 되는 배열에 들어있는 값을 찾을 때 types(자료형)까지 확실하게 비교해준다고 하네요. 그럼 또 궁금해집니다. 이 strict라는 값이 FALSE일 때와 TRUE일 때 값이 어떻게 달라지는지 알고 싶어서 스크롤을 밑으로 내리다 보니 아래 이런 내용이 나오네요.

// Example array

$array = array(
    'egg' => true,
    'cheese' => false,
    'hair' => 765,
    'goblins' => null,
    'ogres' => 'no ogres allowed in this array'
);

// Loose checking -- return values are in comments

// First three make sense, last four do not

in_array(null, $array); // true
in_array(false, $array); // true
in_array(765, $array); // true
in_array(763, $array); // true
in_array('egg', $array); // true
in_array('hhh', $array); // true
in_array(array(), $array); // true

// Strict checking

in_array(null, $array, true); // true
in_array(false, $array, true); // true
in_array(765, $array, true); // true
in_array(763, $array, true); // false
in_array('egg', $array, true); // false
in_array('hhh', $array, true); // false
in_array(array(), $array, true); // false

 쭉 보니 충격적인 내용이군요. strict값을 설정하지 않고 기본값인 FALSE일 때 예제의 경우 모두 true를 리턴하는 것을 확인할 수 있습니다. TRUE로 설정해야 key값이 아닌 해당하는 value값이 있을 때만 리턴 값이 true로 나오네요. in_array함수를 사용할 때는 가능하면 Strict를 TRUE로 체크하는 습관을 들이도록 해야겠네요.

 여기까지가 알고 보니 간단한 PHP 공식 문서에서 함수 보는 방법이었습니다. 여러 함수 중에 이 함수를 선택한 이유는 개인적으로 자주 쓰기도 하고, 간단하고, 주의사항도 있어서 공식 문서의 필요성에 대해 생각해볼 수 있을 것 같아서입니다. 이 예제를 통해 공식 문서 보는 방법이 이해가 잘 되었으면 좋겠네요. 그리고 함수를 설명하다 보니 type(자료형)에 대한 내용과 함수의 구조에 대한 내용에 대한 글도 필요하다는 생각이 들었습니다. 다음 글은 좀 더 기본적인 자료형과 함수의 구조에 관해 글을 써봐야겠어요.

 더 자세한 내용은 생활코딩 이고잉님이 만들어주신 영상에서 확인하세요. 2012년 버전이라 조금 다르지만 큰 내용은 크게 다르지 않으니 도움이 될거에요.

 이해가 되지 않거나 잘못된 내용은 댓글로 알려주세요. 그럼 안녕히!