개인 프로젝트에서 네트워크 오류를 안전하게 처리하기

로컬에서 괜찮았던 설정도 배포 환경에서는 다르게 보일 수 있다. 문제 해결 전체 흐름에서 원인을 좁혀야 한다.

목표 정하기

문제 해결 작업은 로컬과 운영의 차이가 자주 숨어 있다. 환경 차이까지 함께 적어두면 원인 추적이 쉬워진다.

먼저 볼 값: 로그

• 브라우저 콘솔의 CORS 에러
• 서버 로그의 요청 기록
• 네트워크 탭의 응답 헤더
• 같이 비교할 값: 정상일 때의 요청 상태

현재 상태 파악

네트워크 문제를 자체보다 재현 가능한 단서를 남기는 게 중요하다. 로그를 확인하면 다음으로 볼 범위가 확 줄어든다.

빌드로 검증하기

npm run build

배포 환경의 차이까지 함께 기록해두면 원인 추적이 쉬워진다. 로컬과 운영이 다르게 나타나는 경우가 대부분이다.

확인 항목들

남겨둘 기록:

• 명령 출력
• 응답 코드 (특히 401, 403, 429)
• 수정한 설정 (CORS, Origin, Authorization)

검증 단계

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

결과가 바뀐 이유를 로그와 응답으로 설명할 수 있으면 충분히 정리된 것이다. 관련 기록을 남겨두면 다음 확인이 훨씬 빨라진다.