본문 바로가기

프론트엔드/Vue.js

SPA 개요

Tranditional Web Application

TWA는 데이터를 요청할 때마다 페이지를 로드해야 하는 단점이 있습니다.

 

SPA(Single Page Application)

SPA는 페이지 로드 없이 데이터를 요청할 수 있습니다.

즉, 페이지의 같은 부분을 재요청하지 않고 변경된 부분만 요청합니다.

(ex. Header, Footer부분은 재요청하지 않습니다.)

 

SPA 장점

1. 빠르고 자연스런 전환으로 훌륭한 사용자 경험 제공

2. 더 적게 요청해 빠르게 렌더링 가능

3. 컴포넌트 단위 개발로 생산성 향상

4. 쉬운 분업화

 

SPA 단점

1. 느린 최초 로드 => Lazy loading, 브라우저 캐싱

2. 어려운 검색 엔진 최적화(SEO) => SSR, Serverless Function

3. 모든 데이터 노출 => 비즈니스 로직 최소화

 

우리는 SPA 방식으로 netlify를 통해 배포해 왔습니다.

SPA의 단점이 위에 언급했듯이 인증키 같은 중요한 자료를 사용자가 확인할 수 있어서

해커도 바로 가져가서 악의적으로 사용할 수 있습니다.

 

이것을 방지하기 위해 netlify가 제공한 서버리스 함수를 사용해,

인증키를 netlify에 이관해 로직을 최소화합니다.

'프론트엔드 > Vue.js' 카테고리의 다른 글

E2E 테스트  (0) 2023.09.01
Unit 테스트  (0) 2023.09.01
Vue Router 정리  (0) 2023.08.31
Vuex Helpers, 핵심 정리  (0) 2023.08.31
비동기 - 콜백과 프로미스 객체의 이해, 예외 처리  (0) 2023.08.26