SPA 개념정리

SPA( single Page application)

어떤 웹사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는것.

페이지 새로고침 없이 페이지내에서 특정부분만 변경하여 페이지가 이동되는 느낌을 준다.

 

라우팅 

SPA 가 기존 웹 사이트와 같이 브라우징이 가능한 이유 

HTML5 history api 를 사용하기 때문에 

 

SPA 프레임 워크가 하는일 

 

vue, react, angular 가 spa 프레임 워크로 유명한데.. 

세부적인 구현 개념은 다르겠지만 그목적은 모두 spa 를 쉽고 확장성 있게 구현하는것을 목표로 함 

이들은 virtual DOM 이라는 개념을 사용해 spa 를 구현. 

 

SPA의 문제점은 자바스크립트로 인한 DOM 조작이 빈번하게 일어나 브라우저의 성능을 저하시키는 거였는데

 

Virtual DOM 을 사용하는 프레임워크 들은 실제 DOM  트리를 흉내 낸 가상의 개체 트리로 HTML 정보를 저장

하고 있다가 이트리에 변경이 발생하면 모든 변화를 모아 단한번 브라우저를 호출해 화면을 갱신하는 방법을 사용

-> 이렇게 하면 브라우저와의 불필요한 상호작용을 최소화 하면서 인터렉티브한 웹사이트를 만드는 것이 가능하다.