Nextron 프로젝트 생성 및 세팅 기록

1. Nextron은 next js 13버전을 호환하지 않는다.

이번에 새로운 프로젝트를 하게 되면서, nextron이라는 프레임워크를 사용하게 되었다.
Nextron이란 next js를 기반으로 윈도우 어플리케이션을 흉내낼 수 있는 프로그램을
만드는 것이다.

Nextron을 사용할 때 주의 해야 할 점이 있다면, 버전에 확인에 유의해야 한다.

나의 경우 처음에는 next 13버전을 nextron으로 패키징 하는 방법을 생각했는데,
패키징 함에 있어서, 어려움이 있었다.

(2023년 12월 5일 글임을 유의하세요)

그래서 nextron 자체를 npm으로 설치하였는데,

현재,
nextron의 최신 버전은 next js 12버전을 호환하고 있었다.
그러므로 모든 프레임워크를 사용하기 전에는 버전 확인 해야 한다.

2. eslint와 prettier tailwindcss를 사용하기로 결정

이번 프로젝트에는 eslint와 prettier도 적용해서 개발 환경에 도움을 주고
Style 라이브러리 같은 경우에는 tailwindcss를 적용하였다.
Tailwindcss는 여러 사람이 유지보수하는 데 장점이 됨으로 선택하였다

Javascript를 사용할 예정이기에 Nextron을 설치할 때, javascript를 사용하겠다는 명령어로 설치하였다.
( 명령어 : npx create-nextron-app . –-example basic-lang-javascript)

그리고 별도로 tailwindcss를 npm을 사용하여 설치하였다.
Tailwindcss 설치하고 tailwind.config.js도 생성하여 환경을 다 세팅하였는데,

적용이 안되는 문제가 있었는데,
그 부분은, global.css에 tailwind 관련해서 작성하지 않은 문장이 있었다.

3. 프로젝트 세팅을 하는 가운데에 있어서 몇 가지 조건이 있다.

1) 스크롤이 생기면 안된다.
2) Menu 바 사라지게 하기.
3) 창화면 크기에 따라, 글씨 크기를 포함한 UI가 유연해야 한다.

3번의 경우 따로 포스트를 하겠다.

1번과 2번의 경우 한 번에 문제를 해결할 수 있는 js 파일이 있다.
main > helpers > create-window.js 이다.

import { app, screen, BrowserWindow } from 'electron'

Electron의 BrowserWindow를 불러와
다음과 같이 설정해주면 된다.

 const win = new BrowserWindow({
    ...state,
    ...options,
    width: width,
    height: height,
    resizable: true,
    fullscreen : true,
    fullscreenable : true,
    autoHideMenuBar: true,
    maximizable : true,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      ...options.webPreferences,
    },
  })
  
  win.on('close', saveState)

  return win

주요 기능은 다음과 같다.

• Resizeable : 창 크기 조절 여부
• fulscreen : 초기 시작을 전체화면으로 할 것인가
• autoHideMenuBar : 메뉴 바를 제거 여부.

지금까지 새로 시작하는 프로젝트에서 사용하는
Nextron의 설정과 세팅했던 기록을 남겨보았다.

프로젝트를 세팅하는 데까지 많은 시도를 하였다.
이번 기록을 시작으로 프로젝트 잘 해보고 싶다!!