2019-06-11 Single Page Application & Routing

SPA (Single Page Application)

 

• 스파라고도 많이 부른다.
• html이 하나  / 어플리케이션이 갖고 있는 페이지가 여러개여도 html은 한개.
• angular는 css에 스코프를 줄 수 있다. ( 각 페이지에 유효한 css를 만들 수 있음.)
• spa의 css는 여러개의 css로 나누는 것이 좋다. (component별로)
• 첫페이지 로딩이 상대적으로 느린 단점이 있지만, 추후엔 빨라진다. (처음에 필요한 리소스들(css,js,이미지 등)을 한번에 받아오고 뿌려준다.) -> 부드럽게 화면전환이 가능하다.(기존의 페이지 이동시 깜박거리는 단점이 사라짐)
• 바닐라 자바스크립트로 하기엔 어렵다. ( 리액트, 뷰, 앵귤러를 쓰자!)
• SPA의 장점 : 화면전환이 부드럽다. (사용자 경험 향상)
• SPA의 단점 : SEO이슈에서 자유롭지 못하다. 구조적 특성상 첫 로딩이 느리다.(초기구동속도가 느리다)

Routing

 - 경로를 결정하는 방식

 

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

1. 브라우저의 주소창에 URL을 입력하면 해당 페이지로 이동한다.

2. 웹페이지의 링크를 클릭하면 해당 페이지로 이동한다.

3. 브라우저의 뒤로가기 또는 앞으로가기 버튼을 클릭하면 사용자가 방문한 웹페이지의 기록(history)의 뒤 또는 앞으로 이동한다.

SPA와 Routing

 

페이지들이 SEO에 의해서 검색이 되기 위해서 고유한 URL을 가지고 있어야한다.

3.1 전통적 링크 방식

<ul>
  <li><a href="/">Home</a></li>  // 루트, 여기선 reload와 같음.
  <li><a href="service.html">Service</a></li> // service.html로 싹다 갈아낀다. 
  <li><a href="about.html">About</a></li>
</ul>

SEO 전혀 문제 없고, 히스토리 또한 전혀 문제가 없다.

 

3.2 AJAX 방식

코딩이 들어가야함. 

주소창이 변하지 않음. -> 히스토리가 안됨. SEO 이슈 자유로울 수 없다.

 

3.3 Hash 방식

URL은 변하지만 요청은 가지않음. 

hash가 바뀔때마다 페이지가 이동해야되고(router함수가 호출되어야함)

그럼 어떻게 체크하나?

hashchange라는 이벤트가 있다.

또 그럼 언제 페이지가 바뀌나? 

리로드 될때 -> DOMContentLoaded 이벤트(돔이 왔으면 이벤트가 발생)

 

 

** 식별자 명명규칙

 알파벳, _ , $로만 시작  / 숫자로는 시작 x 

 객체의 프로퍼티 이름은 식별자 명명규칙을 따르지 않아도 된다.

 

일반적으로 hash 방식을 사용할 때 #!을 사용하기도 하는데 이를 해시뱅이라 부른다.

이 방식 역시 SEO이슈를 해결 불가.

3.4 PJAX 방식

프론트와 백엔드와 같이 일을 해야함.

 

구분	History 관리	SEO 대응	사용자 경험	서버 렌더링구현	난이도	IE 대응
전통적 링크 방식	◯	◯	✗	◯	간단
AJAX 방식	✗	✗	◯	✗	보통	7 이상
Hash 방식	◯	✗	◯	✗	보통	8 이상
PJAX 방식	◯	◯	◯	△(백엔드처리요망)	복잡	10 이상

=> 위 방식 필요없고.. 프레임워크를 사용하면 된다.....!!(react , vue 등 사용하자..)