⚡️ SPA(Single Page Application)
개념
- 한 개의 페이지(Single Page)로 구성된 Application.
- 브라우저 내에서 작동하며, 사용하는 동안 페이지 리로딩을 필요로 하지 않는다.
- SPA의 핵심 가치는 사용자 경험(UX) 향상에 있으며, 부가적으로 애플리케이션 속도의 향상도 기대할 수 있어서 모바일 퍼스트(Mobile First) 전략에 부합한다.
작동 방식
- SPA는 Javascript에 크게 의존하며, Javascript를 이용해 다른 모든 콘텐츠들을 로드한다.
- SPA는 기본적으로 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 접근 시 단 한번만 다운로드한다.
- 이후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신한다.
새로고침 없이도 변경된 부분만 수정해서 보여준다. - 일반적으로
CSR(Client Side Rendering)방식으로 렌더링된다.
장점
단점
- 초기 구동 속도
SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 접근시 단 한번 다운로드하기 때문에 초기 구동 속도가 상대적으로 느리다. SEO(Search Engine Optimization; 검색엔진 최적화)이슈
SPA가 일반적으로 동작하는 방식인 CSR은 일반적으로 데이터 패치 요청을 통해 서버로부터 데이터를 응답받아 뷰를 동적으로 생성하는데, 이때 브라우저 주소창의 URL이 변경되지 않는다. 이는 사용자 방문 history를 관리할 수 없음을 의미하며 SEO 이슈의 발생 원인이기도 하다.- 낮은 보안성
XSS(Cross-Site Scripting)로 인해 공격자가 웹 애플리케이션에 클라이언트 측 스크립트를 삽입할 수 있는 위험이 있다.
💭 사용 예시
- Gmail
- Google Maps
- GitHub.
⚡️ MPA(Multiple Page Application)
개념
- 여러 개의 페이지(Multiple Page)로 구성된 Application.
작동 방식
- MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드된다.
- 일반적으로
SSR(Server Side Rendering)방식으로 렌더링된다. 다른 페이지로 이동하거나 페이지를 새로고침하면 전체 페이지를 리렌더링한다.
장점
단점
💭 사용 예시
📚 Reference
꾸준하고 성실하게, FE 개발자 역량을 키워보자 !