보드가 없는 url 접근시 어떻게 하는게 좋나요?

Question

이번 강의로 보드를 삭제한 다음 $router.push('/') 를 통해 홈으로 보내는데요. 하지만 브라우저에서 뒤로가기를 통해 이미 삭제된 보드 url로 접근할 수 있었습니다. (직접 입력해서도 가능할거구요..) 위와 같은 경우 다시 홈으로 튕겨냈으면 하는데.. 이런 처리는 어떠한 방법으로 하는게 권장되나요? 제 생각에는 @ 단순하게 Board컴포넌트에서 FETCH_BOARD액션을 실행할 때 catch구문으로 홈으로 보낸다. @ 애초에 없는 페이지 접근이니 404처리를 위해 api/index.js에서 request 모듈의 catch구문에 404처리를 추가한다. (그런데 api단에서는 비동기로 데이터를 불러오는 인터페이스역할을 한다고 생각할 수 있는데 이 단계에서 데이터를 얻지 못 했다고 404처리를 추가하는게 맞을까 싶기도 합니다...) 정도 일까 싶은데요.. 네비게이션가드를 사용해볼까 했는데 그러기엔 일단 API서버에서 데이터페치가 일어나봐야 존재유무를 알 수 있으니 이 방법은 어려울거 같은데요.. vue의 관점에서 볼 때 위와 같은 경우 어떤 방법이 권장되는 방법일까요? 궁금합니다..

dbwlsdlqh12 · Answer

생각 못하고 지나갈뻔 했는데 예리하십니다!
말씀하신대로 api 에 404 추가해주었고 뒤로가기하면 /로 돌아오긴 하는데요,
콘솔에 404에러랑
actions.js?9946:21 Uncaught (in promise) TypeError: Cannot read property 'item' of undefined
at eval
이런 에러가 뜨는데 어떻게 처리해야할까요,,?

hello · Answer

성훈 킴님 예리하시네요~! 덕분에 저도 좋은 디버깅하고 갑니다~

SeongHun Kim · Answer

친절한 답변 감사합니다 ~~! 배울수록 재밌는 vue네요 다음에 또 궁금한 점 있으면 여쭤보겠습니다 ^^

jeonghwan · Answer

좋은 지적입니다. 보드 페이지에 대한 예외처리 문제인데요, 위에서 언급해 주신 두 가지 방법으로 해결할 수 있겠네요. 두 번째 방법을 더 설명 드리면.. 인증을 구현할때 API응답중 401만 onUnauthorized() 함수로 처리했었죠? 마찬가지로 404응답일 경우 onNotFound() 함수로 처리할 수 있습니다. const NOTFOUND = 404 const onNotfound = () => router.push(`/`) // ... if (status === UNAUTHORIZED) onUnauthorized() else if (status === NOTFOUND) onNotfound() 단 이렇게 하려면 서버와 응답 코드에 대한 약속을 한다는 가정이 있어야겠죠.