티스토리 뷰
[ SPA를 주제로 선정한 계기 ]
스타트업 면접을 마치고 1시간가량 필기테스트를 봤습니다.
필기테스트에서는 SPA 에 대해서 알고있는 지식을 자유롭게 적으라는 문항을 받았는데...
그당시 SPA가 무엇인지 아예 몰라서 공백으로 제출했습니다..
정말 계기에서 부끄러운 나자신이지만, 지금이라도 SPA가 무엇인지 이해를 위해서 포스팅을 해봅니다..!
[ MPA(Multi Page Application) ]
MPA는 페이지를 이동하면서 서버에서 새로운 페이지를 새로 랜더링하면서 전송하는 방식 입니다.
페이지에 정보가 많아지면 서버의 비효율과 느린 사용자경험을 줍니다.
이 불편함을 개선하기 위해서 만든 방안책이 SPA입니다.
SPA는 필요한 콘텐츠를 서버에서 비동기적으로 가져와서 현재 페이지내에서 업데이트를 합니다.
웹사이트에서 보내야하는 네트워크 요청을 최소화하기 때문에 빠른 응답성과 부드러운 사용자 경험을 제공합니다.
페이지가 많고 빠른 인터렉션이 필요하다면, SPA 프레임워크를 사용합니다.
[ SPA 정의 ]
- Single Page Application
- 단일 페이지 모던 웹 애플리케이션 입니다.
- 웹사이트에 있는 다양한 페이지를 하나의 페이지로 담는 것을 의미합니다.
- 단일 웹 문서만 로드한 다음 다른 콘텐츠가 표시될때 XMLHttpRequest 및 Fetch 와 같은 Javascript API를 통해 해당 단일 문서의 본문 콘텐츠를 업데이트하는 웹 앱 구현체 입니다.
- 사용자에게 부드럽고 빠른 웹경험을 제공해줍니다.
- 사용자가 처음 웹사이트에 접속하면 핵심 정적 리소스(HTML, CSS, Javascript)를 다운로드합니다.
사용자가 다른 페이지로 이동하면, 페이지에서 변경이 필요한 부분을 로딩하고 전체페이지를 다시 로딩하지 않습니다. - jQuery, React, Vue, Angular 와 같은 Javascript 프레임워크 및 라이브러리를 사용하여 구현합니다.
SPA 개발에 필요한 다양한 기능과 도구를 제공하여 복잡한 웹애플리케이션을 효율적으로 개발할 수 있도록 도와줍니다. - 사용자는 서버에서 완전히 새로운 페이지를 로드하지 않고도 웹사이트를 사용할 수 있으므로, 성능이 향상되고 보다 동적인 경험을 얻을 수 있습니다.
- 사용자가 처음 웹사이트에 접속하면 핵심 정적 리소스(HTML, CSS, Javascript)를 다운로드합니다.
[ SPA 특징 ]
(1) 동적콘텐츠 로딩
SPA는 필요한 콘텐츠를 서버에서 비동기적으로 가져와서 페이지를 업데이트 합니다.
사용자가 페이지를 이동해도 전체 페이지를 다시 로드하지 않고 필요한 부분만을 갱신하기 때문에 빠른 웹경험을 제공할 수 있습니다.
(2) 클라이언트 사이드 라우팅
SPA는 클라이언트 측에서 Javascript로 라우팅을 처리합니다.
MPA와 다르게 서버로부터 새로운 페이지를 요청하지 않고도 다른 화면으로 전환할 수 있습니다.
(3) 상태관리
SPA는 클라이언트 측에서 애플리케이션 상태를 관리합니다.
사용자 인터페이서(UI)의 현재 상태에 따라 서버와 데이터를 주고받아서 동기화 할 수 있습니다.
덕분에 사용자에게 빠른 인터렉션을 제공합니다.
(4) 재사용 가능한 컴포넌트
SPA는 일반적으로 재사용 가능한 컴포넌트 기반 구조를 가지고 있어서 유지보수성과 확장성이 뛰어납니다.
컴포넌트를 독립적으로 개발 및 테스트할 수 있어서 생산성이 향상됩니다.
[ SPA 전체 단계 ]
(1) 첫번째 서버 요청
사용자(클라이언트)가 https://example.com 에 접속합니다.
서버는 브라우저에 응답하여, 브라우저는 아무런 내용이 없는 기본 HTML만 받습니다.
<!-- index.html (서버가 보내주는 것) -->
<!DOCTYPE html>
<html>
<head>
<title>SPA 예제</title>
</head>
<body>
<div id="app">로딩중...</div>
<!-- 중요: JavaScript 파일 -->
<script src="/js/app.js"></script>
</body>
</html>
(2) Javascript 파일 로드 및 실행
브라우저가 <script src="/js/app.js"><script> 를 만나면
브라우저는 서버에게 자바스크립트(app.js) 파일을 주세요 라고 요청하고
서버는 브라우저에 응답하여 자바스크립트 파일을 전달합니다.
이때 Javascript 파일이 실행되면서 자동으로 홈데이터를 요청합니다.
// app.js (서버에서 받는 파일)
// 1. 초기 화면 로드
document.addEventListener('DOMContentLoaded', function() {
console.log('페이지 로드 완료');
loadHomePage(); // 홈 페이지 데이터 로드
});
// 2. 홈 페이지 데이터를 서버에서 받아와서 화면에 그리기
function loadHomePage() {
fetch('/api/home-data') // 서버에 API 요청
.then(response => response.json())
.then(data => {
// 받은 데이터: { title: '홈', content: '환영합니다' }
document.getElementById('app').innerHTML = `
<h1>${data.title}</h1>
<p>${data.content}</p>
<button onclick="loadAboutPage()">About 페이지로 이동</button>
`;
});
}
// 3. About 페이지 데이터를 서버에서 받아와서 화면에 그리기
function loadAboutPage() {
fetch('/api/about-data') // 또 다른 API 요청
.then(response => response.json())
.then(data => {
// 받은 데이터: { title: 'About', content: '우리는...' }
document.getElementById('app').innerHTML = `
<h1>${data.title}</h1>
<p>${data.content}</p>
<button onclick="loadHomePage()">Home 페이지로 이동</button>
`;
});
}
(3) 초기화면 표시
서버에게 /api/home-data API 를 요청하면, 서버는 JSON 형태의 응답데이터를 전달하고
Javascript가 이 JSON 응답데이터를 받아와서 화면을 그립니다.
// /api/home-data JSON 응답데이터
{
"title": "메인 홈페이지",
"content": "환영합니다."
}
(4) 사용자 상호작용 (버튼클릭)
사용자가 "About 페이지 이동" 버튼을 클릭하면 아래와 같은 순서로 진행됩니다.
(4-1) 버튼클릭
(4-2) Javascript의 loadAboutPage() 함수 실행
(4-3) 브라우저는 서버에게 /api/about-data API를 요청합니다
(4-4) 서버는 JSON 데이터를 전달하여 브라우저에게 응답합니다.
SPA는 완전한 HTML파일이 아닌, 필요한 데이터만을 서버에 요청하여 JSON으로 보내주고
Javascript가 JSON데이터를 받아서 HTML 화면을 그려줍니다.
(5) DOM 업데이트
Javascript가 받은 데이터로 DOM을 갱신합니다.
DOM을 갱신함으로써 화면이 변경되어, 페이지가 이동되는 것처럼 보일겁니다.
[ 내가 생각하는 SPA ]
- 클라이언트가 서버에게 페이지를 요청할때 서버가 페이지에 관한 HTML을 줬다면, 버튼을 클릭할때 페이지를 이동해야되거나, 그럴때 서버에게 요청하여 모든 페이지의 html을 로드를 하는게 아니라 Ajax나 Javascript 프레임워크를 이용하여, API호출로 서버에게는 필요한 데이터를 JSON형태의 데이터를 요청합니다.
- 초기로드: 서버가 완전한 HTML 페이지를 한번에 제공합니다.
- 이후 데이터로드: API호출로 필요한 데이터를 받습니다.
- 클라이언트에서 랜더링: 서버에서 받은 데이터를 HTML에 동적으로 뿌려줍니다.
- 화면단에 동적으로 데이터를 뿌릴 수 있도록 하는 기술이라고 생각합니다.
- 필요한 데이터를 서버에게 요청하고, 서버에서 JSON 형태의 데이터를 응답 받았다면 클라이언트의 Javascript가 화면을 그려서 새로운 HTML을 생성하고, DOM을 갱신하도록 합니다.
[ 참고 ]
https://docs.tosspayments.com/resources/glossary/spa
https://www.youtube.com/watch?v=eIxDHgzGCnY
'Backend > 꾸준히 TIL' 카테고리의 다른 글
| 콜드스타트 (Cold Start) (0) | 2025.12.15 |
|---|---|
| 핫리로드 (Hot Reload) (1) | 2025.12.13 |
| DLQ 이론 (0) | 2025.12.05 |
| HTTP 헤더 2 - 캐시와 조건부 요청헤더 & 프록시 캐시 & 캐시 무효화 (0) | 2025.11.24 |
| [WIL-01 주차] 1주차 회고 (2) | 2024.12.22 |
- Total
- Today
- Yesterday