<aside> 📖

우리는 이러한 이유로 다음의 라이브러리를 사용했어요

</aside>

페이지 라우팅 관리 : createBrowserRouter

createBrowserRouter는 React Router v6 이상에서 제공하는 기능으로, 객체를 사용하여 라우트를 정의하고 관리할 수 있습니다.

이번 프로젝트에서는 연습 모드와 실전 모드에 따른 페이지 URL를 각각 /progress/:stepId와 /challenge/:stepId 경로로 분리했습니다.

동적 URL을 활용하여 stepId 값에 따라 다른 페이지를 렌더링하고, 중첩 라우팅을 통해 공통 Layout을 관리했습니다.

• 사용 방법 예시

  • 연습 모드 URL: /progress/step1 → Step 1에 해당하는 연습모드 페이지 렌더링
  • 실전 모드 URL: /challenge/step2 → Step 2에 해당하는 실전모드 페이지 렌더링

• 도입 장점

  • 라우트 구조가 간결하고 관리가 쉬워져 유지보수에 용이함
  • 동적 매개변수를 통한 페이지 렌더링이 효율적으로 동작
  • 중첩 라우팅으로 공통 레이아웃 관리가 가능함

• 참고자료

PrivateRoute 도입

문제점: 사용자에게 보여지는 주소 가리기

<aside> 💡 티켓 프로세스를 교육하는 웹사이트 특성상, 주소를 직접 쳐서 접근하여 필요한 단계를 건너 뛰게 되면 예상치 못한 오류가 발생할 수 있음. 사용자가 주소를 직접 쳐서 접근하지 못하게 하거나, 사용자에게 보여지는 주소를 가릴 수는 없을까?

</aside>

해결책