TypeScript 날짜 타입 문제를 추적하기

운영 중에 날짜 타입 문제가 터질 때가 있다. 로컬과 서버의 시간대 차이 때문이기도 하고, 타입 정의가 안 맞아서이기도 하다.

한 줄 요약으로 정리해 두기

로컬과 운영의 차이가 자주 숨어 있다. 환경 차이까지 같이 적어 두면, 원인 추적이 훨씬 쉬워진다.

먼저 볼 파일은 어디인가

정상 상태를 먼저 정해 두는 게 좋다. 그래야 실제 응답이 맞는지 아닌지를 빠르게 판단할 수 있다.

• 먼저 볼 값: 실제 API 응답
• 같이 비교할 값: 정상 상태
• 남겨둘 기록: 빌드 출력, 에러 코드, 수정 내역

타입 정의부터 확인하기

바로 수정하기 전에, 타입 정의가 정말 맞는지 먼저 확인하면 불필요한 변경을 줄일 수 있다.

npm run build
npx tsc --noEmit

이 두 명령으로 모든 타입 에러가 드러난다.

optional과 null 값 확인하기

날짜 필드가 선택사항인지, 아니면 필수인지 명확히 해야 한다. optional 필드가 애매하면, 런타임에 에러가 난다.

브라우저에서 직접 보기

실제 API 응답이 뭐인지, 브라우저 개발자 도구에서 직접 확인해 보자. 네트워크 탭을 열고 요청을 보면, 타입과 실제 데이터가 맞는지 알 수 있다.

타입 가드로 런타임 보호하기

타입 체크만으로는 부족하다. 런타임에 실제로 값이 올바른지 확인하는 가드 함수를 만들자.

실수 포인트를 기억하기

TypeScript 쪽 문제는 화면만 보고 판단하면 놓치는 게 많다. 로그, 응답, 설정 중 하나를 증거로 잡아야 한다.

다음 순서로 체크하자:

1. 원래 증상이 같은 조건에서 다시 나는지 확인한다.
2. 로그나 응답에서 바뀐 부분을 한 줄로 설명해 본다.
3. 공개 화면, 빌드 결과, 실제 요청 중 하나로 마지막 확인을 한다.

최종 확인

결과가 바뀐 이유를 로그와 응답으로 설명할 수 있으면, 충분히 정리된 것이다. 관련 기록을 남겨 두면, 다음에 비슷한 문제가 나올 때 빠르게 대응할 수 있다.