평생 공부만 해야할듯

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 명령어를 입력하시면 프로그램이 정상적으로 실행되는것을 확인할 수 있습니다.

React 로 웹 페이지를 작업하고 있고, 간단하게 테스트 프로젝트를 배포하기 위해 Firebase Hosting 서비스를 자주 사용하고 있습니다.

# 문제

React환경에서 React Router를 사용하여 페이지를 보여주고 있는데요, 로컬 환경에서 잘 되던 페이지 이동이 Firebase Hosting에 올라가면 404 Page Not Found가 발생합니다.

무조건 발생한건 아니고 특정 /example/1 이런식의 / 루트가 아닌 경로로 접근해서 브라우저를 새로고침 하면 /example/1이라는 경로에 해당하는 파일이 없기 때문에 오류를 발생하는거죠.

# 문제해결

이런 오류를 해결하기 위해서는 React Router 환경에 맞게 firebase.json을 수정해줄 수 있습니다.

아래와 같이 rewrites 부분을 추가 하여 모든 요청에 대해서 /index.html 을 바라보도록 수정하면 해당 오류는 발생하지 않습니다.

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

이런 오류를 그냥 넘기지 말고 해결해두면 개발자의 입장에서 신뢰도가 올라갈 것이라고 생각합니다 :)