* SPA?
SPA는 Single Page Application의 약자로, 말 그대로 단일 페이지로 구성된 웹 어플리케이션을 말한다. SPA에서는 페이지 새로고침이 발생하지 않는다. 전체 페이지를 새로고침하지 않고, 클라이언트가 필요한 부분만 자바스크립트를 사용하여 업데이트 한다. 좀 더 자세히 말하자면 서버로부터 JSON으로 데이터를 받아와서 클라이언트가 렌더링해서 화면에 데이터를 뿌려준다.
SPA를 쉽게 이해하는 방법은 레고를 생각하는 것이다.
어렸을 때 가지고 놀던 레고를 생각해보면 저렇게 생긴 초록색 판이 들어있던 것이 기억날 것이다. 저 초록판을 화면이라고 생각하고 레고 블럭을 화면 컴포넌트라고 생각해보자. Multi-Page 방식에서는 매번 저 초록판을 새로 가져온다고 생각하면 된다. 반면 SPA에서는 저 초록판은 그대로 같은 판을 유지한 채 새 블록만 노란색 빨간색 파란색 이렇게 계속 갈아끼운다고 생각하면 된다.
또다른 비유는 레스토랑에서 코스요리를 먹는다고 생각해보자. 앙트레 - 메인 - 디저트 이렇게 구성된 코스요리라고 할 때, 앙트레 다 먹고 메인으로 넘어갈 때 웨이터분은 테이블 전체를 갈아끼우지 않고 접시만 갈아껴주신다. 갈아껴주신다는 말이 좀 그런데 아무튼 컴포넌트를 접시라고 생각하고 테이블을 전체 화면이라고 생각하면 대충 그런 것이다....
위의 사진을 보면 헤더와 메뉴, 푸터는 그대로지만 url이 계속해서 변화함에 따라 컴포넌트가 변하는 것을 볼 수 있다. 사실 헤더와 메뉴, 푸터는 변하는 것이 없는데 매번 새로고침해서 가져오려면 비효율적일 것이다. 따라서 spa처럼 필요한 컴포넌트만 렌더링해서 사용한다면 매번 페이지를 새로 받아오는 것보다 효율적인 방식이 된다.
* 기존 방식 vs SPA
기존의 Multi-Page Lifecycle에서는 클라이언트의 요청 마다 html, jsp 등 페이지가 매번 새로 리턴되어야 했다.
예를 들자면 한 사이트에서 회원 가입을 한다고 생각해보자. 그럼 우리는 회원 가입 버튼을 누르고, 그럼 회원 가입 요청이 서버에 전달되어 서버는 회원가입 페이지를 돌려준다. 그럼 우리는 새로 받은 회원 가입 페이지에서 가입을 한 뒤, 가입 버튼을 누르면 데이터가 서버로 넘어가고 서버에서 처리를 해준 뒤에 제대로 가입이 되었다면 그에 걸맞는 페이지를 또 돌려주었다. SPA에서는 매번 이렇게 페이지를 돌려줄 필요가 없다.
* SPA의 특징
SPA의 장점
- 화면에 필요한 부분의 데이터만 받아서 렌더링하기에 효율적이다. -> 웹 어플리케이션 성능을 크게 향상시킨다.
- 웹 페이지가 하나뿐이기 떄문에 유연하고 반응이 빠른 인터페이스를 구출할 수 있다.
SPA의 단점
- 규모가 크고 최적화되지 않은 경우 사용자의 브라우저가 콘텐츠를 로드하는데 많은 시간이 걸린다.
- SEO가 용이하지 않아서, 검색 포털에 노출되는게 중요한 사이트(블로그, 마케팅 등)는 좋지 않다.
'Web' 카테고리의 다른 글
| Session vs Token(JWT) (0) | 2021.07.09 |
|---|---|
| CORS(Cross-Origin Resource Sharing) (0) | 2021.05.20 |
| MVC vs MVVM (0) | 2021.05.12 |
| REST(Representatilnal State Transfer) API (0) | 2021.05.04 |
| 메이븐(Maven) 이란? (0) | 2021.04.29 |