# 라우팅 개선하기 ## 지침 기본 라우팅 시스템을 구축했으니, 이제 사용자 경험을 개선하고 개발자 도구를 향상시키는 전문적인 기능들로 확장할 차례입니다. 실제 애플리케이션에서는 단순한 템플릿 전환 그 이상이 필요합니다. 동적 페이지 제목, 라이프사이클 훅, 확장 가능한 아키텍처 등도 요구됩니다. 이번 과제에서는 프로덕션 웹 애플리케이션에서 흔히 볼 수 있는 두 가지 필수 기능으로 라우팅 구현을 확장할 것입니다. 이 향상된 기능들은 은행 앱을 보다 완성도 있게 만들고 향후 기능 확장 토대를 마련할 것입니다. 현재 경로 선언에는 사용할 템플릿 ID만 포함되어 있습니다. 하지만 새 페이지를 표시할 때는 때때로 조금 더 많은 정보가 필요합니다. 두 가지 추가 기능으로 라우팅 구현을 개선해 봅시다: ### 기능 1: 동적 페이지 제목 **목표:** 각 템플릿에 제목을 부여하고 템플릿이 변경될 때 이 제목으로 브라우저 창 제목을 업데이트합니다. **중요한 이유:** - **사용자 경험을 개선**하여 브라우저 탭에 설명적인 제목을 표시 - **스크린 리더 및 보조 기술에 대한 접근성 향상** - **더 나은 북마크 및 브라우저 기록 컨텍스트 제공** - **전문적인 웹 개발 관행 준수** **구현 방법:** - 각 경로에 제목 정보를 포함하도록 routes 객체 확장 - `updateRoute()` 함수 수정하여 `document.title`을 동적으로 업데이트 - 화면 간 탐색 시 제목이 올바르게 변경되는지 테스트 ### 기능 2: 라우트 라이프사이클 훅 **목표:** 템플릿 변경 후에 코드를 실행할 옵션 추가. 대시보드 페이지가 표시될 때마다 개발자 콘솔에 `'Dashboard is shown'`를 출력합니다. **중요한 이유:** - 특정 경로가 로드될 때 사용자 정의 로직 실행 가능 - 분석, 로깅, 초기화 코드용 훅 제공 - 더 복잡한 라우트 동작의 기반 생성 - 웹 개발에서 옵서버 패턴 시연 **구현 방법:** - 경로 구성에 선택적 콜백 함수 속성 추가 - 템플릿 렌더링 완료 후 콜백 함수(있는 경우) 실행 - 콜백이 정의된 모든 경로에서 기능 작동 보장 - 대시보드 방문 시 콘솔 메시지 출력 여부 테스트 ## 평가 기준 | 기준 | 우수 | 적절 | 개선 필요 | | -------- | -------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | | | 두 기능이 모두 구현 및 작동함. `routes` 선언에서 새 경로 추가 시 제목과 코드 추가도 작동함. | 두 기능이 작동하지만 동작이 하드코딩되어 `routes` 선언을 통해 구성할 수 없음. 제목과 코드 추가를 포함한 세 번째 경로 추가 시 작동하지 않거나 부분적으로만 작동함. | 기능 중 하나가 누락되었거나 제대로 작동하지 않음. | --- **면책 조항**: 이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 노력하고 있으나, 자동 번역에는 오류나 부정확성이 포함될 수 있음을 유의하시기 바랍니다. 원본 문서가 권위 있는 자료로 간주되어야 합니다. 중요한 정보의 경우 전문적인 인간 번역을 권장합니다. 본 번역본의 사용으로 인해 발생하는 오해나 오해석에 대해 당사는 책임을 지지 않습니다.