[ electron-sample ] Electron + Typescript + React 셋팅

electron 으로 앱을 개발해야 할 때, typescript 와 react 를 사용해야 한다면 매번 일일이 환경 설정을 해주는 것이 불편할 것입니다. 그래서 electron + typescript + react 조합으로 이미 셋팅을 해놓은 제 개인 레포지토리를 공유드립니다.

 

레포지토리 주소

https://github.com/wisdomstar94/electron-sample

GitHub - wisdomstar94/electron-sample: 본 레포지토리는 일렉트론 샘플 프로젝트 입니다. 프론트는 리액트

본 레포지토리를 사용하는 방법에 대해서는 readme 내용을 확인하시면 됩니다.

 

본 레포지토리를 만든 이유

일렉트론은 javascript 만을 사용하여 window, mac, linux 에서 모두 동작하는 앱을 만들 수 있는 멀티크로스플랫폼 개발 도구입니다. 추후 제가 PC 앱을 개발해야 하는 상황이 생겼을 때 저는 일렉트론을 고려해 볼 것 같았고, 그 때 일렉트론 개발을 위한 환경 설정을 고민하고 작업하는 시간을 줄이고 싶어 미리 이렇게 환경 설정을 마친 샘플 레포지토리를 구성해놓고 싶었습니다. (나중에 이 레포지토리를 pull 받아 일부 값만 수정하여 바로 비즈니스 상품 개발에 들어 갈 수 있게 말이죠.)

 

프론트는 리액트로 셋팅

일렉트론은 Node.js 기반으로 PC 와 직접적으로 통신하는 메인 프로세스와 크로미움 브라우저로 화면을 보여주고 제어하는 렌더러 프로세스로 구분됩니다. 이 때 크로미움 브라우저로 보여줄 화면은 많은 개발자들이 사용하는 리액트로 작업 할 수 있도록 셋팅해 두었습니다. 부수적으로 요즘 화면 스타일링에 많이 사용되는 TailwindCSS 도 연동해두었습니다. :)

 

업데이트 파일 배포는 S3 와 연동

일렉트론 앱의 최초 배포가 이루어진 후 수정 된 것이 있다면 이 수정된 앱으로 사용자들이 업데이트 할 수 있도록 파일을 어떤 저장소에 배포해야 합니다. github 와 연동하는 방법도 있었지만, github 와 연동할 경우 용량 제한 이슈가 있는 듯 하여 AWS S3 와 연동하는 방법을 택했습니다. 또한 실서비스용 버킷과 업데이트 테스트용 버킷에 대한 설정을 별도로 두어서, 업데이트를 하는 것도 로컬에서 테스트 해볼 수 있도록 환경 설정을 해두었습니다. 

 

AWS 설정 방법 공유

아무래도 업데이트 배포시 S3 와 연동하다 보니 이와 관련하여 AWS 에서 몇가지 설정해야 할 것들이 존재합니다. 이 부분 역시 레포지토리의 readme 부분에 기재해 놓았습니다.

 

타입스크립트 셋팅

요즘 순수 javascript 로만 개발하기 보다는 typescript 로 개발하고 이를 javascript 로 변환하는 방식으로 많이들 개발하곤 합니다. 그렇기 때문에 본 레포지토리에서도 typescript 로 개발할 수 있도록 관련 구조를 미리 설정하였고, 관련된 스크립트도 미리 package.json 에 준비해두었습니다.

 

메인프로세스와 렌더러프로세스의 각 채널별 payload 자동 타입 추론 적용

이 부분이 사실 Typescript 를 사용하는 가장 큰 핵심이라 생각이 들었습니다. 일렉트론은 메인프로세스와 렌더러프로세스 간에 채널로 이벤트를 송수신 하는데, 이 때 채널에 따라 어떠한 데이터 구조로 통신되는지 자동으로 타입 추론이 되야 한다고 생각했습니다. 그래서 이 부분을 구현해 놓았고 자세한 부분은 readme 의 이곳을 참고하시면 됩니다.

 

마치며

미리 이렇게 일렉트론과 타입스크립트, 리액트 기반의 환경을 다져놓은 레포지토리를 준비해놓았으니 필요하신 분들은 본 레포지토리를 pull 받아서 본인들의 환경에 맞게 설정 값들을 조정하신 후 사용하시면 되겠습니다. 이 레포지토리가 많은 도움이 되었으면 좋겠고, 관련 의견은 댓글로 남겨주시면 감사하겠습니다.