SPA (Single Page Application)란
- 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성하는 웹 애플리케이션 / 웹 사이트
- 현재의 HTML을 고정하고 변경되는 부분에 대해서만 서버에서 불러와 사이트에 렌더링 하는 방식
- 사용자가 서버에 최초로 페이지를 요청하면 필요한 모든 소스를 가져오고 이후에는 AJAX를 이용해
변경에 필요한 부분만 가져온다.
- 예) 페이스북 등
SPA 구현을 위한 프레임워크
- React
- Facebook이 개발한 웹과 모바일 개발 모두에 사용될 수 있는 프레임워크
- 프레임워크 중 국내 점유율이 가장 높다
- 자유도가 높다
- 다만 공식문서가 빈약하다
- Vue
- 최근에 릴리즈 된 프레임워크
- 가볍고 빠르게 개발이 가능하다
- Angular
- 구글이 개발한 프레임워크
- 가장 빠르게 릴리즈 되어 가장 큰 커뮤니티가 형성되어있다
- 공식문서가 잘 갖추어져 있다.
- 큰 프로젝트에 적합하다.
장점
- 페이지 로딩 속도가 빠르다
- 서버로부터 매번 모든 데이터를 가져올 필요 없이 필요한 데이터만 골라서 가져오면 되므로 로딩 속도가 빨라진다.
- 사용자가 편리하다
- 매번 깜빡깜빡 거리며 이동하는 페이지보다 여러모로 잘 만들었다는 인상을 준다.
단점
- 최초 페이지 로딩 속도가 느리다
- 사용자가 최초로 서버에 페이지를 요청할때 모든 데이터를 가져와야 하기 때문에 상대적으로 MPA 방식보다 긴 시간을 요한다.
반대 개념 MPA (Multi Page Application)
- 클라이언트가 서버에 최초 요청을 하게 되면 하나의 정적인 페이지의 모든 소스를 가져온다.
- 사용자가 다른 페이지로 이동하기 위해 서버에 페이지를 요청하면 요청한 페이지와 현재 페이지의 대부분이 같더라도 새로운 페이지 소스 전체를 가져온다.
- 예) 대부분의 웹사이트
