250611 과제 - HTTP 상태 코드

HTTP 상태코드 

 

HTTP 설명 : https://hydeveloper.tistory.com/215 

Node.js / 네트워크 기초

 

 

서버로부터 오는 HTTP 응답 메시지 내의 상태 코드(status code)는 현재 100~500번대까지 정의되어있다.

 

 

1XX : Information(정보 제공)

임시 응답으로, 지금까지의 상태는 괜찮다는 의미

 

 

2XX : Success(성공)

클라이언트의 요청이 서버에서 성공적으로 처리됨

 

• 200 (OK) : 서버가 요청을 성공적으로 처리함
• 201 (Created) : 요청이 처리되어 새로운 리소스가 생성됨
• 202 (Accepted) : 요청은 접수했으나 처리가 완료되지 않음 (아직 처리가 시작되지 않았거나 처리 중임). 따라서 나중에 실패할 수도 있음
• 204 (No content) : 처리가 완료됐으나 클라이언트에게 보낼 콘텐츠가 없음 (응답 메시지의 바디는 없고, 헤더는 있음)

 

 

3XX : Redirection(리다이렉션)

완전한 처리를 위해 추가 동작이 필요함

 

 

4XX : Client Error(클라이언트 에러)

클라이언트의 요청 메시지 내용이 잘못됨

• 400 (Bad Request) : 요청의 구문이 잘못됨 -> 서버가 요청을 이해할 수 없음
• 401 (Unauthorized) : 지정한 리소스에 대한 액세스 권한이 없음
• 403 (Forbidden) : 지정한 리소스에 대한 액세스가 금지됨 (401 처리 이외의 사유로 액세스가 금지된 경우)
• 404 (Not Found) : 지정한 리소스를 찾을 수 없음

 

 

5XX : Server Error(서버 에러)

서버 부하, DB 처리 오류 등 서버 문제로 메시지 처리에 문제가 발생

• 500 (Internal Server Error) : 서버에 에러 발생 / 서버가 처리 방법을 모르는 상황이 발생함
• 501  (Not Implemented) : 요청 방법이 서버에서 지원되지 않아 처리할 수 없음
• 502 (Bad Gateway) : 게이트웨이나 프록시 역할을 하는 서버가 그 뒷단의 서버로부터 잘못된 응답을 받음
• 503 (Service Available) : 현재 서버에서 서비스를 제공할 수 없음 (보통 과부하가 걸리거나 작동이 중단됐을 때 발생)
• 504 (Gateway Timeout) : 게이트웨이나 프록시 역할을 하는 서버가 그 뒷단의 서버로부터 응답을 기다리다 타임아웃이 발생함

 

 

---

 

 

 

오류 처리 전략

 

3XX - Redirection (리다이렉션)

브라우저 환경에서는 보통 자동으로 리다이렉션 되지만,

만약 안되는경우 location.href = '이동될 주소'와 같이 수동으로 작성해줘야한다.

 

 

4XX - Client Error (클라이언트 문제)

400 : 보통 주소에 오타가 있거나, 요청한 데이터의 형식이 잘못됐을 때, 입력값을 누락했을 때 발생

=> 사전에 미리 유효성 체크나 입력 오류 안내를 통해 방지

 

401 : 사용자가 로그인하지 않은 상태에서 인증이 필요한 API를 호출하거나, 토큰이 만료되었거나, Authorization 헤더가 누락되었을 때 발생

=> 로그인 페이지로 리다이렉트하거나, 토큰을 재발급받아 자동 로그인 유지 처리를 한다.

 

403 : 리소스에 권한이 없을때 발생

=> 접근 권한이 없는 페이지는 바로 접근할 수 없도록 바로 이동하는 버튼이나 메뉴를 숨김

=> url로 이동할 수 있으므로 권한이 없는 경우 대체할 페이지를 표시

 

404 : 리소스가 아예 없을 때 발생

=> "페이지를 찾을 수 없습니다" 화면을 표시하고, 홈 화면이나 이전 페이지로 이동하도록 버튼을 같이 표시함

 

 

5XX - Server Error (서버 문제)

각 상황에 맞게 안내 페이지를 표시함

 

 

---

 

 

 

typescript 코드로 보면 다음과 같이 처리할 수 있다. (페이지 처리는 별개로..) 

async function fetchUserData(): Promise<void> {
  try {
    const res = await fetch("/api/user");
    // 공통 에러 처리 진입
    if (!res.ok) {
      handleHttpError(res.status); // 상태 코드에 따라 분기 처리
      return;
    }
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error(err);
    alert("서버와 연결할 수 없습니다.");
  }
}

function handleHttpError(status: number): void {
  if (status >= 400 && status < 500) {
    // 4XX (클라이언트 에러)
    switch (status) {
      case 400:
        alert("요청 형식이 잘못되었습니다. 입력값을 확인해주세요.");
        break;
      case 401:
        alert("로그인이 필요합니다.");
        window.location.href = "/login";
        break;
      case 403:
        alert("이 리소스에 접근할 권한이 없습니다.");
        break;
      case 404:
        alert("요청하신 리소스를 찾을 수 없습니다.");
        break;
      default:
        alert("요청 오류가 발생했습니다. 다시 시도해주세요.");
    }
  } else if (status >= 500) {
    // 5XX (서버 에러)
    switch (status) {
      case 500:
        alert("서버에서 오류가 발생했습니다. 잠시 후 다시 시도해주세요.");
        break;
      case 501:
        alert("요청한 기능이 서버에서 지원되지 않습니다.");
        break;
      case 502:
        alert("잘못된 게이트웨이 응답입니다. 서버 상태를 확인해주세요.");
        break;
      case 503:
        alert("현재 서버가 과부하 상태입니다. 나중에 다시 시도해주세요.");
        break;
      case 504:
        alert("서버 응답 시간이 초과되었습니다. 다시 시도해주세요.");
        break;
      default:
        alert("서버 오류가 발생했습니다. 관리자에게 문의해주세요.");
    }
  }
}

 

 

 

 

참고
https://hongong.hanbit.co.kr/http-%EC%83%81%ED%83%9C-%EC%BD%94%EB%93%9C-%ED%91%9C-1xx-5xx-%EC%A0%84%EC%B2%B4-%EC%9A%94%EC%95%BD-%EC%A0%95%EB%A6%AC/
https://developer.mozilla.org/ko/docs/Web/HTTP/Reference/Status