내가 몇 일 동안 붙들고 있는 에러를 상사는 너무 쉽게 해결하더이다..
그것에 관한 썰.
1. Typography variant=’span’
자꾸 버건디 색의 에러가 나는 것이다. dom 어쩌구 관련해서 뭐 대단한거 아니겠지 eslint 인가 그것 때문인가? 해서 상사에게 미팅때 물어보니 MUI 의 Typography 에 가서 variant=’span’을 넣더니, 바로 자주빛 에러가 사라짐…!
그래서 어떻게 아냐고 했더니, 이건 MUI를 자주 사용하다 보니, 경험과 습관으로 아는 것이라고 했다..! 진짜 리스펙..!
그 다음 전체 가능한 조회 사이트에서 클릭 시 해당 상세사이트로 이동하는 과정 중에서 자꾸 api 호출이 무한대로 이루어지고 화면 껌뻑임이 일어나기 시작했다. 그리고 navigate한 페이지로 이동이 안됨. 그래서 api도 체크하고 (문제없음), addcase에서 fulfilled, rejected case도 처리하고, 에러도 chatGPT에게 보내보고, 해당 페이지.js 에서 dispatch로 api 호출시 에러처리도 해보았는데도 잡히지 않음 ㅠㅠ
2. undefined
계속 여러 번 호출이 되길래, 아 이게 혹시 useEffect의 늪인가 보다. 싶어서 useEffect에 관련해서 문서도 뒤적여 보고, 결국에는 방대한 Redux toolkit 문서를 뒤적거려야 하나 하고 있던 찰나, 미팅에서 물어보니, 잘 보면 콘솔에서 undefined 가 나왔으니 그냥 undefined 가 아니면! 이걸 해라 라는 조건을 하나 더 걸라는 것이었다…!!! 나는 null 조건만 넣었음…!!! 그래서 에러는 일단 잡음;;;
상사 왈, 에러를 너무 깊이 생각하지 말아라는 것이었다. 그래서 어? 그럼 페이지 이동은? 했더니 그냥 그건 여기서 처리 하지 말고 private route 그걸 공부해서 그리고 이 페이지 참조해서 그걸로 만드면 된다고 했다. 헐… 에러 단순하게도 생각해 보자..!
3. private route / outlet children
로그인에서 비번을 잘못 쳐도 페이지가 navigate 되어 넘어가는 상황… 위와 똑같이 모든 페이지에 에러 처리를 넣었지만 되지 않음 ㅠㅠ 그래서 또 물어봤더니 그냥 user, pass 만 있으면 authenticated 되는 T/F를 localstorage와 state에 저장하고 useEffect로 조건을 걸어서 거기에 navigate를 넣으라는 것이었다..! 그랬더니 작동 됨;; 뭐지ㅋㅋㅋ
그래서.. 결론은 에러는 단순하게 생각해보고, 콘솔을 제대로 잘 보자~~~ 너무 길을 헤매면 상사에게 얼른 물어보자! 데이브 님의 Protected Routes! 그리고 문서도 확인하고 회사 이전 코드도 확인하면 좋을 듯!
https://youtu.be/oUZjO00NkhY?si=LVexa5qJDEaJhXFW
오늘 할 것!
- 로그아웃에 authenticated 넣기
- 방문자 api 불러서 대시보드로 넘어가기
- 여유가 된다면 전체 사이트 조회의 검색창과 체크 언체크시 아카이브 되는 부분 체크!
느낀 점
비슷하지만,,, chatgpt 의존성을 줄이자. 기본 문법에 대해 정확이 알고 공부하자. 뭐 조건 걸라고 했는데, 잘 못적어서 민망했다 ㅠㅠ 많이 보고 많이 배우자~~~!