API 통신 중 에러 처리

 API 통신 중 에러 처리는 웹 애플리케이션 개발에서 매우 중요한 부분입니다. 이는 사용자 경험을 향상시키고 예기치 않은 문제에 대처하기 위해 필요합니다. 아래에서는 API 통신 중 발생하는 에러를 처리하는 방법에 대해 자세히 설명하겠습니다.

1. HTTP 상태 코드 확인

API 요청을 보낸 후 서버로부터 받은 HTTP 상태 코드를 확인해야 합니다. 일반적으로 성공적인 응답은 200번대 상태 코드로 나타납니다. 그 외의 상태 코드는 오류를 나타내며, 다양한 유형의 에러를 나타낼 수 있습니다. 자주 발생하는 몇 가지 상태 코드는 다음과 같습니다:

• 400 Bad Request: 클라이언트의 잘못된 요청으로 인해 발생한 에러입니다.
• 401 Unauthorized: 인증되지 않은 요청입니다. 사용자 인증이 필요합니다.
• 403 Forbidden: 요청된 리소스에 대한 접근 권한이 없습니다.
• 404 Not Found: 요청한 리소스를 서버에서 찾을 수 없습니다.
• 500 Internal Server Error: 서버에서 예상치 못한 내부 오류가 발생했습니다.

2. 에러 처리 방법

try-catch 문 사용

try {
  const response = await axios.get('https://api.example.com/data');
  // 데이터 처리 로직
} catch (error) {
  console.error('에러 발생:', error.message);
  // 에러 처리 로직
}

HTTP 상태 코드에 따른 처리
API 응답에서 받은 HTTP 상태 코드를 확인하여 해당 상태 코드에 따라 적절한 처리를 할 수 있습니다. 예를 들어, 404 상태 코드를 받은 경우 "페이지를 찾을 수 없습니다"와 같은 사용자 친화적인 메시지를 표시할 수 있습니다. Axios의 경우, 응답 객체에 status 속성을 사용하여 상태 코드를 확인할 수 있습니다.

에러 핸들러 함수 사용
에러 처리 로직을 재사용하기 위해 에러 핸들러 함수를 작성할 수 있습니다. 이 함수를 사용하여 API 호출 시 발생한 에러를 처리하고 적절한 조치를 취할 수 있습니다. 예를 들어:

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    // 데이터 처리 로직
  } catch (error) {
    handleError(error);
  }
}

function handleError(error) {
  console.error('에러 발생:', error.message);
  // 에러 처리 로직
}

사용자에게 적절한 피드백 제공
에러가 발생했을 때 사용자에게 적절한 피드백을 제공하는 것이 중요합니다. 사용자에게 알림 메시지를 표시하거나, 오류 페이지로 리디렉션하거나, 적절한 오류 메시지를 화면에 표시하는 등의 방법을 사용할 수 있습니다. 사용자 친화적인 오류 메시지는 사용자가 발생한 문제를 이해하고 조치를 취할 수 있도록 도와줍니다.

로깅
에러가 발생하면 로깅을 통해 해당 에러를 기록하고 분석할 수 있습니다. 이를 통해 개발자는 어떤 유형의 에러가 자주 발생하는지, 원인을 파악하고 수정할 수 있습니다. 로깅 도구를 사용하거나 서버 측에 에러 로그를 저장하는 방법을 선택할 수 있습니다.

API 통신 중 에러 처리는 안정적인 웹 애플리케이션을 구축하는 데 매우 중요합니다. 사용자에게 친숙한 메시지를 표시하고 개발자는 발생한 문제를 추적하고 수정할 수 있도록 적절한 에러 처리 방식을 구현하는 것이 좋습니다.