- JS SPA에서 Hashed Routing이 필요한 이유
- Hashed url path: 주소+#
-> # 뒷 부분 : 호스팅 서버에서는 로컬로 취급 - 브라우저의 디폴트 기능 : 새로고침을 하면 GET 요청
-주소#about 로 첫 랜딩 혹은 새로고침
-> 브라우저는 index.html 파일 하나만 로드 - 주소/about 로 첫 랜딩 혹은 새로고침
-> 브라우저는 호스팅 서버에 /about에 해당하는 별도의 페이지를 요청하며 오류가 난다(404 Not Found)
- Hashed url path: 주소+#
- 공유받은 코드 보면서 이해하기
②preventDefault(): 새로고침 방지
주소에 ①의 a 태그에 있는 hash가 붙음
① route(event)함수가 실행
③ 해쉬가 변경 되면 handleLocation 함수 실행
④ #를 공백으로 만들고 경로를 설정
⑤ routes에서 경로에 따라 html 파일을 가져온다.
text()함수로 data를 문자로 설정
⑥ main-page에 해당 html을 가져와 보여준다
temp_html을 이용한 것과 비슷
⑦ 새로고침 시 ④에서 path = "/" -> routes에서 해당 html을 가져온다
- 상식
- vscode에서 html 파일을 연 상태로 'go live' 하지 말 것
-> html을 제외한 파일을 선택한 상태에서 'go live'해야 도메인(127.0.0.1)주소만 뜬다! - Loopback
-> 브라우저가 자신의 서버에 접근하는 경우
-> Loopback IP address = 127.0.0.1
- vscode에서 html 파일을 연 상태로 'go live' 하지 말 것
- 질문&답변
- 한 html에 여러 컴포넌트 넣어도 됨(React에서)
- 컴포넌트별로 js, css파일이 분리되어 있을 경우 초기에 한 번에 요청을 해야 하는가?
-> 별도의 조치를 취하지 않으면 컴포넌트 별로 js, css 파일을 분리를 하든 안 하든 처음에 다 다운받는다. - 네이버 페이지라고 한다면 크게 로그인창 컴포넌트, 검색창 컴포넌트 등으로 나눠 볼수 있다.
