깃허브 페이지는 SPA를 지원하지않는다.

엄밀하게 말하지면 브라우저라우터를 제공하지 않는다.


이것이 어떤 의미냐?


우리가 깃허브 리포지토리 페이지를 만든다고 가정하자.

예를들어 리포지토리가 



라고 가정하자

그리고 브라우저라우터로 페이지를 만들었다고 가정하자.. 

그럼 깃허브페이지에서는



 를 index.html로 받는다.


아래 버튼들은 a href="선택자id"로, 저 버튼을 눌렀을때 해당 컴포넌트로 슬라이드 되는 기능이다.



해당 버튼을 누르면 로컬에서는



으로 링크가 바뀌며 잘 작동한다.


하지만? 로컬에서는 404 페이지를 띄우게 된다.


그 이유가 무엇일까?

이유는 바로 브라우저에서 깃허브페이지에게 





을 요청하기 때문이다.


우리는 mbti/#성격유형 파일을 가지고 있지 않다. 


따라서 깃허브 페이지 서버가 




내놔!!!!! 라고 했을때 어 우리 그거 없어! 라고 하는것이다.

이런 이유는 깃허브 페이지는 브라우저 라우터를 지원하지 않는데, 이 브라우저 라우터는 history api를 갖고있다.

깃허브 페이지는 브라우저 라우터를 지원하지 않기에 해당 성격유형 html은 깃허브 페이지에서만 알고 있다.

즉 리액트에서 처리를 해주어야 하는 부분이다.


그래서 깃허브 페이지 배포를 할때는 보통 해시 라우터를 이용한다.

해시 라우터의 경우 history api를 지원하지 않으며,


예컨대 



로 가고자 할때,


깃허브 페이지 서버에게 





즉 도메인 index.html만을 요청한다.


하위 경로인 아이스크림은 리액트에서 처리를 해준다.

그래서 아이스크림 페이지가 잘 보여지게 될 수 있따..


설명할수록 http 통신에 대해 공부를 해야겠다는 생각이 더욱 드네요. http를 아예 몰라서 오개념을 너무 많이 내뿜은거 같음

암튼 저의 상황의 경우 해당 a href="선택자 id"를 이용해 해당 컴포넌트로 슬라이드되게끔 구현했기에 그걸 막 NavLink로 바꾸는 등으로 수정하기 힘든 상황이고, 결국 404.html을 만드는 방법으로 가야할 것 같습니다.


해당 내용의 관련 링크는

1. https://an-thropology.tistory.com/32

2. https://www.freecodecamp.org/news/deploy-a-react-app-to-github-pages/

참고해서 썻습니다.


그리고 저는 이제부터 서버를 올릴때 전부 파베로 처리하기로 결심했습니다.