반응형
🌐 SPA 구축하기
SPA(Single Page Application)는 단 한 개의 HTML 페이지에서 동적으로 콘텐츠를 바꿔가며 작동하는 웹 애플리케이션 구조입니다. jQuery를 사용하면 간단한 형태의 SPA를 구현할 수 있습니다.
📌 SPA란 무엇인가요?
- 페이지 전체를 새로고침하지 않고 필요한 부분만 동적으로 갱신합니다.
- 빠른 반응성과 부드러운 사용자 경험을 제공합니다.
- URL 변경도 자바스크립트로 제어합니다 (예:
#home,#about등).
🧱 프로젝트 구조 예시
index.html
js/
└ app.js
views/
├ home.html
├ about.html
└ contact.html
🛠 기본 HTML 구성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery SPA</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
<div id="view"></div>
</body>
</html>
🔁 app.js - 간단한 라우터 구현
$(function() {
function loadView(viewName) {
$("#view").load(`views/${viewName}.html`);
}
function router() {
const hash = location.hash.replace("#", "") || "home";
loadView(hash);
}
$(window).on("hashchange", router);
// 초기 로드
router();
});
위 코드는 #home, #about, #contact 해시 값에 따라 각 HTML 뷰를 #view 영역에 로드합니다.
📄 views/home.html
<h2>🏠 홈 페이지</h2>
<p>여기는 홈입니다. 환영합니다!</p>
📄 views/about.html
<h2>📖 About 페이지</h2>
<p>이 사이트는 jQuery SPA 예제입니다.</p>
📄 views/contact.html
<h2>📬 Contact 페이지</h2>
<p>문의는 이메일로 보내주세요: contact@example.com</p>
🧠 요약
- hashchange 이벤트를 감지하여 라우팅을 구현
- 각 뷰 파일을
$.load()로 동적으로 불러오기 - 페이지 새로고침 없이 내용 변경
이처럼 jQuery만으로도 간단한 SPA 형태의 애플리케이션을 구현할 수 있습니다. 더 고급 기능을 원한다면 pushState 기반의 라우터나 템플릿 엔진도 연동할 수 있습니다.
반응형
'Programming' 카테고리의 다른 글
| jQuery API 통합 실전 (64) | 2025.10.15 |
|---|---|
| jQuery 유지보수성과 재사용성 (66) | 2025.10.14 |
| jQuery 이벤트 위임과 동적 요소 처리 (54) | 2025.10.11 |
| jQuery 성능 최적화 (56) | 2025.10.10 |
| jQuery 플러그인 만들기 (42) | 2025.10.09 |
