[React] 백엔드와 협업, Axios 에러 메세지 모음

 

2xx (성공)

• 200 OK: 요청이 성공적으로 처리되었습니다.
• 201 Created: 요청으로 새 리소스가 생성되었습니다.
• 204 No Content: 요청은 성공적으로 처리되었지만 응답에 본문이 없습니다.

4xx (클라이언트 오류)

• 400 Bad Request: 요청이 잘못되었습니다. 클라이언트 요청에 오류가 있을 때 사용됩니다.
• 401 Unauthorized: 인증이 필요합니다.
• 403 Forbidden: 리소스에 접근 권한이 없습니다.
• 404 Not Found: 요청한 리소스를 찾을 수 없습니다.
• 405 Method Not Allowed: 요청된 HTTP 메소드가 허용되지 않습니다.
• 422 Unprocessable Entity: 입력 데이터가 유효하지 않거나 처리할 수 없습니다.

5xx (서버 오류)

• 500 Internal Server Error: 서버에서 오류가 발생했습니다. 일반적으로 서버 코드나 구성 문제로 인한 오류입니다.
• 502 Bad Gateway: 게이트웨이나 프록시 서버에서 잘못된 응답을 받았습니다.
• 503 Service Unavailable: 서버가 일시적으로 서비스를 사용할 수 없습니다.

아래 코드와 같이 에러 메세지를 다루어 사용자 경험을 높일 수 있다.

import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [errorMessage, setErrorMessage] = useState(''); // 에러 메세지 상태를 위한 변수

  const fetchData = async () => {
    try { // 성공적인 응답을 처리할 때
      const response = await axios.get('YOUR_API_ENDPOINT'); // API 읽어오는 함수
      
     
    } catch (error) {
      if (error.response) {
        if (error.response.status === 400) { 
          setErrorMessage(`클라이언트 에러 : ${error.response.data.message}`);
        } else if (error.response.status === 500) {
          setErrorMessage('Internal Server Error: 서버 측 오류 발생');
        } else {
          setErrorMessage('알 수 없는 오류 발생');
        }
      } else if (error.request) {
        console.error('서버로 요청을 보내지 못했습니다.');
        setErrorMessage('서버로 요청을 보내지 못했습니다.');
      } else {
        console.error('오류 발생:', error.message);
        setErrorMessage('알 수 없는 오류 발생');
      }
    }
  };

  return (
    <div>
      <button onClick={fetchData}>데이터 가져오기</button> // 데이터 가져오기 버튼 
      {errorMessage && <div className="error-alert">{errorMessage}</div>} // 에러 메세지 확인 
    </div> 
  );
}

export default App;

 

Axios 코드 모음

2023.07.18 - [코딩/React] - [React] 서버 연동을 위한 Axios 개념과 사용 방법&Tip

[React] 서버 연동을 위한 Axios 개념과 사용 방법&Tip