[프로그래머스 데브코스_FE] TIL Day-16

❗❗  데브코스 16일차 (08.23)

벌써 4주차 시작이다. 역대급으로 시간이 빨리 흐르는 것 같다.

오늘은 history api학습에 앞서 이것이 나오게 된 계기인

SPA (Sing Page Application)에 대해서 먼저 학습을 진행했다.

 

일반적인 정적인 웹페이지의 경우

• HTML 파일들로 페이지가 구성된다
• URL이 파일 경로와 이름이 된다.
• URL상 파일명이 없을 경우 index.html을 찾을려고한다.

하지만 웹 애플리케이션과 같은 하나의 페이지에서 여러개의 화면을 처리해야하는 상황이 많이 발생하면

SPA가 대두되기 시작했다.(facebook과 같은 사이트)

 

✅ SPA의 경우

• 서버는 API만 처리하고 모든 랜더링 과정을 클라이언트에서 하는 방식
• 클라이언트에서 html 파일은 index.html 하나만 존재하면 클라이언트로 오는 모든 URL 요청을  index.html으로 돌린다.
• 이후 동작은 URL과 상황에 따라 어떤 페이지를 그릴지 동적으로 처리한다.
• 이전 방식에서는 페이지 이동시에 새로 요청해서 받아오게 되었는데 SPA에서는 랜더링만 동적으로 처리하면 되므로 서버의 부담이 줄어드는 효과가 있다.

💡 SPA === CSR ? NO!...

SPA는 단일 페이지 어플리케이션으로 하나의 페이지에서 실행되는 것입니다.

여기서 채택되는 기술이 CSR일뿐이지 같은 개념이 아닙니다.

페이지 하나에서 모든 것을 보여주고 처리하는데 SSR보다 CSR이 더 효율적이기 때문이다.

ex) 페이스북같은 사이트에서 좋아요 버튼을 누르거나, 스크롤을 통해 밑으로 내릴때 마다 페이지가 계속 바뀌는듯한

깜빡임이 있으면 매우 불편할 것이다. 따라서 CSR 기술을 사용하는 것 뿐이다.

 

💡 SPA 라우팅

SPA가 기존 웹 사이트처럼 동작하기 위해서는 위에 언급했던 것 처럼 모든 URL 요청을  index.html으로 돌린다.

하나의 페이지에서 여러개의 페이지를 보여주기 위해서는 페이지 라우팅이 필요하다.

이를 위해 HTML5에서는 histoty API를 이용한다. 서버로 요청을 전달하지 않고 자바스크립트 영역에서 history API를 통해 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 한다.

 

• History.back(): 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드. 브라우저의 뒤로 가기를 누르는 것과 같은 효과를 낸다.
• History.forward(): 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드. 브라우저의 앞으로 가기를 누르는 것과 같은 효과를 낸다.
• History.go(): 특정한 세션 기록으로 이동하게 해 주는 비동기 메서드. 1을 넣어 호출하면 바로 앞 페이지로, -1을 넣어 호출하면 바로 뒤 페이지로 이동한다.
• History.pushState(): 주어진 데이터를 세션 기록 스택에 넣는다. 직렬화 가능한 모든 JavaScript 객체를 저장하는 것이 가능하다.
• History.replaceState(): 최근 세션 기록 스택의 내용을 주어진 데이터로 교체한다.

이 api를 이용해 주소를 인위적으로 바꾸고, 서버로 페이지 전체를 요청하는 게 아니라 history.state에 담아둔 정보로 ajax 요청을 보내 화면을 갱신하는 것이다.

 

📖 학습한 내용

• VanillaJS (5)
  • SPA
  • history API