심화 SPA

심화 SPA (Single Page Application)

SPA는 웹 애플리케이션에서 단일 HTML 페이지를 로드한 뒤, 페이지 전체를 새로 고치지 않고 일부만 동적으로 렌더링하여 사용자 경험을 향상시키는 방식이다.

 

SPA에서 AJAX의 역할

AJAX (Asynchronous JavaScript and XML)는 SPA에서 핵심적인 역할을 하며, 서버와 비동기적으로 데이터를 교환하고 일부 UI만 갱신하도록 돕는다.

AJAX의 주요 특징

1. 페이지 전체 새로 고침 없음:
   • 서버와 데이터만 주고받아 필요한 부분만 업데이트.
   • 사용자 경험(UX) 향상.
2. 비동기 통신:
   • 사용자 인터페이스가 차단되지 않음.
   • 백그라운드에서 데이터를 가져오는 동안 사용자는 다른 작업 가능.
3. JSON 포맷 사용:
   • SPA에서는 주로 JSON 데이터를 주고받아 서버와의 통신을 간결하게 처리.

 

 SPA의 작동 원리

1. 초기 로드:
   • 단일 HTML 페이지와 필요한 JavaScript, CSS 파일을 로드.
2. 클라이언트 측 라우팅:
   • URL이 변경되어도 새 페이지를 요청하지 않고, JavaScript가 동적으로 콘텐츠를 교체.
   • 클라이언트 라우터(e.g., React Router)를 사용.
3. AJAX로 데이터 요청:
   • 특정 사용자 요청 시 서버와 데이터를 주고받음.
   • 서버로부터 받은 데이터를 UI에 반영.

 

SPA의 동적 렌더링 과정

예제: 사용자의 프로필 데이터를 표시하는 SPA

1. 사용자가 "프로필 보기" 버튼 클릭:
   • JavaScript가 클릭 이벤트를 감지.
   • AJAX 요청을 통해 서버에서 사용자 데이터를 가져옴.
2. AJAX 요청:
   • /api/user/profile 엔드포인트에서 사용자 데이터(JSON)를 가져옴.
   • 가져온 데이터를 DOM에 동적으로 삽입.

fetch("/api/user/profile")
  .then((response) => response.json())
  .then((data) => {
      document.getElementById("profile").innerHTML = `
          <h2>${data.name}</h2>
          <p>${data.email}</p>
      `;
  })
  .catch((error) => console.error("Error fetching profile:", error));

1. UI 업데이트:
   • 전체 페이지를 새로 고치지 않고, "프로필" 영역만 업데이트.

 

SPA와 AJAX의 장점

1. 빠른 페이지 전환:
   • 새로 고침 없이 필요한 데이터만 교환하여 빠른 반응 속도 제공.
2. 서버 부하 감소:
   • 전체 HTML을 전송하는 대신 JSON 데이터를 교환하므로 네트워크 부하와 서버 작업량 감소.
3. 부드러운 사용자 경험:
   • 새로 고침 없는 콘텐츠 갱신으로 끊김 없는 경험 제공.

 

 SPA 심화 적용 예: React

AJAX를 통한 동적 데이터 로드:

import React, { useState, useEffect } from "react";

const Profile = () => {
    const [profile, setProfile] = useState<any>(null);

    useEffect(() => {
        fetch("/api/user/profile")
            .then((res) => res.json())
            .then((data) => setProfile(data))
            .catch((err) => console.error("Error fetching profile:", err));
    }, []);

    return (
        <div>
            {profile ? (
                <div>
                    <h2>{profile.name}</h2>
                    <p>{profile.email}</p>
                </div>
            ) : (
                <p>Loading...</p>
            )}
        </div>
    );
};

export default Profile;

• React를 활용한 AJAX 요청:
  • useEffect로 컴포넌트가 마운트될 때 데이터 요청.
  • 가져온 데이터는 상태(state)에 저장.
  • 상태가 변경되면 해당 부분만 다시 렌더링.

 

SPA와 AJAX의 한계

1. 초기 로드 시간:
   • SPA는 처음에 모든 리소스를 로드하므로 초기 로딩 시간이 길어질 수 있음.
2. SEO(검색 엔진 최적화):
   • SPA는 클라이언트 측 렌더링을 기반으로 하여, 크롤러가 콘텐츠를 제대로 인덱싱하지 못할 수 있음.
   • 해결: 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG) 사용.
3. 브라우저 호환성:
   • AJAX는 현대적인 브라우저에서 잘 동작하지만, 일부 구형 브라우저에서는 제약이 있을 수 있음.