SPA 이해

자바스크립트의 프레임워크가 등장하기 전에는, 플레인 자바스크립트나 제이쿼리로 프론트 개발함

프론트엔드의 개발이 복잡해지면서 프레임워크가 등장함

SPA싱글 페이지 어플리케이션이라는 뜻

기존의 방식은 MPA멀티 페이지 어플리케이션인데

클라이언트에서 리퀘스트가 있을때 마다 > 서버로부터 리소스를 받아와 > 페이지를 렌더링 하는 방식으로

매 페이지마다 서버를 거쳐 리소스를 받아와 렌더링함

페이지를 렌더링할때마다 중복된 html, css, javascript를 받아옴,

이를 보완하기 위해

SPA는 기존의 한계를 보완해서 갱신이 필요한부분만 json 형태로 데이터를 가져와 바인딩함 ⇒ ajax같은 방식

비동기로 서버와 데이터가 통신할 수 있는 방식임

이는 url 을 변경 시키지 않아 뒤로가기가 불가함 (히스토리 관리 불가, SEO이슈도 있다함)

HASH 방식은 이를 보완하기 위해 나온 라우팅 방식임

이는 사용해보지 않아 자세히 모르겠지만 브라우저에선 url이 바뀐걸로 인식하게 해서 히스토리 관리가 가능하게한다함

Vue는 가상 DOM을 생성할수있으며 DOM을 통해 모든 요소를 실시간 반응형 컴포넌트로 제작할 수 있음

규모가 커질수록 컴포넌트도 커지기 때문에 이를 관리할 수 있는 라이브러리들을 제공함

뷰로 웹개발시

  • 프로젝트 구축 및 기타 작업을 수행해줄 Vue Cli

  • 라우팅을 담당해줄 Vue Router

  • 컴포넌트간의 status 관리를 담당할 Vuex

를 사용함

Refer

OKKY | [VUE] SPA 웹 프론트앤드 개발을 위한 정리

Last updated