오늘의 개발 문제 : fetch였다..

Cannot read properties of undefined (reading 'id')

 

로그인 기능을 구현하던 중, API 응답에는 분명 id가 있는데도
프론트 코드에서는 계속 undefined가 나오는 문제를 겪었다.
원인은 API가 아니라 내가 만든 API 유틸 함수의 반환 구조였다.

---

문제 상황

아래 코드는 axios를 사용한다면 전혀 문제가 없는 코드다.

const response = await apiRequest('/members/login', {...});

const userInfo = {
  id: response.data.id,
  email: response.data.email,
};

하지만 실제 실행 시 아래 에러가 발생했다.

Cannot read properties of undefined (reading 'id')

---

원인 분석

문제의 핵심은 apiRequest가 axios가 아니라 fetch 기반 유틸 함수였다는 점이다.

원래 react 와 RestApi 구조 연결된 프로젝트를 JPA기반으로 수정하다보니 기존 리액트와 연동에 문제 생길수 있다는것을 관과했다.

axios 응답 구조

const res = await axios.post(...);
res.data; // 실제 응답 데이터

axios는 항상 response 객체 안에 data 프로퍼티가 존재한다.

---

fetch 기반 apiRequest 구조

// apiRequest 내부
return response.json(); // 이미 JSON 파싱된 객체 반환

즉, apiRequest는 axios의 response 객체가 아니라
JSON 객체 자체를 바로 반환하고 있었다.

{
  "success": true,
  "message": "로그인 성공",
  "data": {
    "id": 1,
    "email": "user@example.com"
  }
}

---

착각했던 부분

• axios를 쓰는 것처럼 response.data에 바로 접근함
• 하지만 실제 response는 이미 JSON 객체

결과적으로 아래 코드는

response.data.id

실제로는

undefined.data

를 읽으려는 상황이었고,
그로 인해 에러가 발생했다.

---

해결 방법

apiRequest의 반환 구조에 맞게 접근 방식을 통일했다.

const response = await apiRequest('/members/login');

const userInfo = {
  id: response.data.id,
  email: response.data.email,
  nickname: response.data.nickname,
};

또는 더 안전한 방법은 다음 중 하나다.

• 프로젝트 전반에서 axios / fetch 중 하나로 통일
• API 유틸 함수의 반환 타입을 명확히 정의

---

다음부터는API 유틸 코드를 확인해보자!