공부/기타

[웹서버] SPA(Sigle Page Application)란?

돌멩이수프 2022. 7. 19. 11:15
728x90

 

기존에 사용하던 Traditional Page는 사용자가 웹페이지에서 아이콘을 클릭할 때마다 새로고침이 함께 실행되며 웹페이지 상의 모든 정보가 새로 로드됐다. 네이버의 경우가 그렇다.

기존 페이지에는 담기는 정보가 많지 않아서 클릭마다 새로고침이 되는 것이 부담 없었지만 지금 만들어지는 웹 페이지들은 정보가 매우 많이 담겨있다. 클릭마다 새로고침하기에는 부담이 크다. 이래서 생겨난 것이 Sigle Page Application다.

 

Sigle Page Application은 기존 페이지와 달리 아이콘을 클릭하면 필요한 정보가 보이는 부분만을 새로고침 한다. 정보를 새로 불러들일 필요가 없는 부분은 새로고침 되지 않고 기존의 모습을 그대로 사용자에게 보여준다.

 

출처 Livivity https://lvivity.com/single-page-app-vs-multi-page-app

 

위에 있는 것이 기존에 사용하던 Traditional Page의 구동 방식이다. 클라이언트가 서버에 요청을 보내면 서버는 클라에게 HTML을 통째로 준다. 클라의 요청이 있을 때마다 서버는 새로운 HTML로 답해준다.

지금 사용하는 SPA에서는 클라가 처음 페이지를 접속했을 때 서버가 필요하겠다 싶은 대부분의 정보를 HTML로 전달한다. 후에 클라는 AJAX 방식으로 필요한 정보를 서버에게 요구하고 서버는 JSON으로 응답하여 필요한 정보가 있는 부분만을 고치는 방식으로 페이지가 작동된다.

728x90