> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/04.-data-fetching/2.-restapiuitl.md).

# 2. RestApiUitl 기본 사용

이 문서는 x2bee-core 패키지의 RestApiUtil을 사용하여 데이터를 가져오는 방법에 대한 안내입니다.

x2bee-core에는 RestApiUtil이 포함되어 있습니다.

해당 restApiUtil은 기본 fetch API를 확장하여 다음과 같은 부족한 부분을 보완한 util class 입니다.

{% stepper %}
{% step %}

### 기능: Request / Response 인터셉터

axios에서 제공하는 request interceptor, response interceptor 기능을 지원합니다.
{% endstep %}

{% step %}

### 기능: 자동 직렬화/역직렬화

body 또는 response 데이터를 반환할 경우 text, blob, json 등을 일일이 serialize/deserialize 해야 하는 번거로움을 해소합니다.
{% endstep %}

{% step %}

### 기능: Base URL 설정

base url 설정을 지원합니다.
{% endstep %}

{% step %}

### 기능: Query params 지원

body 외에 params(query) 데이터를 설정할 수 있습니다.
{% endstep %}

{% step %}

### 기능: 공통 응답 포맷

결과 데이터를 공통 ResponseDTO 객체에 담아서 일관되게 반환합니다.
{% endstep %}
{% endstepper %}

***

## 1. Server Component 예시

```javascript
import { COMMON } from '@/constants/x2beeConstants';
import { restApiUtil } from 'x2bee-core';

const Home = async () => {
  const response = await restApiUtil
    .get(COMMON.API_URL + '/api/display/v1/shop/1?dispMediaCd=20');

  console.log(response);

  return (
    <div>
      <h1>Home</h1>
    </div>
  );
};

export default Home;
```

<figure><img src="https://200425-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVEZx3rsZsIv89GPS3d2J%2Fuploads%2FyAoxFk3Fv60r4YFZBaQy%2Fimg%20(4).png?alt=media&amp;token=cca60536-41e4-4063-a72f-e4ab2b7917ab" alt=""><figcaption></figcaption></figure>

기본은 ResponseEntity 객체로 반환됩니다.

예: payload만 사용하려는 경우

```javascript
import { COMMON } from '@/constants/x2beeConstants';
import { restApiUtil } from 'x2bee-core';

const Home = async () => {
  const data = await restApiUtil
    .get(COMMON.API_URL + '/api/display/v1/shop/1?dispMediaCd=20')
    .then(response => {
      return response.payload;
    })
    .catch(errorResponse => {
      return errorResponse.payload;
    });

  console.log(data);

  return (
    <div>
      <h1>Home</h1>
    </div>
  );
};

export default Home;
```

<figure><img src="https://200425-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVEZx3rsZsIv89GPS3d2J%2Fuploads%2FG68U0mO3XVRgfoacQ6vu%2Fimg%20(5).png?alt=media&amp;token=be910947-7c5a-414a-97d3-da5012f17c16" alt=""><figcaption></figcaption></figure>

then 및 catch 절에서 payload 데이터만 반환하는 예시입니다.

***

## 2. Client Component 예시

```javascript
'use client';
import { COMMON } from '@/constants/x2beeConstants';
import { restApiUtil } from 'x2bee-core';

const Home = async () => {
  async function searchData() {
    const data = await restApiUtil
      .get(COMMON.API_URL + '/api/display/v1/shop/1?dispMediaCd=20')
      .then(response => {
        return response.payload;
      })
      .catch(errorResponse => {
        return errorResponse.payload;
      });

    console.log('버튼 클릭');
    console.log(data);
  }

  return (
    <div>
      <h1>Home</h1>
      <button onClick={searchData}>데이터 조회</button>
    </div>
  );
};

export default Home;
```

<figure><img src="https://200425-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVEZx3rsZsIv89GPS3d2J%2Fuploads%2FXQ82qxTxPpn6lyrQSOwl%2Fimg%20(6).png?alt=media&amp;token=667e704c-3965-42ed-b6d0-906c83a0dc84" alt=""><figcaption></figcaption></figure>

버튼 클릭 시 브라우저 콘솔에서 response 데이터를 확인할 수 있습니다.

***

## 3. restApiUtil 제공 함수 종류

| 함수                     | 설명                                             |
| ---------------------- | ---------------------------------------------- |
| restApiUtil.get()      | GET 메소드는 주로 데이터를 읽거나(Read) 검색(Retrieve)할 때에 사용 |
| restApiUtil.post()     | POST 메소드는 주로 새로운 리소스를 생성(create)할 때 사용         |
| restApiUtil.put()      | PUT는 리소스를 생성 / 업데이트하기 위해 사용                    |
| restApiUtil.delete()   | DELETE 메서드는 지정된 리소스를 삭제 하기 위해 사용               |
| restApiUtil.formPost() | 파일 업로드용 POST 메소드                               |
| restApiUtil.formPut()  | 파일 업로드용 PUT 메소드                                |

***

## 4. restApiUtil Parameter (파라미터)

| 이름                   | 설명                                                |
| -------------------- | ------------------------------------------------- |
| url                  | 요청 url                                            |
| options.baseUrl      | 요청 기본 url                                         |
| options.cache        | cache 사용여부, 기본값은 no-store이며 사용 시에는 force-cache 설정 |
| options.headers      | 요청 header                                         |
| options.params       | 요청 parameter(query). 설정 시 해당값을 url 뒤에 붙여서 완성함     |
| options.body         | 요청 data                                           |
| options.interceptors | request, response function 제공                     |

예시:

```javascript
const response = await restApiUtil.get('/samples/nuxt1', {
  baseUrl: 'http://localhost:8888/api/sample',
  headers: {
    aaa1: 'testHeader1',
    aaa2: 'testHeader2',
    Cookie: 'bbb1=c1; bbb2=c2',
    Authorization: 'Bearer testToken99',
  },
  params: {
    test1: 'aaa',
    test2: 'bbb',
  },
  body: {
    log: 'value1',
    testValue: 'value2',
  },
  interceptors: {
    request: async (args) => {
      // 로딩바 생성
      args[0] = '/samples/test2'
      args[1].params.test2 = 'bbbb2';
      args[1].headers.aaa2 = 'testHeader2222';
      args[1].headers.Authorization = 'Bearer testToken88';
      return args;
    },
    response: async (response) => {
      // 로딩바 삭제
      if (response.status === 400) {
        return { test: '변경' };
      } else {
        return response;
      }
    },
  },
});
```

restApiUtil은 순수 fetch 함수를 확장한 자바스크립트 util class로서 next.js, nuxt.js 등 어떠한 자바스크립트 환경에서도 사용 가능한 util입니다. x2bee에서는 해당 함수를 next.js용으로 감싼 RestApi 유틸을 추가적으로 지원합니다.