SPA (Single Page Application)

SPA (Single Page Application)란?

 

단일 페이지를 이용해서 웹서비스를 가능하게 하는 방법이다.

 

 

리액트를 비롯한 모던 자바스크립트 웹 시스템은 SPA(Single Page Application)로 작성한다. SPA에서는 기본적으로 HTML 파일은 하나만 사용하고 자바스크립트를 이용해 화면을 전환함으로써 화면 이동 등의 동작을 표현한다. 과거에는 웹 서비스를 하기 위한 페이지를 하나씩 만들어서 사용했다

 

 

📌  HTML 파일 하나

📌 자바스크립트를 사용해 DOM을 바꿔 써서 화면 이동을 구현하는 것

📌 사용자 경험 향상

 

 

---

 

☑️ SPA와 기존 웹 시스템의 차이가 무엇일까?

 

[기존 웹 시스템]

 

기존 웹 시스템에서는 페이지를 이동할 때마다 서버에 요청을 전송하고 서버 측에서 HTML 파일을 반환하기 때문에 페이지 이동 시 화면이 잠깐 하얗게 보이는 것이 특징이다.

 

1. 사용자가 '이 페이지를 보여주세요'라고 one 페이지에 접근하면 서버 측은 요청을 받아서 일치하는 페이지의 HTML 파일을 반환한다.
2. 이후 링크를 클릭해서 two 페이지에 접근할 때 1번과 같이 서버 측에 '이 페이지를 보여주세요'라는 요청을 전송하고, 서버 측에서는 요청과 일치하는 HTML 파일을 반환한다.

 

[SPA를 사용한 웹 시스템]

 

HTML 파일 요청과 달리 비동기적 실행을 통해 데이터를 얻는다. 백그라운드로 데이터를 얻으므로 사용자는 조작을 계속할 수 있다. 따라서 페이지 이동 시 화면이 하얗게 변하지 않으며 스트레스 없이 쾌적하게 페이지를 열람할 수 있다.

 

1. 사용자가 '이 페이지를 보여주세요'라고 one 페이지에 접근하면 서버 측이 요청을 받아 일치하는 페이지의 HTML 파일을 반환한다. 이 부분은 기존 웹 시스템과 같다.
2. 그리고 필요한 데이터가 있을 때는 '필요한 데이터를 주세요'라는 요청을 서버로 전송한다. 그러나 HTML 전체를 변경하는 것이 아니라 자바스크립트 DOM을 바꿔 써서 화면을 업데이트하고 얻은 데이터를 화면에 반영해 페이지 이동을 구현한다.

 

템플릿을 이용해서 페이지 이동, HTML 파일은 변경되지 않는다.

 

---

 

☑️ SPA의 장점

 

1. 사용자 경험 향상
   • 페이지 이동 시 화면이 하얗게 변하지 않는다.
   • SPA는 서버에 요청을 보내지 않고 페이지 이동을 완료할 수 있어 화면 표시 속도가 향상된다.
   • 페이지 표시 속도는 중요하다. 온라인 쇼핑 사이트 등에서는 매출과 직결되는 문제이기 때문이다.
2. 컴포넌트 분리가 쉬워져 개발 효율 향상
   • 페이지마다 HTML 파일을 준비해야 하는 기존 웹 시스템과 달리 리액트 등 모던 자바스크립트로 개발할 때는 화면의 각 요소를 컴포넌트로 정의해서 재사용한다.
   • 대부분의 웹 시스템에서는 버튼이나 텍스트 필드, 리스트나 메시지 표시 같은 요소를 동일한 디자인으로 다양한 화면에서 사용한다. 이들을 각각 부품으로 정의해 여러 화면에 적용하면, 어떤 버튼의 디자인을 전체적으로 변경하고 싶을 경우 컴포넌트 하나를 수정함으로써 전체에 변경 내용을 적용할 수 있다.

 

 

사용자, 개발자 모두에게 도움이 되기 때문에 모던 자바스크립트 개발에서는 SPA를 표준으로 사용한다.