[올림픽메달 트래커 - 트러블슈팅]
💝 친해져도 되겠니?
리액트 더 쉽고 편하다고 하셨잖아요.
그래서인가요? 과제수행 기간이 너무 짧았다.
저는 과제를 완수한 시점에서도 리액트와 낯가림중인데..🫠
1. 문제 발생
처음에는 국가별로 메달을 입력하고 등록하는 부분은 아무 문제 없이 잘 작동했습다. 입력된 국가와 메달 정보가 로컬스토리지에 저장되고, 그에 맞는 UI가 잘 업데이트되었으나,
동일 국가명으로 메달을 업데이트하면 반영되지 않는 문제 발생
데이터를 업데이트해도 화면에 반영되지 않으며, “국가를 등록하라”는 알림창이 뜨는 상황!
삭제 시 모든 국가가 한 번에 삭제 됨
국가를 삭제하려고 할 때, 선택한 특정 국가만 삭제되어야 하는데, 버튼을 클릭하면 모든 국가가 동시에 삭제되는 현상이 발생.
실습할 땐 잘 됬었는데.. 혼자 할 땐 대체 왜!?
2. 원인 추론
ID값 설정 문제 가능성
처음에는 데이터가 제대로 식별되지 않아서 모든 국가가 삭제되는 것 같아서 로컬스토리지에 저장된 값을 확인.
국가를 구분할 수 있는 고유 ID 값 설정에 문제가 있을 수 있겠다는 추론을 했으나 이 부분을 확인하기 전에, 다른 로직을 먼저 점검하고 문제를 해결해보기로 결정.
타이핑 실수 (오타)
코드 작성 중 country라는 단어를 자주 사용하다 보니, 자동완성 기능으로 county라는 단어가 제안된 걸 보고 오타가 어딘가 있구나!!
그래서 오타가 확인!
업데이트 및 삭제 로직 점검
전체 로직에서 문제가 생긴 부분이 국가 업데이트와 삭제였기 때문에, 이 두 가지 기능에 대한 로직을 다시 한 번 중점적으로 확인.
3. 해결 방법
오타 수정 및 변수명 점검
역시 오타가 있음을 발견.
또한, 코드에서 인자 이름을 변경하면서 일부 변경 사항이 반영되지 않은 부분도 확인.
로직 재검토 및 비교값 지정
문제를 찾는데 시간이 상당히 걸렸다. 몇 번을 확인 했으나 바로 파악이 되지 않아 리액트 강의와 실습때 작성했던 코드들과 비교해보니 비교 조건을 명확하게 설정하지 않아서 업데이트나 삭제가 정상적으로 작동하지 않았던 것!!
또한, 화살표 함수에서 {}를 사용할 때 return 문을 명시적으로 넣어주지 않으면, 값이 반환되지 않는다는 기본적인 규칙을 놓쳤다.😭
화살표 함수에 익숙해지지 않아서 실수를 했음에도 쉽사리 찾아내지 못했다.
4. 결과
업데이트와 삭제 기능 정상 작동
문제를 해결한 후, 업데이트가 정상적으로 반영되고, 삭제 버튼을 누를 때 선택한 국가만 삭제되는 것이 확인됐다. 메달 업데이트와 국가 삭제가 이제 제대로 작동하니 속이 시원~!
5. 나에게
화살표 함수와 익숙해지지 않은 문법
지난번에는 return 문 때문에 고생하지 않았지만, 이번에는 리액트와 화살표 함수 사용에 익숙하지 않아서 시간을 많이 소비하게 되었다. 코드에서 제대로 값을 반환하지 않아서 3시간 이상 문제를 찾는 데 걸렸고, 동일 패턴의 로직에서 같은 실수를 반복한 점이 아쉬웠다.
기본적인 실수 반복
또 한 가지, 예전에도 코드에서 일부 값을 누락하거나 잘못 설정한 부분이 있었는데, 이번에도 비슷한 실수가 있었다. 실수에 대해 깊이 반성하며, 다시 한 번 기본기를 다져야겠다고 다짐했다.
리액트가 더 쉬운 거 맞죠?
리액트가 낯설어서 기존의 문법들과 혼동이 많았다. 지금도 많다. 코드도 눈에 잘 들어오지도 않아서 오류 찾기도 더 힘들었다. 익숙하지 않아서 그럴 것이라고 생각하고, 계속해서 코드에 익숙해져서 실수를 줄여나가야지!
결국 연습이 중요!!
