=> {
+ (error) => {
+ if (error.response && error.response.status === 401) {
+ window.location.href = `${backOfficeAuthHost}/login?targetUrl=${window.location.href}`;
+ }
+
+ return Promise.reject(error);
+ };
+
+ orderApiRequester.interceptors.response.use(
+ (response: AxiosResponse) => response,
+ httpErrorHandler
+ );
+};
+```
+
+
+
+
+## 4) 에러 바운더리를 활용한 에러 처리
+
+- 에러 바운더리는 리액트 컴포넌트 트리에서 에러가 발생할 때 공통으로 에러를 처리하는 리액트 컴포넌트이다.
+- 에러 바운더리는 에러가 발생한 컴포넌트 대신에 에러 처리를 하거나 예상치 못한 에러를 공통 처리할 때 사용할 수 있다.
+- 트리 하위에 있는 컴포넌트에서 발생한 에러를 캐치하면, 해당 에러를 가장 가까운 부모 에러 바운더리에서 처리하게 할 수 있다.
+
+```tsx
+import React, { ErrorInfo } from "react";
+import ErrorPage from "pages/ErrorPage";
+
+interface ErrorBoundaryProps {}
+interface ErrorBoundaryState {
+ hasError: boolean;
+}
+
+class ErrorBoundary extends React.Component<
+ ErrorBoundaryProps,
+ ErrorBoundaryState
+> {
+ constructor(props: ErrorBoundaryProps) {
+ super(props);
+ this.state = { hasError: false };
+ }
+
+ static getDerivedStateFromError(): ErrorBoundaryState {
+ return { hasError: true };
+ }
+
+ componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+ this.setState({ hasError: true });
+ console.error(error, errorInfo);
+ }
+
+ render(): React.ReactNode {
+ const { children } = this.props;
+ const { hasError } = this.state;
+ return hasError ? : children;
+ }
+}
+
+const App = () => {
+ return (
+
+
+
+ );
+};
+```
+
+> 위처럼 작성하면 OrderHistoryPage 컴포넌트 내에서 처리되지 않은 에러가 있을 때 에러 바운더리에서 에러 페이지를 노출한다. 이외에도 에러 바운더리에 로그를 보내는 코드를 추가하여 예상치 못한 에러의 발생 여부를 추적할 수 있게 된다.
+
+
+
+
+## 5) react query를 활용한 에러 처리
+
+```tsx
+const JobComponent = () => {
+ const { isError, error, isLoading, data } = useFetchJobList();
+
+ if (isError) {
+ return {`${error.message}가 발생했습니다.`}
;
+ }
+
+ if (isLoading) {
+ return 로딩 중
;
+ }
+
+ return (
+ <>
+ {data.map((job) => (
+
+ ))}
+
+ );
+};
+```
+
+
+
+
+## 6) 그 밖의 에러 처리
+
+비지니스 로직에서의 유효성 검증에 의해 추가된 커스텀 에러는 200 응답과 함께 응답 바디에 별도의 상태 코드를 전달하기도 한다.
+
+예를 들어 장바구니에서 주문을 생성하는 API가 다음과 같은 커스텀 에러를 반환한다고 해보자.
+
+```
+httpStatus: 200 {
+ "status": "C20005", // 성공인 경우 "SUCCESS"를 응답
+ "message": "장바구니에 품절된 메뉴가 있습니다"
+}
+```
+
+> 이럴 때 만약 커스텀 에러를 사용하고 있는 요청을 일괄적으로 에러로 처리하고 싶다면
+> Axios 등의 라이브러리 기능을 활용하면 된다.
+
+특정 호스트에 대한 API requester를 별도로 선언하고
+상태 코드 비교 로직을 인터셉터에 추가할 수 있다.
+
+
+
+```ts
+export const apiRequester: AxiosInstance = axios.create({
+ baseURL: orderApiBaseUrl,
+ ...defaultConfig,
+});
+
+export const httpSuccessHandler = (response: AxiosResponse) => {
+ if (response.data.status !== "SUCCESS") {
+ throw new CustomError(response?.data.message, response);
+ }
+
+ return response;
+};
+
+apiRequester.interceptors.response.use(httpSuccessHandler, httpErrorHandler);
+
+const createOrder = (data: CreateOrderData) => {
+ try {
+ const response = apiRequester.post("https://...", data);
+ } catch (error) {
+ // status가 SUCCESS가 아닌 경우 에러로 전달
+ errorHandler(error);
+ }
+};
+```
+
+
+
diff --git "a/CH07_\353\271\204\353\217\231\352\270\260_\355\230\270\354\266\234/7.4_API_\353\252\250\355\202\271/seulgi.md" "b/CH07_\353\271\204\353\217\231\352\270\260_\355\230\270\354\266\234/7.4_API_\353\252\250\355\202\271/seulgi.md"
index 3beced8..ab44065 100644
--- "a/CH07_\353\271\204\353\217\231\352\270\260_\355\230\270\354\266\234/7.4_API_\353\252\250\355\202\271/seulgi.md"
+++ "b/CH07_\353\271\204\353\217\231\352\270\260_\355\230\270\354\266\234/7.4_API_\353\252\250\355\202\271/seulgi.md"
@@ -1 +1,35 @@
-
+# API 모킹
+
+프론트 개발을 하다보면 서버 API가 완성되기 전에 개발을 진행해야 할 일이 있을 때
+모킹이라는 방법을 활용할 수 있다. 모킹은 가짜 모듈을 활용하는 것을 말한다.
+
+모킹하는 방법은 간단히 아래와 같은 방법이 있다.
+
+1. JSON 파일 불러오기
+2. NextApiHandler 활용하기
+3. API 요청 핸들러에 분기 추가하기
+4. axios-mock-adapter로 모킹하기
+5. MSW와 같은 서비스워커 활용하기
+
+
+
+
+## 목업 사용 여부 제어하기
+
+로컬에서는 목업을 사용하고 dev나 운영 환경에서는 사용하지 않으려면
+간단한 설정을 해주면 되는데 플래그를 사용해 목업으로 개발할 때와 하지 않을 때를 구분한다.
+
+혹은, 스크립트 실행 시 구분 짓고자 한다면 package.json에 관련 스크립트를 추가해줄 수 있다.
+
+이렇게 자바스크립트 코드의 실행 여부를 제어하지 않고,
+config 파일을 별도로 구성하거나 프록시를 사용할 수 있다.
+
+목업을 사용할 때 네트워크 요청을 확인하고 싶을 때는 네트워크에 보낸 요청을 변경해주는
+Cypress같은 도구의 웹훅을 사용하면 된다.
+
+> **Cypress?**
+> 프론트엔드 테스트를 위한 오픈 소스 자바스크립트 엔드 투 엔드 테스트 도구다.
+> 주로 웹 애플리케이션의 동작을 시뮬레이션하고 테스트하는 데 사용된다.
+
+
+