SPA (Single Page Application)
SPA 대표 라이브러리 및 프레임워크
단일 페이지 어플리케이션(SPA)란?
네이버의 index.html
- index.html 파일 하나에서 js, css 등 리소스 파일들과 모듈들을 load 하고
페이지 이동 없이 특정 영역만 새로 모듈을 호출하고 데이터를 binding(바인딩)
- 대표적인 라이브러리/프레임워크 - React, Vue, Angular2
SPA 이전의 개발?
MPA vs. SPA
전통적인 링크 방식은 MPA (Multiple Page Application)
- 웹 페이지 화면마다 정적 html로 보여주는 애플리케이션
- Server Side Rendering
- 페이지마다 키워드가 노출되어 있어 검색이 쉽다
자바스크립트만을 이용해 콘텐츠만 변경하는 SPA (Single Page Application)
- AJAX(Asynchronous JavaScript and XML)와 REST API로 서버에 데이터를 요청하고, JSON으로 응답받은 후 데이터를 변경
- Client Side Rendering
- 서버가 해야 하는 역할을 클라이언트가 부담하므로 서버 부담이 경감
데이터 바인딩?
SPA로 개발하기 위해 사용하는 대표적인 번들러
- 화면 상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding)
서로 간의 데이터를 동기화하는 것
- 양방향 바인딩 : View가 바로 업데이트 (Angular, Vue)
- 단방향 바인딩 : JS 데이터를 수정하려면 JS 이벤트를 통해 화면을 업데이트 (React)
참고 링크