[React] BrowserRouter 사용시 서브 라우트 페이지에서 새로고침시(F5) 404페이지 뜨는 문제해결(github pages 배포)

1. 원인: 깃허브 pages는 라우트 서비스를 지원하지 않는다
따라서 새로고침시 URL 에서 표시된 주소를 폴더로 인식하여
폴더하위의 index페이지를 로딩하려고 한다!
이것을 실제로 없으므로 404 페이지 에러가 발생함!

2. 해결책: 404.html페이지를 만들고 404에러가 날때 이 페이지가 있으면
메시지를 뿌려주는 용도로 사용할 수 있다.
우리는 여기에 JS를 사용하여 첫페이지가 보이는 경로 주소로 보내준다!

(스크립트)
<script>
    location.replace("/dc-app/")
</script>
 첫 루트로 보냄

 (질문: 그 라우터 서브에서 새로고침은 안되나요?)
 라우터 이동자체가 실제 페이지가 아니고 JS로 연결한
 컴포넌트 소스를 넣는 것이기 때문에 실제 페이지이동과 같은
 변경은 불가함!! 
 -> 라우터 서비스 지원 서버인 경우 문제가 없음!
 -> 여기서의 처리는 404에러 페이지를 안보이고 첫페이지로
 넘겨주는 것만 처리함!
 -> 새로고침시 제자리에 있으려면 아래의 HashRouter 사용해야함!

******************************************************

 [ 새로고침 404 에러 다른 해결법 : HashRouter 사용하기! ]

 기존 <BrowserRouter> 를 쓰지말고
라우터 중 주소를 해시코드로 넣는 
<HashRouter> 라는 것이 있는데
index.js의 상단에 
BrowserRouter 대신에 HashRouter를 import해주고

(실제코드)
import { HashRouter, Routes, Route} 
from "react-router-dom";

코드에 
<BrowserRouter> 대신
<HashRouter>를 사용하면
라우터 경로를 잡을때 ..../gm 이런식이 아니고
.../#/gm 이런식으로 잡기때문에
페이지를 이동하지 않기때문에
최상단으로만 이동해서 404에러가 나지 않는 
더 좋은 방법입니다!

(그리고 기존 BrowserRouter에서 라우팅 경로속성인
basename도 HashRouter에서는 사용할 필요가 없음!!!)

************************************************
[ 참고: HashRouter가 사용하는 /#/경로는 무엇인가? ]

->> 원래 URL에 슬래쉬 뒤에 #을 쓰면 최상단으로 이동함
이는 a태그의 href="#" 사용과 동일함!
__________________________________

((일반적이 /# 경로의 반응예))

https://www.w3schools.com
-> 스크롤 내리다가 새로고침시 스크롤 제자리에 있음

https://www.w3schools.com/#/
-> 스크롤 내려가다가 새로고침시
뒤에 /#이 있으면 최상단으로 이동함(기본특성임!)

https://www.w3schools.com/#/myhome
HashRouter에서 뒤에 다른 경로명을 쓰는데 실제로
웹에서 이렇게써도 /#/ 뒤에 사용하면 페이지이동하지 않음!
이런특성의 라우터 연결 컴포넌트가 HashRouter 컴포넌트임!