lessons 36. SPA & Routing

2023.03.19

자바스크립트 스터디 9회차

공부 사이트: https://poiemaweb.com/

 

36. SPA & Routing

 

SPA(Single Page Application)

- 단일 페이지로 구성

- 배포가 간단함

- 네이티브 앱과 유사한 사용자 경험 제공 가능

 

SPA는 웹 애플리케이션에 필요한 정적 리소스를 최초 접근시에만 다운로드한다. 이후 새로운 페이지 요청 시 페이지 갱신에  필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하기에 전체적인 트래픽 감소가 가능하다.

 

그러나 구조적인 단점을 가지고 있다.

초기 구동 속도가 상대적으로 느리다는 것과 SEO 이슈이다. SEO는 검색엔진에 키워드를 검색했을 때 웹 사이트가 노출되는 것을 의미한다. 그러나 SPA는 CSR(Client Side Rendering) 방식으로 작동하기에, 데이터를 응답받아 페이지를 갱신할 때 브라우저 주소창의 URL이 갱신되지 않는다. 사용자 방문 히스토리를 갱신할 수 없고, SEO 이슈가 발생할 수 밖에 없다. 

 

 

Routing

출발지에서 목적지까지의 경로를 의미한다.

애플리케이션에서 라우팅은 사용자가 작업을 수행하기 위해 특정 뷰에서 다른 뷰로 전환하는 내비게이션 관리 기능을 의미한다. 라우팅은 사용자가 요청한 URL/이벤트를 해석하고, 새로운 페이지로 전환하기 위해 필요한 데이터를 서버에 요청한 후 페이지를 전환하는 행위이다.

 

[화면을 전환하는 경우]

- 브라우저 주소창에 URL 입력 후 페이지 이동

- 웹 페이지 링크를 클릭하여 페이지 이동

- 뒤로가기/앞으로가기 기능

    → 히스토리 관리 필요(브라우저의 주소창에서 구별할 수 있는 유일한 URL을 소유해야 함)

 

 

1) SPA와 Routing

전통적인 링크 방식 → Ajax 방식 → Hash 방식 → Pjax 방식

(실습을 위한 git 링크)

 

① 전통적인 링크 방식

a link 태그로 동작하는 기본적인 웹 페이지 동작 방식.

현재 페이지에서 수신된 html로 화면을 전환하는 과정이기에 전체 페이지를 새롭게 렌더링.

즉, 새로고침이 발생한다.

복잡한 웹 페이지의 경우, 요청마다 중복되는 리소스를 매번 다운로드하므로, 속도 저하의 원인이 된다.

 

② Ajax 방식 

전통적인 링크 방식의 단점을 보완.

자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식.

페이지 전체를 리렌더링할 필요 없이 일부만 갱신하면 되기에 빠른 수행 + 부드러운 화면 표시 가능

그러나 Ajax 요청은 주소창의 URL을 변경시키지 않으므로, 히스토리 관리가 동작하지 않는다. SEO 이슈도 존재!

 

③ Hash 방식

Ajax 방식의 단점을 보완.

URI의 fragment identifier(hash mark, hash라고도 부름) 의 공유 기능인 앵커를 사용함.

URL이 동일한 상태에서 hash만 변경되면 브라우저는 서버에 요청을 보내지 않는다. 페이지가 갱신되지 않는 것.

논리적인 URL이 존재하므로 히스토리 관리에 아무런 문제가 없다.

그러나 URL에 불필요한 #이 들어간다는 것, SEO 이슈가 그대로 존재한다는 것이 단점이다.

 

④ Pjax 방식

Hash 방식의 큰 단점인 SEO 이슈를 보완한 방식이다.

HTML5의 History API인 pushState와 popstate 이벤트를 사용한 방식이다. 

- 네비게이션 클릭 시 이벤트를 캐치 

- preventDefault() 사용: 네비게이션 클릭으로 인해 발생되는 HTTP 요청을  방지

- pushState() 사용: URL을 변경하면서 페이지는 그대로 유지. (서버로 HTTP 요청을 하지 않으면서 히스토리 개체 등록)

그러나 Pjax 방식은 서버 렌더링 방식과 Ajax 방식이 혼합되어 있는 방식이기에 서버의 지원이 필요하다.

 

⑤ 정리

	히스토리 관리	SEO 대응	사용자 경험	서버 렌더링	구현 난이도
전통적 링크 방식	O	O	X	O	간단
Ajax 방식	X	X	O	X	보통
Hash 방식	O	X	O	X	보통
Pjax 방식	O	O	O	△	복잡