클라이언트 사이드 라우팅

**클라이언트 사이드 라우팅(Client-Side Routing, CSR)**은 페이지 전체를 서버에서 새로 받아오는 대신, 브라우저가 직접 주소를 감지하고 화면의 필요한 부분만 갈아끼우는 방식입니다. 싱글 페이지 애플리케이션(SPA)의 핵심 기술이죠.

과거 주소가 바뀔 때마다 화면이 하얗게 변하며 깜빡이던 시절과는 완전히 다른 매끄러운 경험을 선사합니다.

---

1. 동작 단계 (Step-by-Step)

사용자가 웹사이트 내에서 링크를 클릭했을 때 벌어지는 마법 같은 과정은 다음과 같습니다.

1단계: 이벤트 가로채기 (Interception)

사용자가 <a href="/about"> 링크를 클릭하면, 브라우저는 원래 서버에 새로운 HTML을 요청하려고 합니다. 이때 자바스크립트(라우터 라이브러리)가 이 클릭 이벤트를 중간에 가로채고, 브라우저의 기본 동작을 중단(e.preventDefault())시킵니다.

2단계: 주소창 업데이트 (History API)

서버에 요청은 보내지 않지만, 사용자에게는 주소가 바뀐 것처럼 보여야 합니다. 이때 브라우저의 History API(pushState)를 사용합니다.

• 페이지를 새로고침 하지 않고도 브라우저 주소창의 URL만 살짝 바꿉니다.
• 브라우저의 '뒤로 가기' 히스토리 스택에도 이 주소를 추가합니다.

3단계: 경로 매칭 (Matching)

라우터는 현재 바뀐 URL(예: /about)을 미리 정의된 라우팅 맵과 대조합니다.

• / -> Home 컴포넌트
• /about -> About 컴포넌트
• /products -> ProductList 컴포넌트

4단계: DOM 업데이트 (Rendering)

일치하는 컴포넌트를 찾으면, 라우터는 현재 화면에 그려져 있는 이전 컴포넌트를 떼어내고 새 컴포넌트를 그 자리에 집어넣습니다. 리액트 같은 프레임워크를 사용한다면 가상 DOM(Virtual DOM)을 통해 이 과정이 매우 효율적으로 일어납니다.

---

2. 핵심 도구: History API

클라이언트 사이드 라우팅의 주인공은 바로 브라우저가 제공하는 window.history 객체입니다.

// 페이지 이동 없이 URL만 바꾸기
window.history.pushState({ page: 1 }, "title 1", "/about");

// 뒤로 가기/앞으로 가기 감지
window.onpopstate = function(event) {
  console.log("주소가 바뀌었습니다: " + document.location.pathname);
  // 여기서 바뀐 주소에 맞는 컴포넌트를 다시 렌더링함
};

---

3. 서버 사이드 라우팅(SSR)과의 비교

구분	서버 사이드 라우팅 (Traditional)	클라이언트 사이드 라우팅 (Modern)
요청 대상	매번 서버에 새 HTML 요청	최초 1회만 HTML/JS 다운로드 후 API 요청
화면 전환	전체 새로고침 (깜빡임 발생)	필요한 부분만 교체 (매우 부드러움)
데이터 전송	매번 전체 페이지 데이터 전송	필요한 JSON 데이터만 전송 (대역폭 절약)
초기 로딩	빠름 (필요한 것만 딱 옴)	느림 (전체 앱 로직을 먼저 받아야 함)

---

4. 주의할 점: "404 Not Found" 문제

클라이언트 사이드 라우팅을 사용할 때 가장 흔히 겪는 문제입니다.

사용자가 /about 주소에서 새로고침을 누르면, 브라우저는 서버에 진짜로 /about이라는 경로의 파일을 달라고 요청합니다. 하지만 서버에는 index.html 하나뿐이라서 404 에러가 날 수 있습니다. 이를 해결하기 위해 서버(Nginx, Apache, Vercel 등)에서 **"어떤 경로로 요청이 오든 무조건 index.html을 보여줘라"**는 설정(Fallback)이 반드시 필요합니다.