<aside> 👩🏻‍💻 목차

</aside>

1. SSR과 CSR 비교

SSR

• 위키백과

  • HTML 요청이 계속 온다

    

CSR

• React Router
  • 네트워크 내 문서 요청 받은게 없이 페이지를 이동할 수 있다.
  • json에서 필요한 이미지만 요청

History API - Web API | MDN

2. 문서 읽기

Feature Overview v6.18.0

createBrowserRouter v6.18.0

NavLink v6.18.0

useSearchParams v6.18.0

기능 개요 중

Client Side Routing (1. SSR과 CSR 비교 참고)

1. traditional websites

   • 브라우저가 웹 서버에 요청: 다운로드, CSS와 JavaScript assets 평가, 서버에 보낸 HTML 렌더링
   • 사용자가 링크를 클릭하면 새 페이지에 대한 프로세스가 다시 시작된다.

2. Client Side routing (장점!)

   • 앱이 서버에서 다른 문서를 다시 요청하지 않고도 링크를 클릭하여 URL을 업데이트할 수 있다.
   • 대신 앱은 새로운 UI를 즉시 렌더링하고 fetch를 통해 데이터를 요청하여 페이지를 새로운 정보로 업데이트할 수 있다.
   • 빠른 사용자 경험이 가능하다. = 브라우저가 완전히 새로운 문서를 요청하거나 다음 페이지에 대한 CSS와 JavaScript assets를 재평가하지 않는다.
   • 링크 애니메이션을 통해 더 역동적인 사용자 경험을 제공할 수 있다.

그 외 공식 페이지 참고하여 실습 !

3. 실습

1. nested Route + router
2. 탭에 따른 스타일링