Zod를 활용한 응답데이터 검증에서 발생한 날짜 형식 검증 해결하기

Next.js 프로젝트에서 프로젝트의 전반적인 데이터 검증에 zod를 활용하고 있습니다.

퀴즈 목록을 가져오는 컴포넌트를 구현하는 과정에서 다음과 같은 문제가 발생했습니다.

 

문제

- 네트워크 탭에서는 모킹서버로 정상 요청-응답 확인

- 컴포넌트에서는 받아온 응답을 확인할 수 없음

 

시도

네트워크 요청은 기대한 값을 잘 받아오고 있기 때문에 api나 서버 모킹 관련 문제가 있는 건 아니라고 생각이 들었고, 서버 -> 사용자에게 보여지는 컴포넌트 흐름으로 데이터가 잘 전달되는지 확인하고자 가장 먼저 데이터를 fetch하는 함수에 필요한 로그를 추가했습니다.

// fetch 함수 내부
...

if (!response.ok) {
  console.error(response.statusText);
  throw new Error('퀴즈 목록을 불러오는데 실패했습니다.');
}

const json = await response.json();
console.log('json: ', json);

const parsedJson = QuizListResponseSchema.safeParse(json);
console.log('parsedJson: ', parsedJson);

if (!parsedJson.success) {
  console.error(parsedJson.error);
  throw new Error('잘못된 퀴즈 목록 형식입니다.');
}

...

 

다행히 바로 에러를 발견했습니다.. 무적의 로그..

컴포넌트에서 에러를 받아 처리할 것만 고려하고 throw문만 있는 상황이었는데, 컴포넌트에서 에러처리를 하지 않은 상태여서 눈에 보이는 에러 없이 데이터를 제대로 받아오지 못하고 있는 상황이었습니다.

 

• 핵심 문제: 응답 데이터 스키마 검증 실패
• 추가적인 문제: 개발 편의성을 위한 디버깅 개선 필요

문제 해결

응답 데이터 (목데이터) 형식 수정

요청으로 기대한 datetime, ISO 8601 표준을 따를 수 있도록 목데이터(모킹 서버에서 반환하는 값)를 수정했습니다.

// 수정 전
due_time: '2024-03-20T14:00:00'

// 수정 후
due_time: '2024-03-20T14:00:00.000Z'

 

개발 편의성을 위한 디버깅 개선

에러 발생 지점을 추적할 수 있도록 에러 발생 위험이 있는 위치에 에러 로그를 추가했습니다.

에러가 발생했을 때 사용자에게까지 로그가 모두 출력되는 건 지양할 필요성이 있다고 느껴 개발환경에서만 출력되도록 조건을 추가했습니다.

// 추가
console.error(parsedJson.error);

// 추가 후 개선
if (!parsedJson.success) {
  if (process.env.NODE_ENV === 'development') console.error(parsedJson.error);
  throw new Error('잘못된 퀴즈 목록 형식입니다.');
}

 

마무리

아직 진짜 서버를 연결한 것도 아닌데.. 응답 데이터 검증의 효과를 알게된 경험이었습니다.

• 어떤 값이 들어올지 모르니 런타임 타입 검증으로 안정성을 높이자!
• 개발 환경에서는 상세한 디버깅 정보를 제공해 개발 편의성/효율성을 높이자!