Electron with next.js = Nextron.js

* 개요

: 윈도우 응용프로그램을 개발할 때, 늘 그러하듯 C#을 벗어나기 어려웠다. 기술스택을 JAVASCRIPT 중심으로 커리어를 쌓고 있는 필자의 입장에서는 한가지에 집중하고 싶은 상황이다. 이런 상황에서 JAVASCRIPT 베이스로 윈도우 응용프로그램을 만들 수 있는 방법을 발견!! 그것은 바로 Electron이다.

 

* 특이사항

: 일렉트론 공식사이트 (https://www.electronjs.org/)를 통해 알아보고 튜토리얼을 따라 해보았다. 리액트 + 일렉트론 구성이었는데, 필자는 next.js + typecsript + tailwind에 익숙하여 이 기술 베이스로 해보려고 여럿 포스팅을 따라해 보았으나 쉽지 않았다. 수십번의 삽을 뜨면서 느낀점은... 아.. 누군가 보일러플레이트를 만들어 놓은게 없을까였다. 그런데!!! 진짜 있었다. npx 로 보일러플레이트를 만들어 놓은것을 발견하였고 사용 방법에 대해 기술하겠다.

 

* Nextron.js

: 앱 생성

npx create-nextron-app electron_demo --example with-tailwindcss basic-lang-typescript

 

https://github.com/saltyshiomix/nextron

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

 

* 폴더 구조

보일러플레이트가 있기 때문에 어려울게 하나도 없다. 위 명령어 대로 실행하면 아래와 같이 이상적인 폴더 구조로 설치가 된다.

이후 처리는 늘상하던 next.js 와 동일하다. 페이지에 화면 개발하고, 컴포넌트들 개발해주고, 단일서버면.. 뭐 앱라우팅, 페이지라우팅 이런거로 API 처리 해주고 그게 아니면 API 따로 분리해서 만들어 줘도 된다.

 

* 디버깅은?

: 응용프로그램이라고 하더라도 디버깅 완전 똑같이 된다. 어떻게? 아래와 같이

위에 mainWindow.webContens.openDevTools() 주석 열어주면 아래와 같이 크롬 디버깅 가능하다.

 

* 실행파일 빌드

: 윈도우에서 실행 가능한 exe 확장자 형태의 파일로 만들기 위해 아래와 같이 빌드 옵션을 넣은 npm 명령어를 package.json에 정의해 준다.

{
  "scripts": {
    "build": "nextron build",
    "build:mac": "nextron build --mac",
    "build:mac:universal": "nextron build --mac --universal",
    "build:linux": "nextron build --linux",
    "build:win32": "nextron build --win --ia32",
    "build:win64": "nextron build --win --x64"
  }
}

** 여기서 주의해야 할점은 윈도우 VSCode의 터미널에서 빌드 시 여러가지 권한 오류가 발생되었다. 구글링 해본바 권한 관련 오류 였기에, 터미널을 관리자 권한으로 실행하여 터미널에서 빌드 해줬더니 정상적으로 잘 되었다. 

 

 

* 후기

: 크로스 플랫폼이라 윈도우에서 개발하다 맥에서도 개발하고 너무 좋다.

: 웹개발할때 쓰던거? 그냥 다된다.

: 내가 익숙한 기술로 개발하니.. 생산성 터진다.

: (단점) 크로미움 엔진 위에서 돌기 때문에 느리다고들 하는데? 글쎄....?

: (단점) 여러 디바이스들이 붙은 응용프로그램을 개발할때는 여럿 허들이 있을수도 있을것 같지만 그 또한 방법이 있지 않겠는가? 

 

* 결론

: 그냥 이거다!