본문 바로가기
Programming/CS

SPA, Single Page Application

by Bam_t 2021. 12. 9.
728x90

1. SPA

SPA, Single Page Application은 하나의 페이지로 이루어진 웹 어플리케이션 또는 웹 페이지를 말하는 용어입니다.

그동안은 html을 배워오고 간단한 웹 사이트를 하나 만들면서 보통 여러개의 페이지로 구성된 홈페이지를 만들었습니다. 그래서 페이지를 요청하게 되면 서버에서 페이지에 담긴 모든 리소스들을 처리해서 html문서로 돌려주고 새로고침하게 됩니다. 이 방식이 사용자도 늘어나고, 웹 페이지에서 표시하는 정보들이 많아지자 서버쪽에 큰 부담이 가게 되었습니다. html을 계속 요청하게되면 UI의 사용 상태 유지가 어렵고, 바뀌지 않는 부분까지도 다시 요청해서 보여주기 때문에 로딩이 길어진다는 문제점들을 수반하고 있었습니다.

이런 문제를 해결하고자 SPA방식이 등장했습니다. 원리는 간단합니다. 페이지에 html파일 하나만을 가지고 구성하고 내부의 요소들은 자바스크립트를 이용해서 나타나게 하는 것입니다. 즉, 리액트의 원리처럼 필요한 부분에만 리렌더링을 한다는 것과 동일함을 알 수 있습니다.

싱글 페이지라고 해서 단 하나의 페이지라는 오해가 생길 수 있는데 꼭 단일 페이지 구성은 아닙니다. 당연히 사이트엔 어떤 메뉴도 있고 다양한 화면으로 구성되어있습니다. SPA는 서버에서 사용자에게 전달해주는 페이지가 하나라는 것이고, 그 페이지 내부의 스크립트 혹은 주소의 변경을 통해 여러 페이지를 보여주게 됩니다. 다른 주소로 다른 화면을 보여주는 것은 라우팅이라고 하는데 잘 알려진 REST가 라우팅을 이해하는데 도움이 됩니다.

2021.12.01 - [Programming/Node.js] - [Node.js] REST

 

[Node.js] REST

주소창을 보면 다음과 같이 어지러운 문자열이 나열되어있습니다. 이것은 페이지에서 현재 주소를 나타냄과 동시에 요청 내용을 표시합니다. 우리는 지금 부터 이 내용을 통해 어느정도 지금

bamtory29.tistory.com

728x90

'Programming > CS' 카테고리의 다른 글

함수형 프로그래밍  (0) 2022.01.12
명령형 프로그래밍과 선언형 프로그래밍  (0) 2021.12.31
OSI 7 Layer  (0) 2021.11.27
쿠키와 세션  (0) 2021.11.03
JSON  (0) 2021.11.02

댓글