Nextron ( Electron + Next.js ) 넥스트론 화면 생성 설정 변경하기 ( 리사이즈 변경 등 속성 )

안녕하세요

넥스트론이라고 하는 것은 electron + Next.js의 통합 패키지로, 웹 개발의 미래라고 불리는 SSR을 통해 데스크탑 앱을 작성하고 실행하는 것에 관련된 프로그램입니다.

 

RESTAPI와 REACT를 통해 직접 렌더할 수도 있으나, 저는 넥스트론이 편하더군요

 

https://github.com/saltyshiomix/nextron

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

넥스트론의 깃허브는 여기입니다

 

넥스트론을 사용하기 위해 설정하는 것은 매우 매우 간단합니다

 

# with npx
$ npx create-nextron-app my-app --example basic-lang-javascript

# with yarn
$ yarn create nextron-app my-app --example basic-lang-javascript

# with pnpm
$ pnpm dlx create-nextron-app my-app --example basic-lang-javascript

 

이런 식으로 공식 메서드와 EXAMPLE을 포함해 생성할 수 있기 때문에

EXAMPLE을 일종의 가이드로 코드를 작성하면 됩니다 ( git init 다시 하면 커밋도 편리해집니다 )

 

https://github.com/saltyshiomix/nextron/tree/main/examples

nextron/examples at main · saltyshiomix/nextron

이 주소로 가면 각종 예제 파일들이 놓여 있고

이부분에서 원하는  UI ( Chakra, Material, ANT Design 등 ) 이런 것을 고르시거나 추가로 옵션을 골라줍니다

 

이후에 설치 폴더로 들어가 npm install

npm run dev

를 실행해주면 윈도우 혹은 맥에서 스크린이 하나 뜨며 프로그램이 시작됩니다

 

코드 수정

const mainWindow = createWindow('main', {
    width: 1000,
    height: 600,
    resizable: false,
    center: true,
    backgroundColor: '#13264E',
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
    autoHideMenuBar: true,
  })

 

main > background.ts 파일을 열어보시면 위와 같이 preload.js를 통해 Next.js의 렌더러와 웹소켓 연결을 수행하는 파일을 불러오는 기능과

여기서 electron 의 옵션을 지정해 줄 수 있습니다

 

메뉴의 기능은 다음과 같습니다

width / height : 창 가로 세로 (픽셀)길이

resizable : 창을 늘릴 수 있도록 허용 여부 

center : 넥스트론 실행 시 항상 화면의 정 중앙에서 창이 뜨도록 허용

 

backgroundcolor : Next.JS와는 관계 없고, Preload.js 가 연결되기 전에 빈 하얀 화면을 #13264E 색상으로 대체하는 역할

autoHideMenuBar : 창 메뉴 끄기 ( file, exit 등 메뉴바 삭제 코드 )

 

else {

    const port = process.argv[2]
    await mainWindow.loadURL(`http://localhost:${port}/home`)
    // mainWindow.webContents.openDevTools()
    // disable web kit
    // mainWindow.autoHideMenuBar = true
  }
})()

 

그리고 조금 내려보면 위와 같은 코드가 있습니다

여기서 중요한 건 

mainWindow.webContents.openDevTools()

 

이 코드인데 이 코드를 주석처리하지 않으면 매번 넥스트론 실행 시마다 개발자 모드가 자동으로 열립니다

그런데 문제는 나중에 이걸 주석처리하고 개발자 모드를 실행하려고 하면 production 모드에서는 동작하지 않으니 참고