SPA 2

(CS) SPA vs MPA

SPA (Single Page Application)단일 HTML 파일에서 동작하는 웹 애플리케이션페이지 전환 시 브라우저가 전체 페이지를 다시 요청하지 않고 자바스크립트가 라우팅을 처리하고 필요한 데이터만 받아와서 화면을 갱신history.pushState 등으로 브라우저 주소만 바꾸고 JS를 통해 DOM을 조작하여 뷰를 갱신전체 새로고침 없음대표 프레임워크: React, Vue, Angular예: example.com/dashboard → 전체 페이지 새로고침 없이 JS로 화면만 변경⸻MPA (Multi Page Application)페이지마다 별도의 HTML 파일을 서버에서 받아오는 전통적인 웹 방식URL이 바뀔 때마다 서버에 새 요청을 보내고 전체 HTML 페이지를 새로 로드대표 프레임워크: Sp..

(React) 기본 구조 SPA

React란?React는 Facebook에서 만든 UI 라이브러리로, 사용자 인터페이스를 컴포넌트 기반으로 구축할 수 있게 도와줌!대부분의 React 프로젝트는 SPA(Single Page Application) 형태로 개발됨 SPA는 하나의 HTML 파일로 시작해서, 필요한 화면을 브라우저에서 JavaScript로 동적으로 렌더링하는 구조특징컴포넌트 기반: 화면을 작은 단위로 나눠 재사용 가능Virtual DOM: 효율적인 렌더링을 위한 가상 돔 구조CSR 방식 기본: 초기 로딩 이후 빠른 사용자 경험 제공SPA란?SPA(Single Page Application)는 말 그대로 하나의 HTML 페이지에서 모든 화면을 구성하는 웹 애플리케이션 구조특징최초에 서버에서 index.html 한 장만 내려받음이..