동적 렌더링이 예상과 다를 때 진짜 원인 찾기

혼자 개발할 때 가장 답답한 게 "어? 왜 이렇게 나와?" 하고 한 시간을 날리는 것이다. 동적 렌더링 문제도 마찬가지다. 화면에 데이터가 안 보이거나, 버튼을 눌렀는데 반응이 없거나, 페이지가 제대로 로드되지 않거나.

처음에 나는 화면만 봤다. 개발자 도구를 열어서 뭔가 CSS가 빠진 건 아닌지, 요소가 숨겨진 건 아닌지 확인했다. 그건 절반만 해본 거다.

뭔가 보이지 않으면 먼저 로그부터

브라우저 콘솔을 열어서 에러 메시지가 있는지 본다. 그 다음 네트워크 탭에서 API 요청들을 본다. 상태 코드가 200인지, 응답 body가 비어 있진 않은지.

npm run build

빌드할 때 경고가 떴다면 그것도 중요한 신호다. 타입 에러, 미사용 임포트, 뭐든 로그에는 이유가 있다.

로컬과 운영은 다르다

이게 중요한데, 로컬에서는 완벽하게 작동하는데 배포 후에는 안 되는 경우가 많다. 환경 변수가 다르거나, 빌드 설정이 다르거나, 캐시 때문이거나. 차이를 먼저 생각해야 한다.

증상을 다시 현재 환경에서 재현해본다. 같은 조건에서 같은 방식으로 실패하는지. 그러면 원인을 추적하기 훨씬 쉬워진다. 관련된 기록을 조금이라도 남겨두면 다음 번엔 이미 반은 푼 셈이다.