React Native 앱에서 폼 제출 오류 디버깅하기

문제 상황

React Native로 개발 중인 매치 생성 폼에서 제출 시 다음과 같은 오류가 발생했습니다:

Cannot read property 'trim' of undefined

이 글에서는 이 오류를 해결해나간 과정을 단계별로 살펴보겠습니다.

1. 초기 증상 분석

처음 발견된 오류 메시지는 undefined 값에 대해 trim() 메서드를 호출하려 했다는 것이었습니다.
JavaScript/TypeScript에서 이는 흔히 발생하는 오류 중 하나로, 존재하지 않는 객체의 속성에 접근하려 할 때 나타납니다.

// 이런 상황에서 발생
const value = undefined;
value.trim(); // 💥 Cannot read property 'trim' of undefined

2. 오류 위치 추적

스택 트레이스를 통해 오류가 발생한 정확한 위치를 파악했습니다:

// validateForm 함수 내부
if (!data.location.trim()) {
  errors.location = "위치를 입력해주세요";
}

validateForm 함수에서 location 필드를 검증하는 과정에서 오류가 발생하고 있었습니다.

3. 데이터 구조 불일치 발견

폼 데이터와 서버 API의 요청 형식을 비교 분석한 결과, 데이터 구조의 불일치를 발견했습니다:

• 폼 데이터 구조:

{
  location: string; // 단일 필드
  // ...other fields
}

• 서버 요청 형식:

{
  courtName: string;    // 코트 이름
  district: string;     // 지역
  locationDetail: string; // 상세 위치
  // ...other fields
}

하나의 location 필드를 사용하고 있었지만, 실제 서버는 위치 정보를 세 개의 개별 필드로 요구하고 있었습니다.

4. 해결 과정

4.1 undefined 안전한 처리

우선 undefined 값을 안전하게 처리할 수 있는 헬퍼 함수를 추가했습니다:

const safeTrim = (value: string | undefined): string => {
  return value?.trim() || "";
};

4.2 검증 로직 수정

위치 정보 검증을 세 개의 개별 필드로 분리했습니다:

// 위치 정보 검사
if (!safeTrim(data.courtName)) {
  errors.courtName = "코트 이름을 입력해주세요";
}

if (!safeTrim(data.district)) {
  errors.district = "지역을 입력해주세요";
}

if (!safeTrim(data.locationDetail)) {
  errors.locationDetail = "상세 위치를 입력해주세요";
}

4.3 서버 유효성 검증 발견

수정 후 테스트 과정에서 district 필드에 "123"과 같은 임의의 값을 입력했을 때 서버에서 500 에러가 발생하는 것을 확인했습니다.
이는 서버가 미리 정의된 지역 목록에서만 값을 받아들이도록 설정되어 있음을 의미했습니다.

5. 최종 해결 방안

1. 모든 문자열 필드에 대해 safeTrim 함수를 사용하여 undefined 처리
2. 위치 정보를 세 개의 개별 필드로 분리하여 처리
3. district 필드는 자유 입력이 아닌 드롭다운 선택 방식으로 변경 필요

배운 점

1. 데이터 구조 일치 확인의 중요성: 프론트엔드의 데이터 구조와 백엔드 API가 요구하는 구조가 일치하는지 사전에 꼼꼼히 확인해야 합니다.

2. 단계적 디버깅의 중요성: 하나의 오류를 해결하면서 다른 잠재적 문제들도 발견할 수 있었습니다. 이는 체계적인 디버깅 과정의 중요성을 보여줍니다.

3. 안전한 데이터 처리: undefined나 null 값에 대한 안전한 처리는 프론트엔드 개발에서 매우 중요합니다.

결론

이번 디버깅 과정을 통해 폼 처리에서 발생할 수 있는 여러 문제점들을 확인하고 해결할 수 있었습니다.
특히 프론트엔드와 백엔드 간의 데이터 구조 일치성 확인의 중요성을 다시 한 번 깨달을 수 있었습니다.