SPA(Single page application)

SPA란?

Single page application.

과거의 웹에서는, 서버에서 클라이언트(사용자 입장에서는 웹 브라우저 프로그램)로

전달하는 데이터 양이 크지 않았다.

현재는 그 데이터양이 훨씬 크다.

보여주는 데이터양이 크지만, 매번 Page를 Refresh하고 로딩하는 것은 비효율적이다.

그렇기에 전체 Page내에서 제공되어야할 내용을

하나의 Page에서 바뀌어야할 데이터 부분만
동적으로 바꿔주는 로직을 반영한 구조가 SPA이다.

말 그대로 Single page에서 application이 운영된다.

최초의 Page가 로딩 될 때, 미리 로딩된 Javascript 코드가

사용자가 일으키는 Trigger, Event를 감지하여
바뀌어야 할 컴포넌트만 바꿔주는 것이 그 예라고 볼 수 있다.

Angular, React, Vue가 있다.

세 프레임워크의 구현은 다르나, 목적은 확장성있는 SPA의 구현에 있다.

세 프레임워크 모두 Virtual DOM 개념을 사용한다.

SPA의 단점은

동적으로 로딩하는 코드가 많을 경우

자바스크립트의 DOM 조작이 빈번하게 일어나 브라우저의 성능 저하.

-> 변경된 코드를 다시 브라우저가 렌더링하는 과정에서 발생하는 것으로 추정

Virtual DOM을 사용하는 프레임워크들은 실제 DOM 트리를 흉내 낸 가상의 객체 트리로 html 정보를 저장하고 있다가, 이 트리에 변경이 발생하면 모든 변화를 모아 단 한번 브라우저를 호출해 화면을 갱신하는 방법을 사용한다.

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

Q. 트리에 변경이 발생하면 변화 내역을 모아서 한번에 브라우저를 호출하면서 갱신하다는데,
한번에 모아서 호출한다면, 실시간으로 Interaction이 안되지 않을까?

변화는 이미 생겼는데 변화를 모을 때까지 기다려야하니까.라는 의문이 생겼다.

DOM트리와 Virtual DOM 개념.
그리고 VirtualDOM이 왜 효율적인지 공부하자.