바닐라 자바스크립트 SPA

1) MPA와 SPA의 차이 설명

- MPA (2개 이상의 HTML 페이지로 구성된 어플리케이션)

- SPA (1개의 HTML 페이지로 구성된 어플리케이션 : index.html만 있음)

 

[SPA 장점] 

: 자연스러운 사용자 경험 ( 하나의 페이지여서 깜빡임 X, 자연스러운 페이지 이동)

: 웹 성능 향상 ( 필요한 리소스만 받아 부분적 렌더링: 가벼운 객체데이터로 이동 가능)

: 개발 생산성 향상 (컴포넌트별 개발 용이 / 협업 업무 분담, 유지보수)

: API JSON의 부분만 집중해도 괜찮음.

 

[SPA 단점]

: 첫 랜딩 속도가 느림 (한번에 모든 파일 다운 => code splitting 고려 필요)

: 검색엔진최적화(seo)에 취약함

 

 

2) 바닐라 JS로 SPA 만들 때 Hashed Routing이 필요한 이유

: 브라우저 라우팅 방식은 새로고침시, /path 부분까지 포함하여 서버에 새로운 페이지를 요청하기에

이 경우는 spa가 아니게 됨

: localhost === 127.0.0.1 (loopback ip address )

 

* 라우팅: 페이지 이동 처리

* hash (#)

: url 에서 #의 내용에 따라 변동되면 = hashed routing

: 서버랑 상관없는 클라이언트용 응답 (https://www.naver.com/#about)-> SPA 보장 가능

 

3) 공유된 코드를 참조하여 JS로 SPA Routing을 구현 가능

 

 

 

* jsDoc 사용법 검색 후 공부하기