CS 학습 정리
- 작성자 본인이 해당 주제의 학습 후, 체득하기 위해 블로그 글로 정리하였습니다
- 여러 학습자료 참고 후, 참고한 학습 자료의 출처들은 최하단에 작성하였습니다.
- 학습을 진행하면서, 추가하거나 수정할 사항이 있으면 Version을 업데이트 해나가면서 작성할 계획입니다.
업데이트 내용
ver 1.1
- 최초 작성 (ver 1.0)
- SEO 간략 설명 추가 (ver 1.1)
오늘의 핵심 주제: SPA와 MPA
목차:
- SPA와 MPA란
- SPA와 MPA의 동작 방식
- SEO란
- SPA의 장단점
- MPA의 장단점
- 결론
SPA와 MPA
SPA란
- SPA란 Single Page Application의 약자로, 한개의 페이지로 구성된 애플리케이션이다.
- SPA는 모든 정적 리소스를 최초에 모두 다운로드한 뒤, 새로운 페이지 요청이 있을 때마다 필요한 페이지만 갱신하는 방식이다
- SPA는 이후 작성할 CSR방식을 사용한다
MPA란
- MPA란 Multi Page Application의 약자로, 여러개의 페이지로 구성된 애플리케이션이다.
- 최초의 동작 방식은 SPA란 같다. 모든 정적 리소스를 최초에 모두 다운로드한다.
- 하지만 이후 동작방식에서 차이를 보이는데, 새로운 페이지 요청이 있으면 모든 페이지를 다시 갱신하는 방식이다
- MPA는 이후 작성할 SSR방식을 사용한다
SPA 동작 방식
- 초기 요청 시, 서버에서는 html,css과 같은 정적 리소스를 제공하고 자바스크립트를 이용해서 동적으로 화면을 구성한다
- 이후 데이터가 변경되는 부분만 서버에 요청해서 JSON으로 서버로부터 응답받아 해당 부분의 데이터를 업데이트한다
- 주로 React와 서버와의 통신 방식에서 사용된다 (내 학술제 팀프로젝트에서 사용했던 방식)
MPA 동작 방식
- 초기 요청 시, SPA동작 방식과 똑같다
- 하지만 이후 요청부터는 앞서 말했듯이 차이가 있다. 사진을 통해 확인할 수 있듯이 다시 모든 정적 리소스를 다시 제공한다
SEO란
- SEO는 검색 엔진 최적화를 말하는 것으로, 웹사이트가 검색 방식을 통해 검색 엔진에서 상위에
될 수 있도록 최적화하는 과정을 말한다.
SPA의 장단점
SPA의 장점
- MPA처럼 새로운 페이지 요청이 있을 때마다, 모든 페이지를 다시 갱신하지 않아 화면이 깜빡거리지 않는다는 장점이 있다
- 필요한 부분만 갱신하기 때문에, 속도 및 응답시간이 빠르다는 성능 측면에서의 이점이 있다
- 로컬 스토리지 효과적으로 캐시할 수 있다는 장점이 있다. 최초 요청에서 모든 데이터를 저장한 다음 이 데이터를 오프라인에서도 사용할 수 있다.
SPA의 단점
- 최초에 모든 정적 리소스를 다운 받기 때문에 초기 구동 속도가 느리다는 단점이 있다
- SPA는 자바스크립트로 구축되기 때문에 자바스크립트를 읽지 못하는 검색엔진에서 크롤링되지 않는 SEO 이슈 문제가 있다
MPA의 장단점
MPA의 장점
- MPA는 완성된 정적 리소스 파일을 서버로부터 전달받기 때문에 SEO 관점에서 매우 유리하다
- 이름 그대로 다중 페이지이기 때문에 페이지를 확장할 수 있다는 장점이 있다.
MPA의 단점
- 새로운 페이지 요청이 있으면 모든 페이지를 갱신하는 방식이기 때문에, 페이지 이동 시에 느리다는 단점이 있다
- 성능 측면에서 중복된 템플릿 로딩을 할 수도 있기 때문에 좋지 않다
결론
- SPA와 MPA 둘의 선택에서 정답은 없다. 둘 중 상황에 맞는 방식을 통해 개발을 진행하면 된다
참고출처:
Software Developer