✍🏻 SPA (single-page application)

SPA란?

등장 배경

• 예전 웹사이트는 페이지 이동 시 매번 "페이지 전체"를 불러와야 했다. SPA는 페이지 전환 전후에 중복되는 부분은 새로 불러오지 않고 필요한 부분만 불러온다
• 사용자와 서비스 사이의 상호작용 증가는 트래픽 증가와 사용자 경험을 제공하기 어려웠다

SPA 출현

• HTMl 문서 전체가 아니라 업데이트에 필요한 데이터만 받아, 자바 스크립트가 이 데이터를 조작하여 HTML 요소를 생성하여 화면에 보여주는 방식이 개발되었다
• 서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 업데이트 한다

장점

• 필요한 부분의 데이터만 받아 화면을 업데이트 하기때문에 사용자와의 intereaction에 빠르게 반응
• 서버에서 요청 받은 부분 데이터만 넘겨주면 되기 때문에 서버 과부하에 문제가 줄어듦
  • ex) sns에 올린 사진에 좋아요를 누르고, 댓글을 달고, 궁금할 땐 필요한 부분만 렌더링하면 된다
• 전체 페이지를 렌더링 할 필요가 없으므로 더 나은 유저경험을 제공

단점

• SPA경우 자바 스크립트 파일의 크기가 크다. 때문에 자바 스크립트 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길다
• 검색 엔진 최적화(SEO)가 좋지 않다
  • 구글이나 네이버 같은 검색 엔진은 HTML 파일에 있는 자료를 분석하는 방식으로 검생 기능을 구동한다 SPA에는 HTML파일에 별다른 자료가 없기 때문에 적절히 동작하지 못한다

✍🏻 Wireframe

Wireframe이란?

• 웹페이지의 레이아웃과 UI요소 등에 대한 뼈대
  • Mockup 데모 시연, 평가를 위한 최소한의 기능만 담은 모형