코드로 대화하자 - HTTP 상태 코드

https://http.cat

 

HTTP 상태 코드는 웹 서버와 클라이언트 간의 통신 과정에서 클라이언트 요청에 대한 서버의 응답 결과를 전달하는 코드입니다. 이 코드는 HTTP 응답의 일부로 사용되며, 성공, 클라이언트 오류, 서버 오류 등의 여러 상황을 나타낼 수 있습니다.

 

프론트엔드 팀과 백엔드 팀이 HTTP 상태 코드를 기준으로 특정 상황에 대한 코드 값을 약속하게 된다면 불필요한 커뮤니케이션을 줄일 수 있습니다.

 

예를 들어 HTTP 상태 코드가 401인 경우 로그인이 필요한 상태라고 약속합니다.

백엔드에서는 인증이 필요한 사용자일 경우 401로 내려주고, 프론트엔드에서는 401 코드만 딱 잡아서 로그인이 필요하다고 사용자에게 보여주거나, 로그인 페이지로 이동시킬 수 있습니다. 

 

백엔드에서 HTTP 상태 코드로 구분시키는 게 아닌 response 값으로도 구분가능하게 할 수 있지만, 이런 상황이 많아질수록 관리하기 힘들어질 것입니다. 그리고 백엔드 팀이 많을수록, 프론트엔드 팀이 많을 수록 다양한 조건들이 나올 수 있습니다. (a다르고 A가 다른데...) 예시를 먼저 보여드리겠습니다.

 

HTTP 상태 코드에 담겨있는 경우입니다.

try {
    const data = await  axios.get(‘/userInfo’);
    //  API가 성공했기 때문에 유저 정보가 있을 것으로 예상
    console.log(data);
    return data;
} catch (err) {
    // 4xx 또는 5xx 일 경우 (실패할 경우) err에 나올 것으로 예상
    console.log(err);
    if (err.status === 401) {
    	alert('로그인이 필요합니다.');
    }
}

 

또는 axios interceptor에서 공통으로 처리할 수 있습니다.

이렇게 할 경우 try catch 문마다 if문을 달 필요가 없게 됩니다.

// 응답 인터셉터 추가하기
axios.interceptors.response.use(function (response) {
    // 2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 데이터가 있는 작업 수행
    return response;
  }, function (error) {
    // 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    
    if (error.response.status === 401) {
    	alert('로그인 필요 !!');
    }
    // 응답 오류가 있는 작업 수행
    return Promise.reject(error);
  });

 

하지만 API가 200 성공했지만 data에서 실패한 값을 준다고 가정하면
try catch문으로 핸들링할 수 없이 data에서 에러를 한번 더 찾아야 하는 작업이 필요합니다.

try {
    const data = await  axios.get(‘/userInfo’);
    //  API가 성공했기 때문에 유저 정보가 있을 것으로 예상
    console.log(data);
    
    // 우린 오류를 data 안에 넣어줄꺼야 !
    if(data.code === 500 || data.code === 400) {
		throw(‘오류래요’)
	}
    return data;
} catch (err) {
    // 4xx 또는 5xx 일 경우 (실패할 경우) err에 나올 것으로 예상
    console.log(err);
}

GET userInfo 에 추가된 건 단 3줄이지만, API 통신코드가 많아질수록 중복코드가 늘어납니다.

 

이 부분도 axios interceptors를 이용해서 똑같이 적용할 순 있지만, 성공했을 때의 인터셉터를 하기 때문에 이 부분을 잘 모르는 팀원이 보면 의문을 가질 수 있습니다.

 

500, 400 뿐만 아니라 다양한 케이스가 발생할 것이기 때문에 관리가 잘 된다면 상관없지만

그것이 아니라면….

 

 

여기부터는 이론적인 거!!

 

HTTP 상태 코드는 3자리 숫자로 이루어져 있으며, 첫 번째 숫자는 응답의 성격을 나타냅니다. 

5개의 그룹

• 정보를 제공하는 응답 (1xx)
• 성공 응답 (2xx)
• 리다이렉트 응답 (3xx)
• 클라이언트 에러 응답 (4xx)
• 서버 에러 응답 (5xx)

 

https://http.cat/ 이라는 HTTP 코드에 대한 귀여운 사이트도 있습니다.

HTTP Cats

---

위키백과 기준

 

1xx

• 100(계속): 요청자는 요청을 계속해야 한다. 서버는 이 코드를 제공하여 요청의 첫 번째 부분을 받았으며 나머지를 기다리고 있음을 나타낸다.
• 101(프로토콜 전환): 요청자가 서버에 프로토콜 전환을 요청했으며 서버는 이를 승인하는 중이다.

2xx

• 200(성공): 서버가 요청을 제대로 처리했다는 뜻이다. 이는 주로 서버가 요청한 페이지를 제공했다는 의미로 쓰인다.
• 201(작성됨): 성공적으로 요청되었으며 서버가 새 리소스를 작성했다.
• 202(허용됨): 서버가 요청을 접수했지만 아직 처리하지 않았다.
• 203(신뢰할 수 없는 정보): 서버가 요청을 성공적으로 처리했지만 다른 소스에서 수신된 정보를 제공하고 있다.
• 204(콘텐츠 없음): 서버가 요청을 성공적으로 처리했지만 콘텐츠를 제공하지 않는다.
• 205(콘텐츠 재설정): 서버가 요청을 성공적으로 처리했지만 콘텐츠를 표시하지 않는다. 204 응답과 달리 이 응답은 요청자가 문서 보기를 재설정할 것을 요구한다(예: 새 입력을 위한 양식 비우기).
• 206(일부 콘텐츠): 서버가 GET 요청의 일부만 성공적으로 처리했다.

3xx

• 300(여러 선택항목): 서버가 요청에 따라 여러 조치를 선택할 수 있다. 서버가 사용자 에이전트에 따라 수행할 작업을 선택하거나, 요청자가 선택할 수 있는 작업 목록을 제공한다.
• 301(영구 이동): 요청한 페이지를 새 위치로 영구적으로 이동했다. GET 또는 HEAD 요청에 대한 응답으로 이 응답을 표시하면 요청자가 자동으로 새 위치로 전달된다.

4xx

• 400(잘못된 요청): 서버가 요청의 구문을 인식하지 못했다.
• 401(권한 없음): 이 요청은 인증이 필요하다. 서버는 로그인이 필요한 페이지에 대해 이 요청을 제공할 수 있다. 상태 코드 이름이 권한 없음(Unauthorized)으로 되어 있지만 실제 뜻은 인증 안됨(Unauthenticated)에 더 가깝다.
• 402(결제 필요): 이 요청은 결제가 필요합니다.
• 403(Forbidden, 금지됨): 서버가 요청을 거부하고 있다. 예를 들자면, 사용자가 리소스에 대한 필요 권한을 갖고 있지 않다. (401은 인증 실패, 403은 인가 실패라고 볼 수 있음)
• 404(Not Found, 찾을 수 없음): 서버가 요청한 페이지(Resource)를 찾을 수 없다. 예를 들어 서버에 존재하지 않는 페이지에 대한 요청이 있을 경우 서버는 이 코드를 제공한다.
• 405(허용되지 않는 메소드): 요청에 지정된 방법을 사용할 수 없다. 예를 들어 POST 방식으로 요청을 받는 서버에 GET 요청을 보내는 경우, 또는 읽기 전용 리소스에 PUT 요청을 보내는 경우에 이 코드를 제공한다.
• 406(허용되지 않음): 요청한 페이지가 요청한 콘텐츠 특성으로 응답할 수 없다.

5xx

• 500(내부 서버 오류): 서버에 오류가 발생하여 요청을 수행할 수 없다.
• 501(구현되지 않음): 서버에 요청을 수행할 수 있는 기능이 없다. 예를 들어 서버가 요청 메소드를 인식하지 못할 때 이 코드를 표시한다.
• 502 (Bad Gateway, 불량 게이트웨이): 서버가 게이트웨이나 프록시 역할을 하고 있거나 또는 업스트림 서버에서 잘못된 응답을 받았다.
• 503(서비스를 사용할 수 없음): 서버가 오버로드되었거나 유지관리를 위해 다운되었기 때문에 현재 서버를 사용할 수 없다. 이는 대개 일시적인 상태이다.
• 504(게이트웨이 시간초과): 서버가 게이트웨이나 프록시 역할을 하고 있거나 또는 업스트림 서버에서 제때 요청을 받지 못했다.

---

 

 

 

참고

https://developer.mozilla.org/ko/docs/Web/HTTP/Status

https://axios-http.com/kr/docs/handling_errors