MBTI test(트러블 슈팅2🌟)

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 문서를 더욱더 꼼꼼히 확인하며, 컴포넌트 간 데이터 흐름을 주의 깊게 살펴봄으로써 문제를 해결할 수 있었다!