SPA와 SPA 라우팅 원리
- 기존의 웹 서비스(서버사이드 랜더링)
- Ajax 로 특정 부분만 새로 그리는 웹 서비스
- SPA 방식
- 특징
- 장점과 단점
- 실제 프레임워크들에서 사용하는 SPA의 원리
1. 기존의 웹 서비스 (서버사이드 랜더링)
"서버에서 html을 완성해서 보내주는 방식"
<aside>
💡 기존의 웹 서비스는 ***앵커에 명시되어있는 자원(html)***을 서버에 요청하고, 응답으로 받은 내용을 브라우저에 표현한다.
</aside>
장점과 단점
장점
- 브라우저가 응답을 받자마자 랜더링을 할 수 있어서 빠르다
- 자바스크립트 코드가 없어서 빠르게 작성할 수 있다.
단점
- 중복되는 데이터가 계속 네트워크를 타고 들어온다.
- 위 코드의 <nav></nav> 영역은 동일한 부분임에도 불구하고 계속 네트워크로 넘어간다.
2. Ajax 로 특정 부분만 새로 그리는 웹 서비스
"서버에서 첫화면을 그리고 다음부터는 ajax로 데이터를 가져온 후에 클라이언트에서 html을 랜더링 하는 방식"
코드를 부분부분씩 나누어서 살펴보자.
- 각각의 앵커를 click 시에 이벤트 부여하기