반응형
기존의 MPA(Multi-Page Application)와 SPA(Single Page Application)의 차이점
JSP (Java Server Pages)
- 서버 사이드 렌더링(SSR): JSP는 클라이언트의 요청에 대해 서버에서 HTML을 생성하고 렌더링하는 방식이다. 이는 매 요청마다 전체 페이지를 새로 로딩하여 보여준다. 동적인 웹 페이지나 웹 애플리케이션을 구축하기 위해 사용된다.
- 성능과 확장성의 제한: 매번 전체 페이지를 새로 로딩하기 때문에 네트워크 사용량이 늘어나고, 사용자 경험(UX)이 저하될 수 있다. 또한 대규모 트래픽을 처리하는 데 있어 서버 부하가 증가한다.
- 데이터베이스 연동, 사용자 요청 처리 등 복잡한 로직을 구현할 수 있다. 이를 통해 초기 웹 개발에서 널리 사용되었으며, 서버 측 로직과 비즈니스 로직이 밀접하게 결합되어 있다.
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<html>
<head><title>JSP 예제</title></head>
<body>
<%
String name = "JSP 페이지";
%>
<h1>안녕하세요, <%= name %>입니다.</h1>
</body>
</html>HTML (HyperText Markup Language)
- 웹 페이지의 구조를 정의하는 표준 마크업 언어이다. 웹 페이지의 텍스트 콘텐츠, 링크, 이미지 등을 정의하고 웹 브라우저가 해석하여 사용자에게 시각적으로 표시한다.
- 정적인 콘텐츠 제공에 적합하다. 사용자 상호작용에 동적으로 반응하기 위해서는 JavaScript와 CSS와 결합하여 사용된다.
- example
<!DOCTYPE html>
<html>
<head>
<title>HTML 예제</title>
</head>
<body>
<h1>안녕하세요, HTML 페이지입니다.</h1>
<p>이것은 단순한 정적 페이지 예제입니다.</p>
</body>
</html>SPA (Single Page Application)
- 클라이언트 사이드 렌더링(CSR): SPA는 웹 애플리케이션의 초기 로딩 후, 사용자와의 상호작용에 따라 필요한 데이터만을 서버로부터 비동기적으로 요청하여 클라이언트 측에서 동적으로 페이지를 업데이트한다.
- 향상된 사용자 경험: 페이지 전환 없이 UI를 업데이트하기 때문에 애플리케이션의 반응성이 높아지고, 사용자 경험이 개선된다.
- 분리된 백엔드와 프론트엔드: SPA 개발은 백엔드 로직과 프론트엔드 로직을 분리하여 개발할 수 있게 해준다. 이는 개발 과정을 더 유연하게 하고, 재사용 가능한 컴포넌트 기반의 개발을 가능하게한다.
- 단일 페이지로 구성되며, 사용자와의 상호작용을 통해 동적으로 콘텐츠를 업데이트하는 웹 애플리케이션의 형태이다.
- React, Angular, Vue.js 같은 현대적인 JavaScript 프레임워크/라이브러리를 사용하여 구현된다.
import React from 'react';
import ReactDOM from 'react-dom';
function App() {
return <h1>안녕하세요, SPA 입니다.</h1>;
}
ReactDOM.render(<App />, document.getElementById('root'));화면의 재로딩 없는 부드러운 페이지 전환
- 사용자가 웹 애플리케이션 내에서 다른 페이지로 이동할 때, 전통적인 방식은 새 페이지를 로드하기 위해 서버에 요청을 보내고, 브라우저가 전체 페이지를 다시 렌더링한다. 이 과정에서 화면의 깜박임이 발생한다. 반면, SPA(Single Page Application)에서는 페이지 간 이동 시에도 깜박임 없이 부드러운 전환을 제공한다.
- 장점: 사용자 경험을 크게 향상시킨다. 페이지 로딩 시간이 줄어들고, 애플리케이션이 더 반응적으로 느껴진다.
- 구현 방식: SPA 구현에 사용되는 현대적인 프레임워크나 라이브러리(예: React, Angular, Vue.js)는 브라우저의 기본 페이지 로딩 메커니즘을 사용하지 않고, JavaScript를 사용하여 클라이언트 측에서 페이지를 동적으로 렌더링한다. 사용자의 요청에 따라 필요한 데이터만 서버로부터 가져와서 현재 페이지에 동적으로 콘텐츠를 업데이트한다.
출처:
https://velog.io/@deli-ght/JSP%EC%99%80-SPA
https://velog.io/@hongduhyeon/React-SPA
반응형
'IT > React' 카테고리의 다른 글
| 양방향 바인딩과 단방향 바인딩 (0) | 2024.03.04 |
|---|---|
| Prettier 설치, 설정 .eslintrc 작성하기, VScode 자동 포매팅 설정 (0) | 2024.02.18 |
| CRA에서 Vite로 전환, Vite 시작, Vite 설치하기 (2) | 2024.02.08 |
| React에서 여러 상태 한 번에 관리하는 hook(훅) 만들기 (0) | 2024.01.25 |
| React의 useCallback 예제 (0) | 2023.11.29 |