[Angualr] 라우팅과 내비게이션

Angluar Routing & Navigation

라우팅과 내비게이션!

SPA (Single Page Application)

• 단일 페이지 애플리케이션은 모던 웹의 패러다임
• 장점
  • 기존의 서버 사이드 렌더링과 비교할때 배포가 간단하며 네이티브 앱과 유사한 사용자 경험을 제공
• 단점
  • link tag를 사용하는 전통적인 웹 방식은 새로운 페이지 요청 시마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링하는 방식으로 동작 새로고침이 발생되므로, 변경이 필요없는 부분을 포함하여 전체 페이지를 갱신하는 것으로 비효율적
• SPA
  • 웹 애플리케이션에 필요한 모든 정적 리소스를 애플리케이션 최초 기동 시에 한번만 다운로
  • 이후 새로운 페이지 요청시 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소
  • 전체 페이지를 다시 렌더링하지 않고, 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험 제공
• 모바일 사용이 증가하고 있는 현 시점에 트래픽 감소와 속도 사용성 반응성의 향상은 매우 중요한 이슈

Routing

• 라우팅이란 출발지에서 목적지까지의 경로를 결정하는 기능

• 애플리케이션의 라우팅은 사용자가 태스크를 수행하기 위해 어떤 화면에서 다른 화면으로 화면을 전환하는 내비게이션 관리하기 위한 기능

• 브라우저가 화면을 전환하는 경우

  • 브라우저의 주소창에 URL 입력
  • 웹페이지의 링크를 클릭
  • sub버튼을 클릭하면 action에 지정한 URL로 입력 데이터가 전송
  • 브라우저의 뒤로가기 또는 앞으로가기 버튼

• AJAX 요청에 의해 서버로부터 데이터를 응답받아 화면을 생성

  • 브라우저 주소창의 URL은 변경되지 않는다.
  • 사용자의 방문 history를 관리할 수 없음을 의미
  • SEO (검색엔진 최적화) 이슈의 발생 원인
  • 히스토리를 관리하기 위해서는 각 페이지는 브라우저의 주소창에서 구별할 수 있는 URL을 소유

Angular Router 개요와 위치 정책

• 개요
  • Angular 라우터를 제공
  • 라우터를 구성하고 라우트에 해당하는 컴포넌트를 맵핑
• Location Strategy
  • a 태그의 href 어트리뷰트를 사용하지 않는 AJAX는 URL을 변경시키지 않는다.
  • history.back(), history.go(n) 등도 동작하지 않음
  • 새로고침을 클릭하면 주소창의 주소가 변경되지 않기 때문에 언제나 첫페이지가 다시 로딩
  • 하나의 주소로 동작하는 ajax 방식은 SEO 이슈에서도 자유로울 수 없다
• 위 문제를 해결하기 위해서 Angular에서는 2가지의 위치 정책을 제공
  • 애플리케이션 전역에서 유일한 URL을 소유
  • PathLocationStrategy (HTML5 History API 기반 내비게이션 정책)
  • HashLocationStrategy (Hash 기반 내비게이션 정책)