[HTTP/React] HTTP status code로 에러 타입 확인하기

은서·2024년 12월 30일

HTML/React

목록 보기
2/7
post-thumbnail

전 포스트에서 API에 대한 이야기를 해보았으니
이번 시간에는 React로 API를 연결할 때 뜨는 에러의 종류를 확인하는 방법을 알아보자
( ´͈ ꇴ `͈)੭⁾⁾·°˖✧˖°

1. 에러 확인하는 방법

React를 작동시키면 다음과 같은 화면이 나타날 것이다.

현재 만들고 있는 방송국 내부에서 사용할 웹사이트를 예시로 들고 왔다.
여기서 검사를 들어가면?

요로케 우리가 평소에 CSS를 확인할 때 많이 보는 익숙한 화면이 나온다.

여기서도 이렇게 API 에러 타입을 확인할 수 있는데...
내 경우에는 지금 404 Error가 뜬다🥲

2. HTTP status code로 에러 타입 알아보기

  • 2xx == 성공

    2xx 대는 행복하다 아무일 없이 넘어가자~

  • 4xx == 에러
    문제는 여기서부터 시작되는데 ❤️‍🔥

    4xx번대가 뜨면 내가 대부분 API 연결을 잘못한거구나 생각하자
    API는 지피티가 그닥 잘 고쳐주지 못하니 코드를 다시 천천히 읽어보면 좋음

아까 내 화면도 404가 떴는데 잘못된 URL 경로를 붙이면 저런 에러가 뜬다
404는 너무 유명해서 다들 한 번쯤은 들어봤을 듯?

  • 500 에러
    제일 유명한 서버 오류 에러이다
    이 에러가 뜨면 백엔드 서버 쪽 에러이니 한숨 놓을 수 있다 ㅎㅎ

이렇게 HTTP status code를 통해 에러 유형을 알아봤는데 어느정도 외우고 있으면 문제를 빨리 처리하기 좋다 (و ˃̵ᴗ˂̵)و
오늘의 블로그 완

profile
개발자 대학생🌱

1개의 댓글

comment-user-thumbnail
2024년 12월 30일

개발하다보면 수도 없이 마주치게 되는 상태코드에 대해 잘 정리했습니다 최고!

답글 달기