데이터 구조를 먼저 확실하게 설정하자.

문제 발생

오늘도 어김없이 프로젝트를 진행하던 도중, 낯설었던 데이터베이스와 연결 과정에서 예상치 못한 문제가 발생했다.

그 문제라 함은 일기의 제목을 클릭하여 해당 일기의 상세 정보를 불러오는 기능이 갑자기 정상적으로 작동하지 않았다는 건데. 분명 이 기능은 더미 데이터로는 문제없이 잘 동작했었는데, 갑자기 데이터베이스 연결 작업을 진행한 후부터 문제가 발생했다.

조금 당황스러운 점은, 데이터베이스의 연결은 잘 되어 있어서 리스트는 잘 렌더링 되는 와중에 게시물을 보려고 클릭하면 모달 창 안에 컨텐츠가 표시되지 않는 것이었다.

그래서 요청이 따로 안들어가서 그런 것인가? 라는 생각에 해당 게시글을 클릭 시 invalidateQueries 메서드를 사용하여 요청을 다시 시도해봤지만 여전히 요청이 전송되지 않았다.

문제 원인

이 문제의 원인을 파악하기 위해 네트워크 탭을 확인해 보았습니다. 그 결과, 일기의 상세 정보를 불러오는 요청이 전혀 보내지지 않았는데. 그게 이상해서 리스트에 데이터가 어떻게 받아와지는지 확인 해보았더니

앗...

알고보니 데이터를 구성하는 프로퍼티를 잘못 설정해놓은 것이었다..
프론트를 먼저 구현하다보니 데이터 구조를 단순하고 알기 쉽게 구현했었고 이로 인해 데이터베이스에서 설계한 구조와 차이가 있었던 것이다.

프로젝트에서는 다이어리의 상세 정보를 불러오기 위해 'diaryId'라는 값을 Redux store에 저장하는 액션을 디스패치하고 그 값으로 요청을 보내는 방식으로 진행했는데, 예전에 단순하게 설정했던 'id'라는 값만 계속 찾으니 이로 인해 일기의 상세 정보를 불러오는 요청이 전혀 보내지지 않았던 것이었다....

문제 해결

이 문제를 해결하기 위해 예전에 썻던 더미 데이터의 프로퍼티를 쓰지 않고 데이터베이스에서 설정해놓은 대로 다시 구현하였다.

수정한 후에 다시 테스트를 진행하였고, 다이어리의 상세 정보를 불러오는 기능이 정상적으로 작동하는 것을 확인할 수 있었다.

---

이번 경험을 통해서 코드의 작은 부분에서도 실수가 발생할 수 있다는 걸 다시 한번 깨달았고
다음 프로젝트부턴 데이터 구조를 먼저 확실하게 설정하고, 그에 따라 코드를 작성해야겠다는 생각이 들었다

틀린 내용이 있다면 피드백 부탁드립니다. 🙇‍♂️