[데스크탑 애플리케이션: 01] Firebase + Nextron (Electron + Next.js)

* 기업의 코딩테스트 과제로 데스크톱 채팅 애플리케이션을 만들어보는 토이프로젝트를 진행해 보았다.

 

마지막으로 진행했던 토이프로젝트가 소켓 통신을 이용한 크롬 익스텐션 채팅 어플리케이션 이었던 만큼, 주어진 시간 (10일)내에 어느 정도 결과물을 보일 수 있었던 것 같다.

 

요구사항은 사용자 리스트 출력, 개인 메세지(대화), 그룹 메세지(대화)의 구현이었고, 데스크탑 애플리케이션을 만들어 보는 것 이었다.

 

Javascript를 이용해서 만들 수 있는 데스크탑 애플리케이션은 Electron이 있다. 그 중, React (SSR 기반의 Next.js)를 이용해야 하기 때문에 Next.js와 Electron을 합친 템플릿(Boilerplate)을 제공해준 Nextron 오픈 소스를 활용하였다.

 

https://github.com/saltyshiomix/nextron

GitHub - saltyshiomix/nextron: ⚡ Next.js + Electron ⚡

 

Nextron을 활용하면서, 디자인은 자유형식이었고, 오픈소스 제공자가 다양한 UI 라이브러리 고려해 두었기 때문에, 함께 사용하게 되었다.

(개인적으로 MUI를 선호하지만, MUI는 버전 충돌이 일어난다... 시간을 크게 쏳고 싶지 않고, 최근 인기가 많은 ant design을 활용하게 되었다)

 

# with npx
$ npx create-nextron-app my-app --example with-javascript-ant-design

# with yarn
$ yarn create nextron-app my-app --example with-javascript-ant-design

# with pnpx
$ pnpx create-nextron-app my-app --example with-javascript-ant-design

이때, TypeScript도 요구사항이어서, 함께 사용하였다.

 

솔직히... 아직 타입스크립트는 걸음마를 땐 아기만큼 한다... 무지성 타입 & 인터페이스 지정으로 때려박았다...

 

프로젝트를 생성하고 나면, Next.js를 사용해본 사람이라면, 굉장히 익숙한 폴더구조를 확인 할 수 있다.

 

폴더구조

Next.js에 대한 지식은 더욱 정교하게 쌓은 후 정리하고자 한다. 각 폴더구조의 역할과 의미가 깊게 궁금하다면, 공식문서(https://nextjs.org/) 및 각종 블로그를 우선 검색하는 것을 추천한다.

 

app: background.js와 각 페이지의 html을 포함한다

 

dist: 빌드 과정을 거친 후 생성되는 폴더이다. OS에 맞는 데스크탑 애플리케이션 파일이 생성된다. 해당 프로젝트의 경우, mac용 dmg 파일을 생성해준다.

 

main: background.ts와 helpers 폴더를 갖는다. 해당 폴더에는 애플리케이션의 윈도우 창 설정 (x 크기, y 크기 등)을 할 수 있다. 해당 폴더의 create-window.ts 파일에서 setResizable(false)를 통해, 애플리케이션의 크기를 고정시켰다.

 

renderer: 실제 렌더링에 사용되는 폴더이다. 다음과 같이 구성되었고, 일부 추가하였다.

 

renderer 폴더

common 폴더에는 자주 사용하게 되는 api & 라이브러리를 추가하였다.

 

component에는 page외의 컴포넌트들을 담았다.

 

page에서는 SSR의 대표적인 페이지들이 담겨있다. Next.js와 똑같이 file-system based router가 내장되있다.

 

 

기본적으로, Client Side Routing을 위한 Link 태그는 사용되지 않았다. page와 component의 depth가 깊지 않을 뿐더러, 메인 스크립트가 곧 애플리케이션의 전부가 되기 때문이다.

 

기본적으로 세팅한 프로젝트에서 다음 명령어를 통해 어플리케이션을 돌려볼 수 있다.

npm run dev

원하는 템플릿에 맞춘 기본 페이지가 로딩되겠지만, 우선 결과창을 소개하며 이번 포스트를 마치고자 한다.

애플리케이션 첫 로그인 페이지

로그인 이후 페이지 중 유저 목록 컴포넌트

채팅 컴포넌트

채팅방 컴포넌트

그룹 채팅 컴포넌트

그룹 채팅방 컴포넌트