2. RestApiUitl 기본 사용

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

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

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

1

기능: Request / Response 인터셉터

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

2

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

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

3

기능: Base URL 설정

base url 설정을 지원합니다.

4

기능: Query params 지원

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

5

기능: 공통 응답 포맷

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

---

1. Server Component 예시

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;

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

예: payload만 사용하려는 경우

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;

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

---

2. Client Component 예시

'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;

버튼 클릭 시 브라우저 콘솔에서 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 제공

예시:

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 유틸을 추가적으로 지원합니다.