마이그레이션 후 발생하는 UI 버그, 로컬과 배포 환경 비교하기

큰 변경을 마친 후 배포하면 로컬에서는 못 본 버그가 운영 환경에서 튀어나온다. 마이그레이션이나 리팩토링 직후는 특히 그렇다.

로컬에서 괜찮았던 설정도 배포 환경에서는 완전히 다르게 보일 수 있다는 점을 항상 기억해야 한다.

마이그레이션 후 문제의 경계를 명확히 하기

마이그레이션 문제가 반복된다면 확인 순서를 고정해두자.

확인할 부분:

• 문제의 경계: 어떤 페이지에서만 나오는지
• 로컬과 배포의 차이: 데이터는 같은지, 설정은 다른지
• 마지막 배포 내용: 뭘 바꿨는지

로컬과 배포 환경을 체계적으로 비교하기

마이그레이션 후 버그는 거의 항상 환경 차이에서 나온다. 로컬에서는 새 데이터베이스를 썼지만 배포는 아직 구 데이터를 쓸 수도 있다.

npm run build
# 배포 서버에서 데이터베이스 상태와 캐시를 확인한다

마이그레이션이 제대로 적용됐는지부터 확인해야 한다. 데이터 변환 과정에서 누락이 있었을 수도 있고, 외래키 무결성 때문에 실패했을 수도 있다.

이벤트 흐름을 단계별로 추적하기

UI 버그는 이벤트 흐름과 상태 업데이트를 함께 봐야 한다.

1. 증상이 같은 조건에서 다시 나오는지 여러 번 확인한다.
2. 로그와 응답을 보고 뭐가 다른지 정리한다.
3. 배포된 화면, 빌드 결과, 실제 데이터베이스 상태를 확인한다.

정리하며

마이그레이션은 어차피 실수가 생긴다. 마지막에는 실제 화면이나 공개 URL까지 확인해야 작업이 완료된 것이다. 마이그레이션할 때마다 기록을 남겨두면 다음 번이 훨씬 쉽다.