1. 문제 발생❓
로그인 후 토큰을 제대로 받아오지 못하는 문제
2. 원인 추론 🔎
API 응답 구조를 잘못 이해하여 토큰을 잘못된 키로 접근하고 있었다.
3. 해결 과정 📋
- 'handleLogin' 함수에서 'console.log(response)'를 통해 API 응답을 확인했다.
- API 공식 문서를 참조하여 올바를 응답 구조를 파악했다.
- 'response.token' 대신 'response.accessToken'으로 수정했다.
< 수정된 코드 >
const handleLogin = async (userData) => {
try {
const response = await login(userData);
localStorage.setItem("authToken", response.accessToken);
await fetchUserProfile(response.accessToken);
navigate("/");
alert("로그인 되었습니다!");
} catch (error) {
console.error("Login failed", error);
}
};
1. 문제 발생❓
테스트 제출 버튼을 클릭하면 mbti 결과 객체 정보에 유저 id값을 담아야 하는데 유저정보가 undefined여서 제출이 안되는 문제
2. 원인 추론 🔎
'Test' 페이지에서 'user'를 props로 전달하지 않아 발생한 것 같다.
3. 해결 과정 📋
- console.log를 통해 Test 페이지에서 'user' 객체가 'undefined' 임을 확인했다.
- 'App.jsx' 의 라우트 설정을 검토 했다.
- 부모 컴포넌트에서 Test 페이지에 props로 전달할 때, 'user'가 빠진 것을 확인했다.
- Test 페이지에 알맞게 props로 'user'를 전달해줬다.
< 수정된 코드 >
<Route
path="/test"
element={
<ProtectedRoute user={user}>
<TestPage user={user} />
</ProtectedRoute>
}
/>
4. 결과 ❤🔥
이러한 문제들은 API 응답 구조를 정확히 이해하지 못했거나, props 전달을 누락하는 등의 작은 실수로 인해 발생했다. 이러한 오류를 찾을 수 있던 해결책은 바로 콘솔로그를 틈틈히 찍어보는 방법이였던 것 같다. 콘솔로그를 적극적으로 활용하고, API 문서를 더욱더 꼼꼼히 확인하며, 컴포넌트 간 데이터 흐름을 주의 깊게 살펴봄으로써 문제를 해결할 수 있었다!
'개인과제' 카테고리의 다른 글
MBTI 과제 마무리 (0) | 2024.09.11 |
---|---|
MBTI test(트러블 슈팅3🌟) (0) | 2024.09.10 |
MBTI test(트러블 슈팅1🌟) (0) | 2024.09.10 |
로그인 기능 구현하기 (0) | 2024.08.27 |
리액트로 만든 나만의 포켓몬 도감: 일주일간의 도전과 성장 (4) | 2024.08.26 |