SPA (Single Page Application)
단일 페이지 어플리케이션(SPA)란?
- index.html 파일 하나에서 js, css 등 리소스 파일들과 모듈들을 load 하고
페이지 이동 없이 특정 영역만 새로 모듈을 호출하고 데이터를 binding(바인딩) - 대표적인 라이브러리/프레임워크 - React, Vue, Angular2
SPA 이전의 개발?
전통적인 링크 방식은 MPA (Multiple Page Application)
- 웹 페이지 화면마다 정적 html로 보여주는 애플리케이션
- Server Side Rendering
- 페이지마다 키워드가 노출되어 있어 검색이 쉽다
자바스크립트만을 이용해 콘텐츠만 변경하는 SPA (Single Page Application)
- AJAX(Asynchronous JavaScript and XML)와 REST API로 서버에 데이터를 요청하고, JSON으로 응답받은 후 데이터를 변경
- Client Side Rendering
- 서버가 해야 하는 역할을 클라이언트가 부담하므로 서버 부담이 경감
데이터 바인딩?
- 화면 상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding)
서로 간의 데이터를 동기화하는 것- 양방향 바인딩 : View가 바로 업데이트 (Angular, Vue)
- 단방향 바인딩 : JS 데이터를 수정하려면 JS 이벤트를 통해 화면을 업데이트 (React)
참고 링크
'기술 스택 > JavaScript' 카테고리의 다른 글
[패키지 매니저] pnpm, yarn, npm 비교와 사용 경험 (0) | 2025.04.04 |
---|---|
[자바스크립트 모듈 시스템] CJS에서 ESM까지 (0) | 2025.04.03 |
브라우저의 렌더링 과정 (0) | 2025.03.19 |
[nodeJS] 백엔드와 브라우저 간 상호작용 (세션, 브라우저, 쿠키) (0) | 2023.03.31 |