평생 공부만 해야할듯

React + Electron 환경으로 프로그램을 만들어야 하는 일이 생겼습니다.

개발에서는 React 서버가 구동되고나서 Electron을 실행해야 정상적으로 프로그램에서 작동하는데요. 

이 부분을 한방에 처리하고자 했는데 wait-on 이후 실행이 되지 않는 문제가 있었습니다.

"scripts": {
    "start": "concurrently \"npm run react:start\" \"npm run electron:start\"",
    "electron:start": "wait-on tcp:localhost:3000 && mode=dev electron .",
    "react:start": "react-scripts start",
    "react:build": "react-scripts build",
    "build": "npm run react:build && electron-builder --publish=always"
  },

electron . 을 실행하면 정상적으로 프로그램이 실행되는데 wait-on으로 3000포트가 뜨는걸 기다렸다가 실행하는 부분은 계속 대기만 하고 있는 상태였습니다.

wait-on tcp:localhost:3000 && mode=dev electron .

검색 결과 Node 17에서는 아래와 같은 오류를 유발할 수 있는 주요 변경사항을 도입했다고 하는데요.

Error connecting to TCP host:localhost port:3000 Error: connect ECONNREFUSED ::1:3000

즉 localhost가 아닌 127.0.0.1 이라는 포트로 접근을 해야 됩니다.

"electron:start": "wait-on tcp:127.0.0.1:3000 && electron ."

이렇게 변경 후 다시 yarn start나 npm run start 명령어를 입력하시면 프로그램이 정상적으로 실행되는것을 확인할 수 있습니다.