리액트의 번들링과 웹팩에 대해서 학습하던 중 빌드까지는 완료했지만 깃허브 페이지에 올려도 로딩이 되지 않는 문제가 발생했다.
처음에는 추측해서 해결해보다가 console을 확인해보니 여러가지 문제들이 있었다.
초반에 자잘한 문제는 어떻게 해결했지만 net::ERR_ABORTED 404는 쉽게 해결되지 않았다.
정확하게 어떤 원인인지는 모르겠지만 404자체가 경로 문제라는 사실을 인지헀고 구글링을 통해 여러 사람들의 답변을 본 결과 아래와 같은 순서로 오류 해결작업을 진행했다.
1.경로가 잘 지정되야 하는데 만약 경로에 .js가 없는 상태라면 js를 추가해줘야한다.
import App from './App'; // =>
import App from './App.js';
2.manifest의 경로를 /manifest로 변경해줘야 한다.(index.html 내부값)
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> // =>
<link rel="/manifest" href="%PUBLIC_URL%/manifest.json" />
3.계속해서 되지 않아 검색해보니 net::ERR_ABORTED 404가 경로문제라는 사실을 재확인하고 config에서 html의 경로를 public이 아닌 src로 된 부분을 다시 수정했다.(이부분은 본인의 경로를 확인해서 맞는 위치의 파일을 불러와야한다)
template: './src/index.html' // =>
template: './public/index.html'
4.경로문제가 homepage를 설정해야 한다는 말이 있어서 package.json에서 "homepage": "https://ryujichang.github.io/Lottery-/"를 추가해 초기 주소값을 설정해줬다. => 성공
"homepage": "http://ryujichang.github.io" (미설정 기본값이 이것임을 콘솔에서 확인 후 아래로 변경) // =>
"homepage": "https://ryujichang.github.io/Lottery-/"
1,2번은 효과가 있는지 모르겠지만 3번의 config경로확인은 중요한 문제였으며 4번은 직접적으로 해결이 됐다.
마지막으로 4번은 깃허브에서 사용하는 레포지토리명이 있음에도 불구하고 레포지토리명은 생략한채 바로 /static으로 넘어가버려서 생기는 문제였기 때문에 레포지토리명을 중간에 포함시켜줬다(-/라고 된 것 처럼 페이지 주소값이 저렇게 되어있기 때문에 레포지토리명이 아니라 저렇게 넣어줘야 했다. 저 Lottery-/ 라는 추가된 부분은 페이지를 배포하려고 할 때 표기된다.)
