← 전체 글로 돌아가기

웹 개발

웹 개발에서 날짜 필터 구현할 때 놓치는 부분

관리자 페이지의 날짜 필터를 만들다 보면 로컬과 배포 환경에서 다르게 동작하는 경우가 많다. 이때 어떤 순서로 확인해야 원인을 빨리 찾을 수 있는지 정리했다.

웹 개발에서 날짜 관련 기능은 자주 문제가 생긴다. 특히 관리자 페이지에 날짜 필터를 추가했을 때 로컬에서는 잘 작동하지만 배포 후 다르게 보이는 경우가 많다.

먼저 의심할 부분 세 가지

날짜 문제가 터졌을 때 처음 봐야 할 것들이 있다. 화면 하나만 보고 판단하면 같은 실수를 반복하게 된다.

  • 브라우저 로그: 실제 요청이 뭐가 가는지, 응답 코드는 뭔지
  • 서버 로그: 시간대는 맞는지, 타임존 설정은 어떻게 되어 있는지
  • 빌드 결과: npm run build 했을 때 날짜 관련 에러는 없는지

로컬과 배포 환경의 타임존 확인

날짜 필터는 로컬과 배포 환경의 타임존 차이 때문에 자주 터진다. 특히 docker 환경에서 UTC와 KST 차이를 제대로 처리하지 않으면 시간이 엉망이 된다.

npm run build

데이터베이스에 저장된 값이 맞는지 확인

날짜 값이 데이터베이스에 제대로 저장되는지가 핵심이다. 때로는 UI는 멀쩡한데 DB에 저장되는 시점에서 시간이 밀려 있을 수 있다.

  1. 먼저 로그에서 실제 요청된 날짜를 확인한다
  2. DB에 저장된 값과 비교한다
  3. 응답으로 오는 값이 UI에서 제대로 표시되는지 본다

수정했을 때는 그 결과를 기록해 두기

마지막으로, 날짜 필터를 수정한 후엔 꼭 로그에 남겨 두자. 다음 번에 비슷한 증상이 나올 때 훨씬 빨리 찾을 수 있다.