1. x2bee-core 패키지 설치 및 사용 방법

Data fetching 이란?

Data fetching이란 API등을 이용하여 데이터를 가져오는 과정을 의미하며, 대표적으로 자바스크립트에서 네이티브로 제공해주는XMLHttpRequest, Fetch API 그리고 jQuery의 AJAX,  Axios 통신 라이브러리를 이용하여 처리 합니다.

 

Next JS 13 이전 버전에서는 getStaticProps이나 getServerSideProps라는 메소드 또는 Component 로직내에서 사용자 행위로 일어나는 이벤트 동작 내에서 data fetching을 사용하였습니다.

 

하지만 Next 13 부터는 Server Component 및 Client Component라는 구분이 생겨났고, 이로 인하여 data fetching에도 영향을 주었는데 기존에는 Axios와 같은 모듈을 이용하였다면, 현재 새로운 Next 13 및 14 버전에서는 기본적으로 제공해주는

fetch() API(https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch)를 사용하는 것으로 변경 되었습니다. (Next, Nuxt 둘다 fetch를 사용하는 것이 권장되며, fetch를 사용해야지만 모든 동작이 원할합니다)

 

테크팀에서는 기본 fetch api를 확장한 x2bee-core의 restApiUtil을 제공하고 있습니다.
x2bee-core의 restApiUtil은 순수 fetch api를 조금 더 편하게 사용하기 위해서 반복적으로 들어가야 되는 코드 및 필요한 기능 추가, 반환되는 모델값을 Response Class로 통일하여 반환하는 등의 로직이 추가되어 있습니다.

그리고 그외에 브라우저에서 파일을 선택 및 반환해주는  browse, promise 객체를 순서대로(api등을 순서대로 호출하여 반환) 실행하여 해당값들을 array로 반환해주는 promiseChain등의 Util을 제공하고 있습니다.

그리고 x2bee-core의 경우에는 순수하 브라우저(ie, 크롬)에서 실행되는 것을 목적으로 만들어진 Util로서 테크팀에서는 리액트에서 사용가능하도록 restApiUtil을 이용하여 만들어진 restApi.ts를 추가로 제공하고 있으며 해당 내용은 다음장에서 설명하도록 하겠습니다.

x2bee-core 설치

package.json에 파일에 다음과 같이 프로젝트 패키지에 추가된 x2bee-core를 추가하고 패키지를 설치

"dependencies": {
	"x2bee-core": "file:libs/x2bee-core"
}

 

정상적으로 패키지가 설치 완료되면 node_modules에 x2bee-core가 추가됨

x2bee-core 사용방법

1.  restApiUtil

해당 내용은 사용방법은 공개하지만 실제 api 사용은 restApi.ts를 사용하시면 됩니다.
restApi.ts의 경우 토큰값을 가져와서 설정하는등의 공통 기능이 들어가 있습니다.

=> get의 경우 body는 사용할 수 없습니다. body를 보내는 순간 fetch에서 오류가 나기 때문에 내부적으로 get
인 경우에는 null로 처리하고 있습니다.

=> delete의 경우 처럼 params를 사용하면 fetch 기본적으로 params를 지원하지 않지만 내부적으로 params를
url에 뒤에 파라미터값으로 붙여서 전송하고 있습니다.
url뒤에 직접 파라미터를 붙이셔도 되지만 해당 객체를 사용하여도 됩니다.


import { restApiUtil } from '@/lib/x2bee-core';

const response = await restApiUtil.get('http://localhost:8888/api/sample/test1');

const response = await restApiUtil.post('http://localhost:8888/api/sample/test2', {
	body: {
    	test1: 'test1',
        test2: 'test2',
        test3: 'test3',
    }
});

const response = await restApiUtil.put('http://localhost:8888/api/sample/test3', {
	body: {
    	test1: 'test1',
        test2: 'test2',
        test3: 'test3',
    }
});

const response = await restApiUtil.delete('http://localhost:8888/api/sample/test4', {
	params: {
        test1: '11111',
        test2: '22222'
    },
    body: {
    	test1: 'test1',
        test2: 'test2',
        test3: 'test3',
    }
});

const form = new FormData();
    form.append(
      'data',
      new Blob([JSON.stringify(data)], { type: 'application/json' })
    );
    
const response = await restApiUtil.formPost('/api/sample/samples/testFiledata2', {
      form,
      files: fileList, // Array<FileList> 해당 타입의 파일 목록이 들어갑니다.
 });

const response = await restApiUtil.formPut('/api/sample/samples/testFiledata3', {
      form,
      files: fileList, // Array<FileList> 해당 타입의 파일 목록이 들어갑니다.
 });


=> argument에 대하여 간략하게 설명하면 기본 fetch랑 동일하며 url(string), options(object)로 되어
있습니다.

options {
  headers: 헤더정보
  params: 파라미터정보
  body: body정보
  form: 파일업로드때 사용되는 body로 전송되는 FormData정보  
  files: 동일하게 파일업로드때 사용되며, Array<FileList> 형태로 들어감. 
  직접 FormData에 파일 객체를 추가하여도 되지만 해당 옵션에
  설정하면 file[0], file[0], files등의 이름으로 FormData에 추가함. 
}

// 참고로 헤더 정보 안에 쿠키정보를 직접 추가할일은 없지만 추가한다면 다음과 같은 형태로 추가합니다.
const options = {
        headers: {
          Cookie: 'site_no2=1; site_no3=1;',
        },
      };


=> response 정보는 다음과 같습니다.

ResponseEntity {
  timestamp: 시간
  code: 코드정보
  message: message 정보
  isProcess: process 여부
  payload: payload. 실제 데이터값
  error: 오류 여부
  httpStatus: http status값
  headers: header값
}

 

2.  browse
첫번째 인자값인 accept값의 경우 표준값이므로 표준 문서를 확인하시면 됩니다.

import { browse } from '@/lib/x2bee-core';

// 전체 종류 1개 파일만 선택가능한 browse 호출
browse().then((files) => {
      console.log(files);
 });


// 이미지 파일만 1개 선택가능한 browse 호출
const files = await browse('image/*');
console.log(files);

// 전체 종류를 여러개 파일 선택가능한 browse 호출
browse('*', true).then((files) => {
    console.log(fileList);
});

 

3. promiseChain

=> 해당 코드에서는 다음에서 설명할 restApi이용하여 호출함.

import { restApi } from '@/lib/common/plugins/restApi';
import { promiseChain } from '@/lib/x2bee-core';

const data = await promiseChain.next(() => {
   return restApi.get(
      'http://localhost:8888/api/sample/samples/searchtest3')}).next((res) => {
        // 위에서 실행한 첫번째 api의 결과값이 들어가 있음. 해당값을 이용하여 2번째 api 실행
        console.log(res);
        return restApi.get(
        'http://localhost:8888/api/sample/samples/searchtest3')
    });

    // 위에서 실행한 api2개의 결과가 들어 있음.
    console.log(data);
    console.log(data[0]);
    console.log(data[1]);