SPA 개념정리
2021. 11. 24. 19:34ㆍ개발/vue
SPA( single Page application)
어떤 웹사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는것.
페이지 새로고침 없이 페이지내에서 특정부분만 변경하여 페이지가 이동되는 느낌을 준다.
라우팅
SPA 가 기존 웹 사이트와 같이 브라우징이 가능한 이유
HTML5 history api 를 사용하기 때문에
SPA 프레임 워크가 하는일
vue, react, angular 가 spa 프레임 워크로 유명한데..
세부적인 구현 개념은 다르겠지만 그목적은 모두 spa 를 쉽고 확장성 있게 구현하는것을 목표로 함
이들은 virtual DOM 이라는 개념을 사용해 spa 를 구현.
SPA의 문제점은 자바스크립트로 인한 DOM 조작이 빈번하게 일어나 브라우저의 성능을 저하시키는 거였는데
Virtual DOM 을 사용하는 프레임워크 들은 실제 DOM 트리를 흉내 낸 가상의 개체 트리로 HTML 정보를 저장
하고 있다가 이트리에 변경이 발생하면 모든 변화를 모아 단한번 브라우저를 호출해 화면을 갱신하는 방법을 사용
-> 이렇게 하면 브라우저와의 불필요한 상호작용을 최소화 하면서 인터렉티브한 웹사이트를 만드는 것이 가능하다.