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