Axios 및 사용자 정의 후크를 사용하여 강력한 프런트엔드 오류 처리 시스템 구축

소개

효과적인 오류 처리는 원활한 사용자 경험을 제공하고 깔끔하고 확장 가능한 코드를 유지하는 데 중요합니다. 복잡한 애플리케이션에서 구성 요소 전체에 걸쳐 오류를 수동으로 관리하면 코드가 복잡해지고 일관되지 않는 경우가 많습니다. 이 가이드에서는 사용자 친화적이고 체계적이며 효율적인 구조를 만들기 위해 Axios, 맞춤형 후크(useApi) 및 모듈식 서비스 레이어를 사용하여 React에서 모듈식, 확장 가능 및 중앙 집중식 오류 처리 시스템을 구축하는 방법을 보여줍니다.

Hook: 중앙 집중식 오류 처리가 중요한 이유

전자상거래 플랫폼을 구축하고 있다고 상상해 보세요. 여러 구성 요소가 다양한 API에서 데이터를 가져오며 각 구성 요소는 네트워크 문제, 서버 오류, 잘못된 사용자 입력 등 다양한 이유로 실패할 수 있습니다. 중앙 집중식 오류 처리 시스템이 없으면 반복적인 오류 확인으로 인해 코드가 복잡해지고 사용자는 일관되지 않은 피드백을 받게 됩니다. 안정성과 원활한 사용자 경험을 보장하기 위해 이 프로세스를 어떻게 간소화할 수 있습니까? 이 가이드에서는 방법을 알려드립니다.

마지막에 다음 내용을 배우게 됩니다.

• Axios 인터셉터를 사용하여 중앙 집중식 오류 처리를 설정하는 방법
• API 요청 상태를 관리하기 위한 사용자 정의 useApi 후크의 역할
• 서비스 모듈을 사용하여 API 로직을 구성할 때의 이점
• 재시도 옵션, 요청 취소 등 사용자 친화적인 오류 처리를 위한 고급 기술입니다.

목차

1. 왜 중앙 집중식 오류 처리가 필요한가요?
2. 기본 구현
3. 인터셉터를 사용하여 Axios 인스턴스 설정
4. 맞춤형 Api Hook 만들기
5. 프라미스와 약속 거부의 이해
6. 서비스 모듈 구성
7. 예: 사용자 서비스
8. 고급 개선 사항(선택 사항)
   • 사용자 정의 구문 분석 오류
   • 재시도 메커니즘
   • 상세 알림
   • 구성요소 마운트 해제 요청 취소
9. 점 연결
10. 시각적 요약
11. 전체 정리: 실제 사례
12. 모범 사례
13. 추가 자료
14. 문제해결
15. 환경구성
16. 결론
17. 행동 촉구

---

왜 중앙 집중식 오류 처리인가?

중앙 집중식 오류 처리는 두 가지 일반적인 과제를 해결합니다.

반복되는 오류 코드

• 문제: 중앙 메커니즘이 없으면 구성 요소가 여러 try-catch 블록에 의존합니다.
• 영향: 일관성 없는 오류 처리 및 중복 코드로 이어집니다.

일관되지 않은 사용자 경험

• 문제: 오류 메시지는 중앙 집중화 없이 앱마다 다를 수 있습니다.
• 영향: 단절된 사용자 경험을 만들어 사용자에게 혼란을 줄 수 있습니다.

Axios 인터셉터, 사용자 정의 후크(useApi) 및 서비스 모듈과 함께 중앙 집중식 접근 방식을 사용하면 다음을 통해 이러한 문제를 해결할 수 있습니다.

• 오류 구문 분석 및 메시징을 위한 단일 위치: 일관성을 보장하면서 모든 오류를 처리할 수 있는 통합된 장소를 제공합니다.
• 관심 사항 분리: 구성 요소가 데이터 표시 및 사용자 상호 작용에만 집중할 수 있도록 하고 오류 처리는 중앙 집중식 모듈에 맡깁니다.

---

기본 구현

인터셉터를 사용하여 Axios 인스턴스 설정

Axios 인터셉터는 Axios가 모든 요청 또는 응답에 대해 호출하는 함수입니다. 응답 인터셉터를 설정하면 전역적으로 오류를 처리하고, 응답을 구문 분석하고, 특정 조건에 따라 사용자를 로깅하거나 리디렉션하는 등의 작업을 수행할 수 있습니다.

1단계: 필요한 모듈 가져오기

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

2단계: Axios 인스턴스 생성

const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '',
  headers: {
    'Content-Type': 'application/json',
  },
});

3단계: 응답 인터셉터 추가

axiosInstance.interceptors.response.use(
  (response) => response, // Pass through successful responses
  (error) => {
    if (!error.response) {
      toast.error(ERROR_MESSAGES.NETWORK_ERROR);
      return Promise.reject(error);
    }

    const { status, data } = error.response;
    let message = ERROR_MESSAGES[status] || ERROR_MESSAGES.GENERIC_ERROR;

    // Custom logic for specific error types
    if (data?.type === 'validation') {
      message = `Validation Error: ${data.message}`;
    } else if (data?.type === 'authentication') {
      message = `Authentication Error: ${data.message}`;
    }

    // Display error notification
    toast.error(message);

    // Handle unauthorized access by redirecting to login
    if (status === 401) {
      Router.push('/login');
    }

    return Promise.reject(error);
  }
);

설명:

• 오류 구문 분석: 인터셉터는 오류에 응답이 있는지 확인합니다. 그렇지 않은 경우 네트워크 오류로 간주하고 해당 메시지를 표시합니다.
• 사용자 정의 오류 메시지: 서버에서 제공하는 오류 유형에 따라 사용자 정의 오류 메시지를 사용하려고 시도합니다. 사용할 수 있는 메시지가 없으면 미리 정의된 메시지로 대체됩니다.
• 사용자 피드백: React-toastify를 활용하여 토스트 알림을 표시하고 즉각적인 피드백을 제공하여 사용자 경험을 향상합니다.
• 리디렉션: 401 Unauthorized 오류가 발생한 경우 사용자를 로그인 페이지로 리디렉션하여 무단 액세스를 방지하여 보안을 보장합니다.

4단계: Axios 인스턴스 내보내기

export default axiosInstance;

사용자 정의 오류 메시지

일관성과 관리 용이성을 유지하려면 별도의 구성 파일에 사용자 정의 오류 메시지를 정의하세요.

// config/customErrors.js

const ERROR_MESSAGES = {
  NETWORK_ERROR: "Network error. Please check your connection and try again.",
  BAD_REQUEST: "There was an issue with your request. Please check and try again.",
  UNAUTHORIZED: "You are not authorized to perform this action. Please log in.",
  FORBIDDEN: "Access denied. You don't have permission to view this resource.",
  NOT_FOUND: "The requested resource was not found.",
  GENERIC_ERROR: "Something went wrong. Please try again later.",

  // You can add more messages here if you want
};

export default ERROR_MESSAGES;

빠른 요약: Axios 인터셉터 구성

Axios 인터셉터 설정은 다음을 제공합니다.

• 중앙 집중식 오류 구문 분석: 오류를 한 곳에서 관리하여 모든 API 요청에 대한 일관성을 보장합니다.
• 사용자 피드백: React-toastify를 활용하여 문제에 대해 사용자에게 즉시 알립니다.
• 리디렉션 및 보안: 필요할 때 승인되지 않은 사용자가 로그인하도록 리디렉션하여 앱을 안전하게 유지합니다.

이 중앙 집중식 Axios 인스턴스는 모든 API 요청의 일관된 관리와 애플리케이션 전반의 오류 처리를 보장하는 안정적이고 사용자 친화적인 API 통신 계층을 구축하는 데 핵심입니다.

사용자 정의 useApi 후크 생성

useApi 후크는 API 요청 처리, 로딩, 데이터 및 오류 상태 관리를 중앙 집중화합니다. useApi는 이 프로세스를 추상화함으로써 구성요소가 반복적인 try-catch 블록을 피하고 데이터 표현에 집중할 수 있도록 합니다.

매개변수:

• apiFunc(함수): 일반적으로 서비스 모듈에서 실행할 API 함수입니다.
• immediate(부울, 선택 사항): 후크 초기화 시 즉시 API 호출을 수행해야 하는지 여부를 결정합니다. 기본값은 false입니다.

반환된 값:

• data: API 호출의 응답 데이터
• loading: API 호출이 진행 중인지 여부를 나타냅니다.
• 오류: 실패한 API 호출로 인한 오류 메시지를 캡처합니다.
• 요청: API 호출을 시작하는 함수로, 필요한 매개변수로 호출할 수 있습니다.

구현:

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

설명:

• 상태 관리:
  • data: 응답 데이터를 저장합니다.
  • loading: API 호출이 진행 중인지 나타냅니다.
  • 오류: 오류 메시지를 캡처합니다.
• 요청 기능:
  • API 호출을 시작합니다.
  • API 호출 결과에 따라 상태 업데이트를 관리합니다.

약속과 약속 거부 이해하기

더 자세히 알아보기 전에 JavaScript의 약속과 약속 거부를 이해하는 것이 중요합니다. JavaScript는 API 호출과 같은 비동기 작업을 처리하는 데 중추적인 역할을 하기 때문입니다.

• Promise: Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 개체입니다. 작업의 성공(해결) 또는 실패(거부)를 처리하기 위해 콜백을 연결할 수 있습니다.
• Promise Rejection: 작업이 실패하면 Promise가 "거부"되어 .catch 메서드 또는 .then의 두 번째 매개변수가 트리거됩니다.

Axios 및 useApi의 관련성:

• Axios 및 Promises: Axios는 Promises를 사용하여 HTTP 요청을 처리합니다. Axios를 사용하여 요청하면 응답 데이터로 해결되거나 오류와 함께 거부되는 Promise가 반환됩니다.
• Axios 인터셉터의 Promise 거부: Axios 인터셉터에서 오류가 발생하면 인터셉터는 Promise.reject(error)를 사용하여 Promise를 거부합니다. 이 거부는 API 호출이 이루어진 위치로 전파됩니다.
• useApi에서 거부 잡기: useApi 후크의 요청 기능은 try-catch를 사용하여 이러한 거부를 처리합니다. apiFunc(...args)가 거부되면 catch 블록이 오류를 캡처하여 그에 따라 오류 상태를 업데이트합니다.

약속 거부 처리의 중요성:

• 처리되지 않은 거부 방지: Promise 거부가 처리되지 않으면 예상치 못한 동작이 발생하고 디버깅이 어려워질 수 있습니다.
• 일관적인 오류 관리: Promise 거부 처리를 중앙 집중화함으로써 모든 오류가 균일하게 관리되도록 보장하여 코드 신뢰성과 사용자 경험을 향상시킵니다.

useApi Hook을 사용하지 않으면 어떻게 되나요?

useApi 후크가 없으면 API 호출을 수행하는 모든 구성 요소에 try-catch 블록을 구현해야 합니다. 이 접근 방식은 다음과 같은 이점을 제공합니다.

• 반복 코드: 각 구성 요소는 유사한 오류 처리 논리를 가지므로 코드 중복성이 높아집니다.
• 일관되지 않은 오류 처리: 구성 요소마다 오류를 다르게 처리하여 일관되지 않은 사용자 경험을 초래할 수 있습니다.
• 유지 관리 노력 증가: 오류 처리 논리를 업데이트하려면 여러 구성 요소를 변경해야 하므로 유지 관리가 번거로워집니다.

useApi 후크를 사용하면 반복적인 오류 처리 논리를 추상화하여 더 깔끔하고 유지 관리하기 쉬운 코드를 만들 수 있습니다.

사용 예:

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

이 예에서 useApi 후크는 제품을 가져오기 위한 API 호출을 관리합니다. 로드 상태를 처리하고 오류를 캡처하며 렌더링을 위해 가져온 데이터를 구성 요소에 제공합니다.

---

서비스 모듈 구성

서비스 모듈은 개체(예: 사용자, 제품)별로 구성된 API 엔드포인트 기능을 정의합니다. 이 구조는 API 로직을 구성 요소 코드와 분리하여 모듈화 및 재사용을 보장합니다.

예: 제품 서비스

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

예: 사용자 서비스

const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '',
  headers: {
    'Content-Type': 'application/json',
  },
});

서비스 모듈의 이점:

• 재사용 및 모듈화 활성화: API 기능을 여러 구성 요소에서 재사용할 수 있어 코드 중복이 줄어듭니다.
• 문제 분리 보장: API 로직을 서비스로 이동하여 구성 요소를 깔끔하게 유지하고 코드 구성 및 유지 관리성을 개선합니다.
• 더 쉬워진 테스트: 서비스 모듈을 독립적으로 테스트하여 구성 요소에 통합하기 전에 API 상호 작용이 예상대로 작동하는지 확인할 수 있습니다.

---

고급 개선 사항(선택 사항)

오류 처리 시스템을 더욱 발전시키려는 경우 다음과 같은 고급 기술 구현을 고려해 보세요.

사용자 정의 구문 분석 중 오류가 발생했습니다.

오류를 분류하고(예: 네트워크 및 검증) 실행 가능한 메시지를 제공하여 사용자가 문제와 가능한 해결 방법을 이해하는 데 도움을 줍니다.

구현:

axiosInstance.interceptors.response.use(
  (response) => response, // Pass through successful responses
  (error) => {
    if (!error.response) {
      toast.error(ERROR_MESSAGES.NETWORK_ERROR);
      return Promise.reject(error);
    }

    const { status, data } = error.response;
    let message = ERROR_MESSAGES[status] || ERROR_MESSAGES.GENERIC_ERROR;

    // Custom logic for specific error types
    if (data?.type === 'validation') {
      message = `Validation Error: ${data.message}`;
    } else if (data?.type === 'authentication') {
      message = `Authentication Error: ${data.message}`;
    }

    // Display error notification
    toast.error(message);

    // Handle unauthorized access by redirecting to login
    if (status === 401) {
      Router.push('/login');
    }

    return Promise.reject(error);
  }
);

설명:

• 오류 분류: 인터셉터는 오류 응답의 유형 속성을 확인하여 오류의 성격(예: 유효성 검사 또는 인증)을 결정합니다.
• 실행 가능한 메시지: 사용자에게 오류 유형에 따라 구체적인 오류 메시지를 제공하여 사용자의 이해와 적절한 대응 능력을 향상시킵니다.

재시도 메커니즘

UI의 재시도 버튼이나 지수 백오프를 통한 자동 재시도 등 실패한 요청에 대한 재시도 옵션을 구현하여 안정성을 높입니다.

구현:

export default axiosInstance;

설명:

• 재시도: 지수 백오프 전략을 사용하여 실패한 요청을 최대 3번까지 재시도하도록 Axios를 구성합니다.
• 재시도 조건: 네트워크 오류, 멱등성 요청 또는 서버가 500 내부 서버 오류로 응답하는 경우 재시도가 발생합니다.
• 재시도 로깅: 각 재시도 시도를 기록하며 이는 디버깅 및 모니터링에 유용할 수 있습니다.

상세 알림

사용자가 오류의 중요성을 이해할 수 있도록 심각도(정보, 경고, 오류)별로 알림을 차별화합니다.

구현:

// config/customErrors.js

const ERROR_MESSAGES = {
  NETWORK_ERROR: "Network error. Please check your connection and try again.",
  BAD_REQUEST: "There was an issue with your request. Please check and try again.",
  UNAUTHORIZED: "You are not authorized to perform this action. Please log in.",
  FORBIDDEN: "Access denied. You don't have permission to view this resource.",
  NOT_FOUND: "The requested resource was not found.",
  GENERIC_ERROR: "Something went wrong. Please try again later.",

  // You can add more messages here if you want
};

export default ERROR_MESSAGES;

설명:

• 알림 유형: 오류 카테고리에 따라 토스트 알림 유형(정보, 경고, 오류)을 결정합니다.
• 사용자 피드백: 사용자에게 상황별 피드백을 제공하여 문제의 심각성과 성격을 이해하는 데 도움을 줍니다.

구성요소 마운트 해제 요청 취소

구성 요소가 마운트 해제되면 진행 중인 요청을 취소하여 메모리 누수를 방지하려면 Axios 취소 토큰을 사용하세요.

구현:

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

설명:

• 취소 토큰: 새 요청이 발생하거나 구성 요소가 마운트 해제될 때 Axios 취소 토큰을 활용하여 진행 중인 API 요청을 취소합니다.
• 메모리 누수 방지: 마운트 해제된 구성 요소에서 상태 업데이트가 발생하지 않도록 하여 잠재적인 메모리 누수를 방지합니다.
• 취소된 요청 기록: 디버깅 목적으로 취소된 요청을 기록합니다.

고급 개선 사항 요약

이러한 고급 기술을 구현하면 오류 처리 시스템이 한 단계 더 발전할 수 있습니다.

• 오류 구문 분석 사용자 정의: 사용자에게 보다 구체적인 오류 메시지를 전달하여 사용자가 문제를 직접 이해하고 해결할 수 있도록 돕습니다.
• 재시도 메커니즘: 특정 오류가 발생한 후 자동 또는 수동으로 요청을 재시도하도록 허용하여 안정성을 향상합니다.
• 상세 알림: 오류 유형을 구분하고 심각도에 따라 알림을 표시하여 사용자에게 더 나은 정보를 제공합니다.
• 구성요소 마운트 해제 요청 취소: 메모리 누수 및 중복 요청을 방지하여 안정적이고 효율적인 앱 성능을 보장합니다.

이러한 개선 사항은 선택 사항이지만 앱의 오류 처리 접근 방식에 깊이, 유연성 및 사용자 중심 개선 사항을 추가하므로 매우 가치가 있습니다.

---

점들을 연결하다

구성요소가 useApi를 통해 API 호출을 시작하면 다음 흐름이 트리거됩니다.

구성 요소 사용 서비스 모듈:

각 서비스 모듈(예: userService, productService)은 특정 API 엔드포인트에 대한 기능을 정의하고 구성된 axiosInstance를 사용합니다. 구성 요소는 이러한 서비스 기능과만 상호 작용합니다.

useApi는 서비스 모듈을 통해 Axios를 트리거합니다.

구성요소는 useApi에 서비스 기능(예: productService.getProducts)을 전달합니다. 요청이 호출되면 useApi는 함수를 서비스에 전달한 다음 axiosInstance를 통해 HTTP 요청을 수행합니다.

Axios 인터셉터의 사용자 정의 오류 구문 분석:

axiosInstance의 인터셉터는 오류 로깅을 처리하고 사전 정의된 사용자 정의 오류 메시지를 구문 분석하며 오류 처리를 중앙 집중화합니다.

useApi의 구조화된 응답:

useApi는 구조화된 상태(데이터, 로드 및 오류)를 구성 요소에 반환하므로 데이터 표시 및 상호 작용 처리에만 집중할 수 있습니다.

---

시각적 요약

다음 개요에서는 초기 API 호출부터 사용자 피드백까지 오류 처리 시스템의 각 구성 요소가 애플리케이션 내에서 상호 작용하는 방식을 설명합니다.

1. 구성요소

   • 구성 요소는 API 호출 관리, 오류 처리, 로드 상태의 복잡성을 추상화하는 useApi 후크를 사용하여 API 요청을 시작합니다.

2. Api Hook 사용

   • useApi는 (서비스 모듈에서) API 요청에 대한 함수를 수신하는 사용자 정의 후크입니다. 요청의 로딩 상태를 관리하고, 오류를 처리하고, 구조화된 응답(데이터, 로딩, 오류)을 구성 요소로 다시 반환합니다.

3. 서비스 모듈

   • 서비스 모듈은 각 API 엔드포인트(예: getProducts, createProduct)에 대한 특정 기능을 정의하고 모든 요청에 ​​대해 중앙 집중식 axiosInstance를 사용하여 애플리케이션 전체에서 일관성을 보장합니다.

4. Axios 인스턴스

   • axiosInstance는 기본 URL 및 헤더와 같은 사용자 정의 구성을 적용하여 HTTP 요청 및 응답을 관리합니다.

5. API 응답

   • API의 응답은 전역적으로 오류를 처리하는 Axios 인터셉터를 통해 처리됩니다. 여기에는 사용자 정의 오류 메시지 구문 분석 및 사용자 알림 트리거가 포함됩니다.

6. 오류 처리 및 사용자 알림

   • 인터셉터는 반응-toastify 알림을 통해 사용자에게 오류 메시지를 표시하고, 인증 오류 시 사용자를 로그인 페이지로 리디렉션하는 등의 추가 작업을 관리할 수 있습니다.

이 흐름을 사용하면 중앙 집중식 오류 관리와 일관된 사용자 피드백을 통해 구성 요소가 반복적인 오류 확인 논리를 처리할 필요 없이 데이터 표시에만 집중할 수 있습니다.

---

모든 것을 하나로 묶기: 실제 사례

ProductList 구성 요소

이 예에서는 중앙 집중식 오류 처리 및 피드백을 통해 API 호출부터 데이터 표시까지 전체 흐름을 보여줍니다.

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

구성 요소 분석:

• 수입 명세서:

  • React-toastify: 토스트 알림을 표시하는 데 사용됩니다.
  • productService : 상품과 관련된 API 기능을 담고 있습니다.
  • useApi: API 호출 관리를 위한 사용자 정의 후크

• 후크 초기화:

  • productService의 getProducts 함수를 사용하여 useApi 후크를 초기화합니다. false 매개변수는 후크 초기화 시 API 호출이 즉시 발생하지 않아야 함을 나타냅니다.

• API 호출 트리거:

  • useEffect를 사용하여 구성 요소가 마운트될 때 요청 함수를 호출하고 제품의 첫 번째 페이지를 가져옵니다.

• 오류 처리:

  • 또 다른 useEffect는 오류 상태의 변화를 수신합니다. 오류가 발생하면 토스트 알림을 트리거하여 사용자에게 알립니다.

• 조건부 렌더링:

  • 로딩 상태: API 호출이 진행되는 동안 로딩 메시지를 표시합니다.
  • 오류 상태: API 호출이 실패할 경우 오류 메시지를 표시합니다.
  • 데이터 렌더링: 데이터를 성공적으로 가져오면 이미지, 이름 및 가격이 포함된 제품 그리드를 렌더링합니다.

이 예에서는 중앙 집중식 오류 처리가 구성 요소 논리를 단순화하고 일관된 사용자 피드백을 보장하는 방법을 보여줍니다.

---

모범 사례

모범 사례를 준수하면 오류 처리 시스템이 효율적이고 유지 관리가 가능하며 사용자 친화적이게 됩니다.

우려사항의 분리

• 설명: 서비스 모듈을 사용하여 API 로직을 UI 구성 요소와 별도로 유지합니다. 이를 통해 코드 구성과 유지 관리성이 향상됩니다.
• 예: 구성 요소 내에서 직접 API 호출을 수행하는 대신 productService.js와 같은 서비스 모듈에 위임하세요.

일관된 오류 메시지

• 설명: 모든 오류를 균일하게 처리하여 디버깅을 단순화하고 원활한 사용자 경험을 제공합니다.
• 예: customErrors.js에 사전 정의된 오류 메시지를 사용하면 오류가 발생한 위치에 관계없이 사용자가 일관된 피드백을 받을 수 있습니다.

반복적인 코드 피하기

• 설명: 중앙 집중식 오류 처리 및 사용자 정의 후크를 사용하여 구성 요소 전체에서 반복적인 try-catch 블록을 제거합니다.
• 예: useApi 후크는 오류 상태와 알림을 관리하여 구성 요소가 데이터 렌더링에만 집중할 수 있도록 합니다.

의미 있는 오류 메시지

• 설명: 사용자 친화적이고 실행 가능한 오류 메시지를 제공하여 이해도를 높이고 좌절감을 줄입니다.
• 예: "오류가 발생했습니다."와 같은 일반적인 메시지를 표시하는 대신 "확인 오류: 유효한 이메일 주소를 입력하세요."와 같은 특정 메시지를 사용하세요.

엣지 케이스 처리

• 설명: 네트워크 장애, 서버 오류 등 예상치 못한 상황을 예측하고 관리하여 애플리케이션 충돌을 방지하세요.
• 예: Axios 인터셉터는 "네트워크 오류" 토스트를 표시하고 애플리케이션 중단을 방지하여 네트워크 오류를 처리합니다.

안전한 오류 처리

• 설명: 오류 메시지에 민감한 정보가 노출되지 않도록 하세요. 자세한 오류를 서버에 안전하게 기록하면서 사용자 친화적인 메시지를 제공하세요.
• 예: 개발자용 Sentry와 같은 로깅 서비스에 자세한 오류 로그를 보내는 동안 사용자에게 일반적인 오류 메시지를 표시합니다.

---

추가 자료

다음 리소스를 통해 이 가이드에서 다루는 개념에 대한 이해를 높이세요.

• Axios 인터셉터 문서: Axios 인터셉터를 사용하여 요청과 응답을 전역적으로 처리하는 방법을 알아보세요.
• React Hooks 문서: 상태 및 부작용 관리를 위한 React Hooks의 기본 사항을 이해합니다.
• Redux Toolkit 소개: React 애플리케이션의 효율적인 상태 관리를 위해 Redux Toolkit을 시작하세요.
• React-Toastify 문서: 더 나은 사용자 피드백을 위해 토스트 알림을 구현하는 방법을 알아보세요.

---

문제 해결

1. 토스트 알림이 표시되지 않음

• 원인: React-toastify의 구성 요소가 애플리케이션에 누락되었을 수 있습니다.
• 해결책: 기본 애플리케이션 구성 요소(일반적으로 페이지/_app.js)에 포함되어 있습니다.

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

2. 인터셉터가 포착하지 못하는 API 요청

• 원인: 서비스 모듈이 중앙 집중식 axiosInstance 대신 기본 Axios 라이브러리를 가져올 수 있습니다.
• 해결책: 모든 서비스 모듈이 중앙 집중식 axiosInstance를 가져왔는지 확인하세요.

const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '',
  headers: {
    'Content-Type': 'application/json',
  },
});

3. 특정 오류로 인해 리디렉션이 작동하지 않음

• 원인: next/router의 라우터를 제대로 가져오지 않거나 React 구성 요소 외부에서 사용하지 않을 수 있습니다.
• 해결책: 라우터가 리디렉션을 수행할 수 있는 컨텍스트에서 Axios 인터셉터가 사용되는지 확인하세요. 또는 useApi 후크 또는 구성 요소 내에서 리디렉션을 처리하세요.

---

환경 구성

다양한 환경을 관리하면 개발, 테스트, 생산 중에 애플리케이션이 올바른 API 엔드포인트와 상호 작용할 수 있습니다.

1단계: 환경 변수 정의

프로젝트의 루트 디렉터리에 .env.local 파일을 생성하고 API 기본 URL을 정의하세요.

axiosInstance.interceptors.response.use(
  (response) => response, // Pass through successful responses
  (error) => {
    if (!error.response) {
      toast.error(ERROR_MESSAGES.NETWORK_ERROR);
      return Promise.reject(error);
    }

    const { status, data } = error.response;
    let message = ERROR_MESSAGES[status] || ERROR_MESSAGES.GENERIC_ERROR;

    // Custom logic for specific error types
    if (data?.type === 'validation') {
      message = `Validation Error: ${data.message}`;
    } else if (data?.type === 'authentication') {
      message = `Authentication Error: ${data.message}`;
    }

    // Display error notification
    toast.error(message);

    // Handle unauthorized access by redirecting to login
    if (status === 401) {
      Router.push('/login');
    }

    return Promise.reject(error);
  }
);

2단계: 코드에서 환경 변수에 액세스

Axios 인스턴스가 환경 변수를 사용하는지 확인하세요.

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

모범 사례:

• 민감한 정보 보호: .env.local 파일이나 민감한 환경 변수를 버전 제어 시스템에 커밋하지 마세요. 이러한 파일을 제외하려면 .gitignore를 사용하세요.
• 일관적인 명명 규칙: 환경 변수에 대해 명확하고 일관된 명명을 사용합니다. 일반적으로 프런트엔드에 노출된다는 것을 나타내기 위해 NEXT_PUBLIC_ 접두사가 붙습니다.
• 각 환경에 대한 별도 구성: 구성을 효과적으로 관리하려면 다양한 환경(예: .env.development, .env.production)에 대해 별도의 .env 파일을 유지관리하세요.

---

결론

중앙 집중식 오류 처리 시스템을 구축함으로써 개발자 경험과 사용자 만족도를 모두 향상시키는 깔끔하고 모듈식이며 사용자 친화적인 구조를 설정했습니다. 이제 막 시작했거나 앱의 오류 관리를 강화하려는 경우 이 접근 방식은 애플리케이션과 함께 성장할 수 있는 견고한 기반을 제공합니다.

기본부터 시작하여 익숙해짐에 따라 향상된 기능을 추가하면서 여기에 설명된 기능을 직접 실험해 보시기 바랍니다. 오류 처리에 대한 중앙 집중식 접근 방식은 애플리케이션이 확장됨에 따라 가치를 발휘할 귀중한 기술이자 관행입니다.

---

행동 촉구

중앙 집중식 오류 처리를 통해 React/Next.js 애플리케이션을 향상할 준비가 되셨나요?

더 깔끔한 코드, 일관된 사용자 알림, 향상된 유지 관리 기능을 경험하려면 이 가이드에 설명된 전략을 구현하세요.

피드백을 공유하세요

공유하고 싶은 질문, 제안, 경험이 있나요? 댓글을 남기거나 GitHub 및 Twitter에 연락하여 커뮤니티에 참여하세요.

더 많은 정보를 확인하세요

저는 중앙 집중식 오류 처리 시스템을 기반으로 npm 패키지를 개발하는 중입니다. 업데이트를 계속 지켜봐 주시거나 유용하다고 생각되는 기능을 제안해 주십시오!

즐거운 코딩하세요! ?✨

위 내용은 Axios 및 사용자 정의 후크를 사용하여 강력한 프런트엔드 오류 처리 시스템 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!