오늘은 특강에 대해 들은걸 정리해보려고한다.
우리가 기존 강의때 배운 파이썬 서버 flask를 사용한 MPA Routing에서 벗어나 javascript로 만드는 single page applicaation 와
SPA Routing 에 대한 내용이다.
- MPA와 SPA의 차이를 설명할 수 있다
- JS SPA에서 Hashed Routing이 필요한 이유를 설명할 수 있다
- 공유된 코드를 참조하여 JS로 SPA Routing을 구현할 자신이 있다
이렇게 총 3개만 이해하면 된다.
MPA vs SPA
MPA
움직일때마다 서버에서 html달라고 하는 방식이다.
프로튼엔드 처음배우고 사이트 만들때 이런 방식을 많이 사용...
SPA할줄모르니까...
SPA
페이지 관련 css,html,javascript 등 모든것을 한번에 다운받아서
페이지 내에 있는 목록 누를때마다 자바스크립트 기능으로 서버요청없이
페이지 이동한다.
즉 네비게이션 메뉴 누르는거 생각하면 됨.
네비게이션 누를때마다 서버 새로고침 안하고 메뉴 누를수있으니까...
요즘은 SPA로 사이트 많이 만든다.
JS SPA에서 Hashed Routing이 필요한 이유
일단 해쉬 라우팅이 뭔지부터 알아야된다.
그냥 간단히 말해서
https://example.com/abc/#def
인터넷 주소에 #해시태그 달린것을 말한다. 위에 예제에서는 #def가 해시라우팅이다.
자 그러면 이걸 왜 사용할까?
해시 이전에 url을 get 방식으로 받아온다.
해시 이후로부터는 페이지로 받아들이지 않는다. 그래서 랜딩이나 새로고침을 해도
index파일만 로드함.
그래서 네비게이션바에 있는 메뉴들을 선택해도 페이지가 새로고침이 되지 않고 그대로 선택가능. 만약 해시로 안받고 /def로 받으면 별도의 페이지 요청을 할것이며 당연히 페이지가 없다고 나온다.
즉 새로고침 할 필요가 없다는 소리...
참고로 get, post 방식이란 무엇일까?
https://developer.mozilla.org/ko/docs/Web/HTTP/Methods
http 메서드의 방법 중 하나이다.
https://noahlogs.tistory.com/35
get은
통상적으로! 데이터 조회(Read)를 요청할 때 많이 쓴다.
예)영화 목록 조회
post는
통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 쓴다.
예) 회원가입, 회원탈퇴, 비밀번호 수정
spa장점
- 자연스러운 사용자 경험
- 깜빡임 현상 X
- 네이티브 앱에 가까운 자연스러운 페이지 이동 (웹앱)
- 웹 성능 향상
- 필요한 리소스만 부분적으로 로딩
- 서버 템플릿 연산 클라이언트로 분산
- 생산성 향상
- 컴포넌트별 개발 용이 (협업 업무 분담, 유지보수)
spa 단점
- 첫 랜딩 속도가 느림 (한번에 모든 파일 다운 → Code Splitting 고려 필요)
- 검색엔진최적화(SEO)에 취약함
- 보안 이슈
- 핵심 비즈니스 로직 최소화 필요 (노출 위험)
