[25.02.24 월요일]
[MBTI 테스트 - 트러블슈팅]
1. 문제 발생
1) 유저 정보가 업데이트되지 않는 문제
- 유저 정보를 받아와 닉네임을 수정하는 로직을 확인하던 중, 닉네임 변경이 정상적으로 동작하지 않는 것을 발견.
2) Router가 작동하지 않는 문제
PrivateRouter설정 후 정상 작동을 확인했으나, 코드 정리 과정에서 일부 파일을layout폴더로 이동.- 이후
pathname을 읽어올 수 없다는 오류가 발생.
2. 원인 추론
1) 유저 정보 업데이트 문제
axios를 활용한 API 서버 통신 과정에서 발생한 문제일 가능성이 높음.- 익숙하지 않은 로직이 포함되어 있어 놓친 부분이 있을 수 있다고 판단하여 전체 로직을 검토함.
2) Router 오류 발생 원인
- 파일 이동 과정에서
import경로가 제대로 반영되지않았을 가능성이 있음. BrowserRouter,Routes,Route설정이 올바르게 유지되었는지 확인이 필요함.Link,Navigate,useNavigate등의 경로 설정이 제대로 반영되었는지도 점검해야 함.
3. 해결 방안
1) 유저 정보 업데이트 문제
- 로직을 다시 점검하고, 강의 시간에 배운 코드로 변경하여 테스트함. 그러나 여전히 업데이트가 되지 않음.
- 데이터 통신 과정에서 놓친 부분이 있을 것으로 판단하여,
console.log를 이용해 요청 및 응답 데이터를 전반적으로 확인함.
2) Router 오류 해결
path경로를 다시 확인하고,Link,Navigate,useNavigate등의 경로 설정을 모두 점검함.- 라우터 설정이 올바르게 동작하는지 확인하기 위해 기존의 코드와 비교 검토함.
4. 해결 결과
1) 유저 정보 업데이트 문제 해결
-
업데이트 로직에서 데이터를 받아오지 못하는 것을 확인함.
-
업데이트 버튼을 클릭한 직후 일시적으로 오류가 발생했다가 사라지는 현상을 발견함.
-
URL 뒤에 설정하지 않은
?문자가 붙어있는 것을 확인.
위 상황들을 토대로 업데이트 로직이 정상적으로 실행되지 않았음을 인지함. -
업데이트 로직 시작 전 부터 전체적으로 재검토.
-
e.preventDefault()오타가 있었던 것을 확인! -
올바르게 수정한 후 테스트해보니 정상적으로 작동함.
"설마… 너 하나 때문이었니?" 😂
2) Router 문제 해결
- 원인을 찾지 못하여 구글링해보았으나
react-router-dom버전 오류관련 내용이며 내가 사용하는 버전에 관해서는 찾아볼수 없었음. - 다행히
GitHub에 정상 작동하는 코드를 푸시해둔 상태였기 때문에, 현재 작업 중인 폴더를 삭제하고 새롭게clone하여 다시 확인함. - 결과적으로 정상적으로 동작하는 것을 확인…
"화난다" 😤
느낀 점
이번 프로젝트를 진행하면서, 몇몇 확장 프로그램 설치 문제로 인해 VSCode를 업데이트해야 했고, 이 과정에서 이전에는 마주치지 않았던 config 파일이나 eslint 설정 문제를 겪었다. 또한, Router처럼 리액트 내부 로직이 예상치 않게 꼬이는 경험을 하며 많은 어려움을 느꼈다.
최근 발생한 오류들을 되돌아보면, 로직 자체의 문제보다는 공백, 오타 같은 사소한 실수가 더 많았다. 그리고 오늘 Router 문제처럼 리액트 내부 로직이 꼬이는 상황에서는, 정상적으로 동작하는 코드가 있다면 망설이지 말고 빠르게 add → commit → push 하자!
역시 직접 겪어봐야 진짜 깨닫는다. 😅
서버 통신 개념은 처음엔 굉장히 어렵게 느껴졌지만, 개인 과제를 진행하면서 점차 이해되는 부분도 있고, 여전히 어려운 부분도 있다. 개인 과제가 끝나면 바로 팀 프로젝트가 시작되는데, 그때까지도 흐름이 어렵다고 느껴진다면 기초를 탄탄하게 다지기 위해 분반 변경 신청도 고려해볼 생각이다.
🔥 이제야 정상 작동되지만, 개발은 역시 쉽지 않다. 그래도 차근차근 쌓아가면 분명 더 나아질 거라 믿는다! 🚀
