문제 발생
프로젝트를 다 만들고 깃허브 페이지에 배포를 한 후 링크로 들어가보니
Failed to load resource: the server responded with a status of 404
라는 에러가 콘솔창에 뜨면서 흰화면만 보이는 문제가 발생했다.
아마도 이미지의 경로를 잘못 설정해서 뜨는 버그같다.
문제 확인
svg파일이 png파일보다 선명하게 나와서 이미지 대부분을 svg파일로 교체했다.
그런다음 svg파일을 이미지 태그로 넣었었는데 개발서버에서는
아무 문제가 없었으나 깃허브 페이지에선 이렇게 svg파일을 넣은 것 때문에
이미지를 찾지못해 콘솔창에 404오류가 난 것이었다.
package.json에 홈페이지 경로를 설정해준다음
npm start로 개발서버를 실행시켜보니 역시나 이미지가 다 깨진 상태였다.
문제 해결
ReactComponent를 이용해 svg파일들을 import 시켜준뒤
div로 감싸주고 이미지의 id를 div의 클래스네임과 똑같이 설정해주면
오류를 해결함과 동시에 설정해놓은 css도 적용이 가능했다.
그 외 해결책들
이렇게 모든 이미지태그를 저런식으로 바꿨는데 아직도 배포가 안되더라..
다음은 구글링하면서 얻은 해결책들이다.
해쉬라우터 사용
react-router-dom에서 HashRouter를 선언한다음 모든 라우트들을 감싸준다.
아이콘 지정
public>index.html에서 head태그 안에 아이콘을 지정하는 구문을 써줘야 한다.
이거 안쓰면 icon안정했다고 콘솔창에 오류가 뜬다.
배포
0. 작업완료 후 커밋
위에서 알려준 모든 작업들을 다했으면 설정해둔 branch에 commit을 해준다.
1. 깃허브 페이지 설치
npm i gh-pages 를 터미널에 입력해 gh-pages를 설치해준다.
2. 홈페이지 url설정
package.json에 "homepage": "https://깃허브유저네임.github.io/깃허브레포지토리이름" 라는 구문을 추가해준다.
3. 배포 설정
“deploy” : gh-pages -d build
“predeploy” : “npm run build”package.json의 scripts안에 위 2줄의 구문을 추가해준다.
4. build하기
터미널에 npm run deploy를 입력한다.
프로젝트의 레파지토리에 들어가 Settings를 누른다.
왼쪽 탭에서 Pages를 누른다.
Branch를 gh-pages로 변경하고 좀 기다리면
배포 링크가 뜨게 된다. 저 링크 눌러서 배포된 페이지 확인해 보면 된다.
배포링크공유
레파지토리로 다시 돌아가서 우측 상단을 보면 About이라는게 있는데
저 톱니바퀴를 클릭해준다.
페이지배포 후 저 체크박스 클릭해준다음 save해주면
타인이 내 레파지토리에 들어왔을 때 링크를 타고 프로젝트를 확인할 수 있다.
후일담
배포이슈 해결한다고 11시 부터 새벽 5시까지 계속 노트북 붙잡고 있었다.
하지만 배포 성공했다면 그걸로 오케입니다!
