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 |