Electron 애플리케이션 개발 - 웹 기술로 구현하는 크로스 플랫폼 데스크톱 애플리케이션

 

회사에서 매일 업무 스케쥴을 작성하는데, 주간마다 이것들을 모아서 정리한 후에 보고를 해야한다.

그러다보니 귀찮은 일들이 발생하고..

이 부분을 개선하기 위해 어떤분이 (지금은 퇴사한..) 가공하여 추출하는 프로그램을 개발했었다. 

스위프트로 되어있었기때문에 내가 봐도 뭐 알길이 있나..ㅎ;

그래서 그냥 궁금했던 electron과 결합해서 가공, 추출하는 프로그램을 js로도 만들어보자 생각해서 책을 완독하게되었다.

책은 회사 책장에 꽂혀있었다. ㅎㅎ!

yes24 캡쳐

일단 2018년도에 제작된 책이라 특정 버전을 설치해서 진행해야하고 그럼에도 오류가 생기는 부분들이있었다.

그래서 그런 부분은 대략적으로 이해만 하고 넘어갔고, 나중에 보니 약간 다른부분들도 충분히 존재했다.

책을 굳이 안 읽고 dock을 읽고 블로거글들을 보면 이해하는데 문제가 없을 것 같았다.

 

예제 학습

https://github.com/leeyoonseo/study-electron

GitHub - leeyoonseo/study-electron: [학습] Electron 애플리케이션개발 - 웹 기술로 구현하는 크로스 플랫폼

 

electron에서 이해하기 어려웠던 부분은 당연 프로세스 부분이었다.

main process와 renderer process가 있고 main이 node, renderer가 chromium의 프로세스이다.

즉 main이 서버, renderer가 페이지..

이 두개를 이해하고 서로 통신하는데까지 약간의 시간이 걸렸다. 

이때 맥과 윈도우와 같은 os 적인 부분, 보안적은 부분등을 신경을 많이 써야할 것 같았다.

 

책을 다 읽고 난 후에 일렉트론을 설치해서 개발을 해보려고 했는데, 예전 버전과는 약간 달랐다.

reload라는 파일이 처음부터 생성되길래, 실제로 electron을 install한 순간부터는 그냥 공식문서를 봤다;

 

분명 renderer에서는 브라우저라서 전역변수나 그런것을 쓸 수 있을거라 생각했다.

안되는 이유가 있었고...ㅎ;

https://www.electronjs.org/docs/latest/api/context-bridge

contextBridge | Electron

 

그리고 책을 다 읽고 난 후에, 기존 개발자가 만들었던 코드들을 대략적으로 분석했다.

완벽하게 이해한 것은 아니지만 대략적인 로직은 아래와 같았다.

웹뷰를 통해 사이트 로드 -> api 호출 -> 응답데이터 가공 -> 추출

이러면서 웹뷰도 겸사겸사... 볼 수 밖에 없었다.

웹뷰가 없으면 보안상 접근이 불가능했다. (= 개발이 불가능...)

이 작업을 하면서 react로 하고 싶었는데, 요즘 vue로만 작업을 계속해서 react를 다시 보고 electron, webview까지 보면 헷갈릴 것 같아서 그냥 js로만 작업을 시작했다.

근데, 솔직히 react로 하는게 더 재밌고, 쉬웠을 것 같다.

 

내가 시작한 토이 플젝이 (=기존 스위프트로 개발된 프로그램, electron으로 따라 개발하기) 완성된 것은 아니다.

아직 데이터 가공을 안하고 있어서.. 노력해야지 으샤으샤..

아 그리구, 지금 하는 플젝은 아쉽게도 회사내에서만 사용가능한 것이라 보안적으로 접근이 안된다. (외부공개 불가)

이게 좀 아쉽기 때문에 책에 나온 채팅 앱 만들기 정도를 간단히 해보는 것도 좋을 것 같다고 생각했다.

채팅 앱은 꼭 react로 해야지..!!