electron + react 초기세팅

OS: Windows
Node.js 버전: v18.17.0
Electron 버전 : v25.4.0
CRA로 진행

일렉트론은 Javascript, CSS, HTML을 사용해서 데스크톱 응용프로그램을 만들 수 있는 프레임워크이다. 
Chromium과 Node.js를 바이너리에 내장하여서 하나의 JS 코드를 가지고 Windows, macOS, Linux에서 작동하는 크로스 플랫폼 앱을 만들 수 있다. JS 하나만 배워도 웹/모바일앱/데스크톱앱도 만들 수 있다니,, 좋은 세상,,

공식문서와 구글 검색으로 진행했고, 혹시나 나처럼 해매시는 분이 계실까봐 글을 작성한다!
Node.js 를 v18.17.0 버전으로 설치하고 진행했고, 에디터는 visual studio code를 사용했다.
글고 yarn으로 진행해서 npm install yarn 으로 yarn도 추가해주세요~~

1. 먼저 Create react app을 사용해서 리액트 프로젝트를 생성한다.

npx create-react-app 앱이름
cd 앱이름

2. visual studio code를 켜고 [view]->[Terminal] 을 클릭해 electron을 설치해준다.

npm install --save-dev electron

3. root 폴더에 main.js 를 생성하면되는데, 나같은 경우는 electron 폴더를 생성하고 그 밑에 main.js 를 생성했다.

4. main.js 에 해당 코드를 넣어준다.

const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url')

const createWindow = () => { // (1)
  const win = new BrowserWindow({
    width: 1024,
    height: 768,
  });
  
  const startUrl = process.env.ELECTRON_START_URL || url.format({  // (2)
    pathname: path.join(__dirname, '/../build/index.html'),
    protocol: 'file:',
    slashes: true
  });

  win.loadURL(startUrl);
};

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => { // (3)
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on('window-all-closed', () => { // (4)
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

(1) BrowserWindow는 앱을 실행하였을 때 브라우저 창을 만들고 제어한다. 다양한 옵션을 줄 수 있는데 옵션에 대한 설명은 링크를 참조하면 된다. 나는 윈도우 창의 사이즈를 조정하는 옵션만 주었다.

(2) 앱에서 보여줄 화면은 파일이나 url로 지정이 가능하다. 나는 loadURL을 사용했고 개발시에는 env에 설정한 변수값을 사용하고, 변수값이 없을 때에는 build 밑에 있는 index.html을 사용하게했다. 더 나은 방법이 있을 수 있지만 현재로서 개발시 hot-loading을 사용하기 위해선 localhost 를 참조하게 할 수밖에 없었다.

(3) electron이 초기화되면 createWindow() 함수를 호출하여 렌더러 프로세스를 생성하고, (3)의 경우는 macOS에서는 켜져있는 윈도가 없을 경우에만 open이 되어야해서 추가되었다. electron은 구동되는 OS에 따른 설정을 개발자가 설정하게끔했다. 

(4) 3과 마찬가지로 리눅스나 윈도우일 경우에는 모든 창이 닫히면 프로그램이 종료되도록 했다. darwin == macOS

 

5. 다음은 packages.json을 설정해준다. 먼저 electron이 참조할 main의 위치를 넣어준다. 나는 root에 electron 폴더를 생성하고 main.js 를 넣었기 때문에 그림과 같이 입력했고, 만약에 root에 바로 main.js 를 만들었다면 main.js만 입력해도된다. 그리고 homepage 는 ./ 로 명시한다.

scripts 부분도 수정을 해야한다. scripts 오브젝트내에 electron-start 속성을 입력하고 "set ELECTRON_START URL=http://localhost:3000 && electron ." 을 입력해준다.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "electron-start": "set ELECTRON_START_URL=http://localhost:3000 && electron .",
    "electron": "electron .",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

이건 react가 실행된 url 을 electron의 start url로 설정하고 electron을 실행하겠단뜻~
윈도우 설정이고, macOS에서는

"electron-start":"ELECTRON_START_URL=http://localhost:3000 electron ."

이렇게 입력해야된다.

 

6. 리액트 화면이 변경될때마다 electron 앱에서도 반영하고 싶어서 electron-reload를 설치해주었다.

yarn add electron-reload

 

그리고 main.js 에 설치한 모듈을 import 시켜준다.

require("electron-reload")(__dirname);

 

7. 리액트를 실행시켜주고, electron도 실행시켜서 제대로 되는지 확인한다. (동시에 실행되어야함, 터미널을 두개여세요)

yarn start --watch

yarn electron-start

App.js 에서 내용 좀 수정하면 디집어지게 잘 바뀌는 걸 확인할 수 있다.

7-1. 나는 리액트 실행때 브라우저가 자동으로 켜지는게 뭔가 킹받아서 root에 .env 생성해서 BROWSER=none 설정해줌

 

나는 이걸로 달력앱 만들어서 제일 만만한 투두리스트 만들거다. 후후 만만하다.. 후후..

만약 따라했는데 안되시거나 궁금하신거 있으면 자유롭게 댓글 달아주세요~~ 

 

그럼 안녕