반응형

SPA란 Single Page Application 의 약자로 

 

기존의 웹 페이지는 페이지 자체가 여러개 존재하고

원하는 정보가 있으면 새 데이터를 요청할 때 마다

전체 페이지가 다시 로드 되었다.

 

하지만 SPA를 사용하게 되면

맨 처음 로딩할 때 하나의 페이지를 불러오고

그 페이지에서 JSON/XML 등의 데이터를 동적으로 가져오는 형태로 페이지를 바꿔나간다.

 

즉, 새로고침이나 새로운 페이지를 부르지 않고

데이터를 가지고만 페이지를 운영한다.

 

 

1. SPA의 장점

그렇다면 왜 기존의 페이지를 불러오는 방식이 아닌

SPA 방식을 사용하는지 즉, 장점에 대한 생각을 해봐야한다.

 

1. 사용자가 페이지를 이용할 때의 속도가 빠르다. (반응성이 빠르다)

  : 초기 로딩에 데이터를 가져오기 때문에 로딩이 된 후에는 새로고침 없이 빠르게 페이지를 이용할 수 있다.

 

2. 화면에 필요한 데이터만 가져와서 렌더링 하기 때문에 효율적이다.

 

3. 신속한 개발이 가능

  : 단일 페이지 응용 프로그램 아키텍처가 분리되어 있기 때문에 프론트엔드와 백엔드 개발 서비스를 분리하여 작업할 수 있다. 그렇기 때문에 개발자는 독립적이고 신속하게 작업을 할 수 있다.

 

4. 캐싱 능력

  : 데이터에 대한 지속적인 액세스가 있기 때문에 캐싱 관리하기에 수월하다.

 

2. SPA의 단점

SPA가 장점만 갖고있는 것은 아니라

SPA를 사용했을 때의 단점도 몇 가지 있다.

 

1. 초기 로딩시에 데이터를 가져오는 문제로 초기 로딩 속도 저하의 문제가 발생할 수 있다.

 

2. 검색엔진최적화 (SEO)에 어려움이 있을 수 있다.

  : 스크립트 언어로 화면의 전환이 되기 때문에 검색엔진에서 크롤링 하기가 어렵다.

 

 

 

 


 

참고

https://www.excellentwebworld.com/what-is-a-single-page-application/

 

 

반응형

'Frontend > Vue.js' 카테고리의 다른 글

[vue 2 기초] 라우터  (1) 2023.11.06
[vue 2 기초] 컴포넌트 통신(props, event emit)  (1) 2023.11.04
[Vue 2 기초] 컴포넌트  (0) 2023.11.03
[Vue 2 기초] 인스턴스  (0) 2023.11.03
Vue.js 란?  (0) 2023.11.03

+ Recent posts