JS로 SPA 구성하기

MPA 와 SPA 의 개념

MPA 는 Multie Page Application의 약자로 말 그대로 페이지가 여러장 있다고 생각하면 된다.
반대로 SPA 는 Single Page Application의 약자로 말 그대로 페이지가 한 장 있다고 생각하면 된다.

MPA 는 위 사진처럼 서버에 요청 할 때 마다 서버에서 다시 문서를 받아오는 방식이라면,
SPA 는 서버에 요청을 한번만 하고 더 이상 하지 않는다. (문서를 처음 한번만 받는다)

그렇다면 SPA는 어떻게 페이지 이동을 하는걸까?
바로 문서를 처음 한번 받아올때 모든 페이지를 다 받아오는것이다.
이를 클라이언트 사이드 렌더링이라고 한다. (MPA 방식은 서버사이드 렌더링)

SPA 의 장점과 단점

장점

1. 자연스러운 사용자 경험
   a. 깜빡임 현상 X
   b. 네이티브 앱에 가까운 자연스러운 페이지 이동 (웹앱)

2. 웹 성능 향상
   a. 필요한 리소스만 부분적으로 로딩
   b. 서버 템플릿 연산 클라이언트로 분산

3. 생산성 향상
   a. 컴포넌트별 개발 용이 (협업 업무 분담, 유지보수)

단점

1. 첫 랜딩 속도가 느림 (한번에 모든 파일 다운 → Code Splitting 고려 필요)

2. 검색엔진최적화(SEO)에 취약함

3. 보안 이슈
   a. 핵심 비즈니스 로직 최소화 필요 (노출 위험)

나중에 더 알아보기
1. 해시드 라우팅 (hashed routing?)
2. 상태 304 -> 서버에서 받아오는게 아닌 브라우저에 캐싱된 값 받아오기

DB

DB와 DBMS? (DataBase, DataBase Management System)

데이터베이스 -> 데이터모음집

데이터베이스 관리 시스템 ->

관계형 데이터베이스 (RDBMS)

성능 향상시키기?

RDBMS와 상호작용하기 위한 언어? -> SQL

대중적으로 이런걸 사용한다~

NoSQL ?

정리