React 프로젝트가 로딩 되기 전에 Electron이 구동 되어 버릴 때 해결 방법

React 프로젝트가 로딩 되기 전에 Electron이 구동 되어 버릴 때 해결 방법

• React 개발 서버가 완전히 준비된 후 Electron 앱이 시작되도록 설정하기 위해 wait-on 도구를 사용할 수 있습니다.
• wait-on은 특정 URL, 파일, 또는 포트가 사용 가능해질 때까지 기다리는 데 사용되는 유틸리티입니다.
• 이를 통해 Electron 앱이 React 개발 서버가 완전히 준비된 후에 시작되도록 구성할 수 있습니다.

wait-on 설치

먼저 wait-on을 설치해야 합니다. 프로젝트의 루트 디렉토리에서 다음 명령어를 실행하세요:

npm install --save-dev wait-on

또는 yarn을 사용하는 경우:

yarn add --dev wait-on

설치가 완료되면, package.json의 scripts 섹션을 수정하여 React 개발 서버가 준비될 때까지 기다린 후 Electron 앱을 시작하도록 설정합니다.
concurrently를 사용해 두 명령어를 동시에 실행할 수 있습니다.

package.json 수정

{
  // ... 기타 설정

  "scripts": {
    "build": "tsc",
    "start": "nodemon",
    "dev": "concurrently \"yarn react:start\" \"wait-on http://localhost:3000 && yarn electron:start\"",
    "react:start": "react-scripts start",
    "electron:start": "electron ."
  },

  // ... 기타 설정
}

이 설정에 따라 yarn dev 또는 npm run dev 명령어를 실행하면 다음과 같은 프로세스가 진행됩니다:

1. concurrently가 "yarn react:start" (React 앱 시작)와 "wait-on http://localhost:3000 && yarn electron:start" (React 서버가 준비될 때까지 기다린 후 Electron 앱 시작)를 동시에 실행합니다.
2. React 개발 서버가 http://localhost:3000에서 실행되기 시작합니다.
3. wait-on이 http://localhost:3000이 사용 가능해질 때까지 기다립니다.
4. React 서버가 준비되면 wait-on이 완료되고, 이후 yarn electron:start 명령어가 실행되어 Electron 앱이 시작됩니다.

이렇게 설정하면, Electron 앱이 React 개발 서버가 완전히 준비된 후에 시작되도록 보장할 수 있습니다