[기술 정리] 9. SPA (Single Page Application)

KangHo Lee

Nov 24, 2024

[기술 정리] 9. SPA (Single Page Application)

💡

단일 HTML 페이지로 구성된 웹 애플리케이션입니다.

SPA는 처음에 전체 페이지를 로드하고, 이후 사용자 인터랙션에 따라 콘텐츠를 동적으로 변경합니다.

주요 특징

단일 HTML 페이지:

초기 로드 시 단 하나의 HTML 페이지를 다운로드합니다.

클라이언트 사이드 라우팅:

브라우저의 주소 표시줄을 통해 다른 URL로 이동하더라도 새로운 페이지를 요청하지 않고, 클라이언트 측에서 UI를 업데이트합니다.

비동기 데이터 로딩:

서버에서 필요한 데이터를 비동기적으로 로드하여 전체 페이지를 다시 로드하지 않고도 콘텐츠를 업데이트합니다.

빠른 응답 시간:

전체 페이지를 다시 로드하지 않기 때문에, 사용자 인터페이스가 더 빠르고 부드럽게 반응합니다.

예제


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple SPA</title>
</head>
<body>
    <nav>
        <button onclick="loadPage('home')">Home</button>
        <button onclick="loadPage('about')">About</button>
        <button onclick="loadPage('contact')">Contact</button>
    </nav>
    <div id="content">
        <h1>Home Page</h1>
        <p>Welcome to the Home Page!</p>
    </div>
    <script>
        function loadPage(page) {
            const contentDiv = document.getElementById('content');
            switch (page) {
                case 'home':
                    contentDiv.innerHTML = '<h1>Home Page</h1><p>Welcome to the Home Page!</p>';
                    break;
                case 'about':
                    contentDiv.innerHTML = '<h1>About Page</h1><p>Learn more about us on this page.</p>';
                    break;
                case 'contact':
                    contentDiv.innerHTML = '<h1>Contact Page</h1><p>Get in touch with us through this page.</p>';
                    break;
                default:
                    contentDiv.innerHTML = '<h1>Home Page</h1><p>Welcome to the Home Page!</p>';
                    break;
            }
        }
    </script>
</body>
</html>

<nav> 태그에 있는 버튼을 누를 때 마다 <div id=”content”>안의 내용이 동적으로 변합니다.