나는 깃허브로 리액트 웹페이지 배포하는 법을 아주 자세히 써놨고..
이후로도 이 방법으로 잘 배포해왔는데...
2021.12.03
갑자기 이상한 오류가 생겼다
오류 발생
정말 잘 빌드 되던 내 프로젝트,,
gh-pages 설치하고 scripts 작성까지 해도
npm start 하면 잘 나오다가
homepage : "https://seondal.github.io/레포지토리이름"만 추가하면
npm start를 해도 하얀 화면만 뜨는 것이였다..
해결 방법 1
구글링으로 얻어낸 소중한 스오플
"homepage" : "https://깃허브아이디.github.io/레포지토리이름/"갑자기 평소 github 배포하기 위해 추가하던 homepage 스크립트에
"homepage" : "."이걸 쓰란다...
시키는대로 했더니 npm start도 잘 되었다.
이러면 배포는 어떡하지? 싶었는데 방법이 있긴 했다.
Browser Router 를 사용한 경우 위 링크에 나온 방식으로 진행 해야 하는데.. 너무 복잡하고 수정사항이 많아서 기존 방법을 사용하는 방법을 알아냈다.
해결 방법 2
결국 예전방법으로 쓰는 법을 알아냈다
알고보니 Hash Router를 사용하지 않아서 생긴 문제였다 ㅠㅠ
홈페이지를 설정하면 그 경로에서 시작하는데 이게 SPA가 지원을 하지 않아서 아무것도 뜨지 않고 흰 화면만 나타난것..
그말은 HashRouter를 사용하면 오류를 해결할 수 있다는 뜻이다.
import { HashRouter as Router, Route, Routes } from "react-router-dom";맨 위에 임포트 한줄 추가했더니 기존 방식대로 편하게 성공했다.
결론
뭔가 새로운 기술을 배우면 확실하게 공부하고 알고쓰자
Router 를 그냥 필요할때만 따라치니까 내가 쓰던게 HashRouter 인지 BrowserRouter 인지 구분도 못하는 그런 대참사가 일어난거다..
갈길이.. 멀다..ㅠ
