[6주차] 회고
6주 차에는 '레스토랑 상세페이지 제작' 과제를 진행하였다.
<To-dos>
- 레스토랑 상세 페이지 구현
- 레스토랑 상세 페이지 라우팅 설정
레스토랑 상세 페이지를 구현하는 것은 크게 어렵지 않았는데, url, 라우팅 설정에서는 어려움이 있었다.
1. Relative URL 설정
구현을 마친 후에 테스트를 실행해봤는데, 코드숨에서 제공한 테스트 중 하나를 실패하였다.
해당 테스트는 레스토랑 상세페이지 URL (/restaurants/1)로 바로 접근했을 때 데이터가 정상적으로 표시되는지 확인하는 것이었다. 당시 restaurants/1로 접근하려고 하면 restaurants/main.js로 접근하여 fail이 떨어졌다.
처음엔 restaruants/main.js로 접근되는 이유를 몰라서 구글링 키워드도 잘못 잡았었다. historyAPIFallback이 제대로 동작을 안하는 건가 싶어서 historyAPIFallback 옵션을 계속 수정했었다. 하지만 index.html에 main.js를 절대 경로로 설정해보라는 글을 보고, 이제서야 historyAPIFallback은 정상적으로 동작하고 있다는 걸 깨달았다. historyAPIFallback은 index.html을 정상적으로 서빙하는데 그 안에서 실행되는 태그가 <script src="main.js"> </script> 경로를 잘못 잡은 것이 원인이었다.
index.html에서 main.js를 절대 경로로 설정하여 에러를 해결하였는데, 윤석님께서 base 태그를 알려주셔서 base 태그도 처음으로 사용해보았다.
historyAPIFallback을 적용할 때, 그 역할에 대해 정확히 알고 있었으면 구글링 소요 시간을 줄일 수 있었을 텐데 라는 생각이 든다. 앞으로 기능을 적용할 때 그 기능이 정확히 어떤 역할을 하는지 공부하고 지나가야겠다는 생각을 했다.
2. 라우팅 v6 업그레이드
강의에서는 route 5 버전을 사용하고 있어서 그에 맞게 코딩을 했었는데, 후에 윤석님이 버전 6으로 업그레이드 해보라는 피드백을 주셨다. router v5, v6의 차이점에 대해 공부하여 v6를 적용했는데, 생각보다 수정할 부분이 많아서 고생했다.
<적용한 변경 사항>
- Switch 태그 => Routes 태그
- Route안의 component 속성명 => element
- Route안에 exact 속성 삭제
- match.params 사용 중지 => useParam 사용
- index 키워드 사용
- Not Found 페이지는 path="*" 로 세팅
프로젝트에서 라우팅 기능을 많이 사용하지 않아서 그런지, v6로 업그레이드 하면서 exact 속성을 사용하지 않아도 된다는 것 외에는 특별히 장점을 느끼지 못했다. 하지만 bundle size가 많이 준다고 하니, 그것만으로도 도입할만한 이점이 있는 것 같다.
위 내용 외에 에러 처리 부분에도 어려움이 있었는데, 아직 해결하지 못했다. api 호출에 실패했을 때 에러 처리를 어떻게 하는지 찾아서 추가로 적용해봐야겠다.
이번주 과제는 공휴일 덕분에 평소보다 많은 시간을 투자할 수 있었다. 6월이 되며 부분 재택으로 전환되어 코드숨 강의에 시간을 많이 할애하지 못했는데, 오랜만에 조금 여유롭게 과제를 할 수 있었다. 하지만 뒷심이 약해서.. 피드백 받은 부분도 바로바로 수정하지 못하고 결국 api 에러 처리 부분은 아직 구현하지 못했다. 다음주는 끝까지 힘내봐야겠다👍