React 컴포넌트가 서버에서만 터질 때

React 컴포넌트가 로컬에서는 잘 작동하는데 배포하면 에러가 발생할 때가 있다. 특히 서버 컴포넌트와 클라이언트 컴포넌트의 경계에서 이런 문제가 자주 생긴다.

사용자가 보는 모습 vs 개발자가 보는 신호

React 문제를 마주칠 때는 화면만 보고 판단하면 놓치는 값이 많다. 로그, 응답, 설정 중 하나를 증거로 잡아야 한다.

npm run build
# 브라우저에서 모바일 폭과 키보드 입력 흐름을 확인한다

빌드 결과와 서버 로그를 함께 보면 서버/클라이언트 차이를 빠르게 파악할 수 있다.

이벤트 흐름과 환경 차이

서버에서만 터지는 문제는 때때로 환경 차이 때문이다. 로컬과 운영의 차이가 자주 숨어 있으니 환경 변수까지 같이 확인해야 한다.

• 먼저 볼 것: 모바일 화면과 서버 로그
• 같이 비교할 것: 정상일 때의 렌더링 상태
• 기록해둘 것: 환경 변수, 에러 메시지, 재현 조건

수정 전에 고정할 값

서버에서만 문제가 반복된다면 확인 순서를 고정해두는 게 낫다. 같은 실수를 반복하지 않기 위해서다.

모바일 화면과 검증 루틴

서버 컴포넌트가 제대로 동작하는지 확인하려면 실제 렌더링 결과를 봐야 한다.

1. 같은 조건에서 증상을 재현해본다
2. 로그나 응답에서 바뀐 부분을 정리한다
3. 공개 페이지에서 리스트 조작, 입력 등을 여러 번 해서 최종 확인한다

운영 중 기록해두기

작은 확인을 남겨두면 다음 문제를 훨씬 짧게 처리할 수 있다. 어떤 조건에서 서버/클라이언트 차이가 발생하는지 기록해두면 다음 번에도 빠르게 대응할 수 있다.