Electron과 Vue, Vuetify로 만든 Cross Platform Tizen Log Viewer - T.Viewer 개발일기의 두번째 이야기

electron을 검색해보면 국문 블로그 글이 그렇게 많지는 않다. 우리나라에서 개발된 대부분의 데탑용 앱은 업무용이나 상업용이라서 그런것 같다. 근데, 블로그의 글을 보지 않고도 혼자 할 수 있을 만큼 공홈의 내용이 좋다. 정리가 잘 되어 있다! 내 블로그 글들을 보면 알겠지만 나는 가능하면 내 경험을 끄적이고 자세한 내용은 공홈을 참고하라고 얼버무리는 식이다. 시간이 지나면 내 포스팅은 유지 보수가 않되지만 공홈의 내용은 계속 관리가 되기 때문이다. 공식 홈페이지 문서를 읽어보자!

첫 앱을 만들기

많은 개발자들이 하듯이... 헬로 월드 먼저 한 번 찍어 봤다. 간단하다. 쉽다. 신기하다. 간단하게 성공. 별거 아니군. 훗.

첫 앱은 쉽게 만들었지만, 테스트, 배포 등과 관련된 프로젝트 구성을 어떻게 할 것인지 막막한 느낌이 든다. 이럴땐 적당한 레퍼런스를 찾아서 컨닝하는 것이 정신 건강에 도움이 된다.

나는 깃헙 데스크탑 앱을 컨닝하기로 했다. 물론 훨씬 크고 이미 최적화된 프로젝트라서 설정들을 바로 가져다 쓰기는 무리다. 하지만 이미 성숙된 프로젝트이기 때문에 상당히 검증된 구조라는 것이 큰 메리트를 갖기 때문에 적당히 필요한 것을 참고해서 적용하는 것이 좋다. 그대로 가져다 쓰려면 quick-start 류의 템플릿이 많이 있지만, 나는 뭐든지 그대로 가져다 쓰는 것은 선호하지 않는다. 당장은 빠르게 셋업 할 수 있더라도 언젠가 동일한 댓가를 치뤄야 한다는 것을 몇번이나 경험했다!

패키징 설정

패키징을 위한 툴도 많이 있어서 놀랐다. 많으니까 오히려 비교해보고 선택하는 것이 귀찮기도 했다. 나는 electron-builder를 선택했다.

A complete solution to package and build a ready for distribution Electron app for macOS, Windows and Linux with “auto update” support out of the box.

대충 적용하고 빌드해보니 exe 파일이 나왔다. 시간이 오래 걸렸는데, 40메가다.ㅋㅋ 웹 엔진을 가지고 있으니까.ㅎ

너무 쉽게 나와서 신기하다. 이번에 알게된 사실은 installer 영역이 상당히 복잡한 부분이라는 것이다. 분명 신경을 더 써봐야 할 부분이지만...일단 묻고 다음으로 넘어간다. nsis에 대한 재발견...ㅎ

테스트는?

간단하게 단위 테스트만 적용할까 한다. 통합 테스트는 사용자를 통해서 진행하는 것으로ㅋㅋㅋ

어떤 테스트 FW을 사용할까 좀 찾아봤는데, 요즘 jest가 매력을 발산하고 있는 것 같아서 초이스 해주기로 했다. 페이스북에서 만든 오픈소스 프로젝트이며 무엇보다 줄거운 테스팅 프레임웍이라는 캐치프레이즈가 마음에 들었다.

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

jest에 대해서는 국문 친절하게 작성된 포스트를 소개하고 넘어간다. Jest로 기본적인 테스트 작성하기

정적분석

javascript 정적 분석을 위해서는 eslint를 사용하기로 했다. 바로 적용하려했는데, 뒤에 이어질 vue랑 같이 적용하는 것이 좋을 것 같아서, 그냥 좀 훑어보기만 하고 넘어간다. 오래전에 lint를 접했을 때는 별로 도움이 안될 것 같았는데, 대충봐도 많이 좋아진 느낌이다. 야호!

마치며

오랫만에 다시 작업을 하게되었다. side project로 진행하다보니, 우선 순위가 많이 밀려서 바쁠때는 한없이 밀리는 것 같다. 그래도 최소한의 일정과 목표를 잡아야 진행이 순조롭게 되는것 같아서, 다음번에는 일정을 한번 다시 정리 해야겠다. 그때까지 몸 건강히 즐겁게 프로그래밍 하자!