SPA 개념 및 구현내용

Tags:

Categories:

Updated:

:raising_hand: 프론트엔드 개발관련 공부내용을 기록하는 포스트 입니다.

1. SPA(Single Page Application) 이란 무엇일까?

현 회사에서는 VUE.js 로 모바일 프론트를 개발하고 운영하고 있다. 나름 SPA 시스템을 운영하고 있다고 생각하던 찰나, Vanilla JS 로 SPA 페이지를 구현하는 과제 문제를 풀게되었다.

풀어나가는 도중 스스로 SPA 에 대한 정확한 지식 없이 그냥저냥 운영하고 개발만 하고 있다는 생각이 들게 되었다.

이참에 기본적인 개념과 구현 방식에 대해서 기록해야겠다는 생각이 들어 포스팅 하게되었다.

1-1. SPA 란?

SPA 는 Single Page Application 의 약자로 단일 페이지로 구성된 웹 어플리케이션을 말한다.

현재는 웹 개발에 트랜드로 자리매김 하였다.

SPA는 화면이동 시에 필요한 데이터를 서버사이드에서 HTML 으로 전달받지 않고 필요한 데이터만 서버로부터 JSON 타입으로 전달받아 동적으로 렌더링 한다.

2. 기존 어플리케이션과 SPA 의 차이는 무엇일까?

기존의 어플리케이션은 화면이동 시에 화면 이동에 필요한 HTML을 서버사이드에 요청하고 응답받아 처음부터 다시 로딩하게 된다. 따라서 페이지를 요청하고 응답받아 렌더링 할 때마다 로딩하기 때문에 시간이 오래걸리고 새로고침에 되는 현상이 발생한다. 이는 사용자 경험의 질에 감소를 불러오기도 한다.

반면, SPA 에서는 화면 구성에 필요한 모든 HTML을 Client가 갖고 있고 서버사이드에는 필요한 데이터를 요청하고 JSON 으로 받기 때문에 기존의 어플리케이션에 비해 화면을 구성하는 속도가 빠르다.

따라서, SPA 로 구축된 웹 서비스에서는 한번 페이지 전체를 로드하고 이후에는 데이터만 바인딩하는 방식으로 진행된다.

기존 웹 서비스 VS SPA 로 구축된 웹 서비스

image

위 그림에서 보이는 것과 같이 최초 Initial Request 후 HTML 을 받아오는 과정은 둘다 동일하지만 이후의 과정에서 페이지를 이동하는 경우 서버에 요청 및 응답이 다른것을 볼 수 있다.

기존에는 위에서 말했듯이 서버가 HTML 파일을 만들어서 응답을 주면 브라우저가 HTML 을 반영해서 보여주기 전 새로고침이 일어났다. 이부분이 사용자 경험 즉, UX 의 질을 낮출 수 있다고 하는 한 부분이다.

반면, SPA 에서는 페이지 이동 시 서버에 AJAX 로 요청하고 서버는 JSON 타입으로 응답을 주는데 이는 페이지 이동 시 변경되는 부분만 JSON 형태로 받고, 이를 토대로 DOM 에 변경된 부분만을 렌더링 해주기 떄문이다.

이때, SPA 는 html 렌더링을 서버가 하는게 아닌 클라이언트가 받은 json 을 토대로 하기 때문에 CSR(Client Side Renderin) 방식으로 렌더링 한다고 말한다.

3. 장점과 단점은 무엇이 있을까?

장점
  1. 페이지의 필요한 부분만 업데이트하기 때문에 Traffic 이 적어지고 이로 인해 페이지 이동에 필요한 속도가 빨라진다. 또한, 화면에 필요한 부분의 데이터만 받아서 렌더링 하기 때문에 처리과정이 효율적이다.
  2. 최초 접속시 필요한 모든 정적 리소스들을 다운받고 이미 방문한 페이지도 캐싱하여 실제 앱을 사용중에 더 빠른 사용자 경험을 제공한다.
  3. 모듈화 또는 컴포넌트화를 통해 유지보수를 쉽게 만들고 개발 속도도 빠르게 한다.
단점
  1. 처음 화면 로딩할 때, 모든 정적 리소스들을 다운받고 미리 모든 화면을 준비하기 때문에 초기 로딩 시간이 오래 걸린다.
  2. SEO 최적화에 약하다. 초기 요청받은 웹페이지의 소스 코드 내부가 비어있기 때문에 SEO 검색엔진에서 검색이 잘 안될 수 있다.
  3. IE 8 이하는 지원하지 않는다.

4. SPA 라우팅

SPA 에서는 어떻게 페이지 브라우징이 가능한 것일까?

여기서 우리는 history api 를 공부해야 한다.

서버로 요청을 전달하지 않고 자바스크립트 영역에서 history api를 통해 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 한다.

주요 메서드 정리
  1. History.back() : 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드이며 브라우저의 뒤로 가기를 누르는 것과 같은 효과를 낸다.
  2. History.forward() : 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드이며 브라우저의 앞으로 가기를 누르는 것과 같은 효과를 낸다.
  3. History.go() : 특정한 세션 기록으로 이동하게 해 주는 비동기 메서드. 1을 넣어 호출하면 바로 앞 페이지로, -1 을 넣어 호출하면 바로 뒤 페이지로 이동한다.
  4. History.pushState() : 주어진 데이터를 세션 기록 스택에 넣는다. 직렬화 가능한 모든 JavaScript 객체를 저장하는 것이 가능한다.
  5. History.replaceState() : 최근 세션 기록 스택의 내용을 주어진 데이터로 교체한다.

참고 사이트

You may also enjoy