1. X2BEE-core 팩키지 설치

이 문서는 x2bee-core 패키지를 설치하고 사용하는 방법에 대한 안내입니다.

---

Data fetching 이란?

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

Next.js 13 이전 버전에서는 getStaticProps이나 getServerSideProps라는 메소드 또는 컴포넌트 로직 내에서 사용자 행위로 일어나는 이벤트 동작에서 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)

여기에서는 기본 fetch API를 확장한 restApiUtil 클래스를 사용합니다. 공통으로 사용되는 헤더, Token 등의 값 설정이 추가되어 해당 사이트에 맞춰 사용하기 위해 만들어진 serverRestApi, clientRestApi 클래스 등 총 3가지 util 클래스를 제공합니다.

Next.js 13/14 환경에서는 서버/클라이언트 컴포넌트 구분에 따라 fetch 사용 방식이 달라질 수 있으니, 환경에 맞는 serverRestApi 또는 clientRestApi를 사용하세요.

x2bee-core 설치

다음 절차로 프로젝트에 x2bee-core 패키지를 추가하고 설치합니다.

1

프로젝트의 package.json에 의존성 추가

package.json의 dependencies 섹션에 다음 항목을 추가합니다:

package.json (예시)

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

2

패키지 설치

의존성 추가 후, 일반적인 패키지 설치 명령어(npm install 또는 yarn install 등)를 실행하면 node_modules에 x2bee-core가 추가됩니다.

정상적으로 패키지가 설치 완료되면 node_modules에 x2bee-core 폴더가 생성됩니다.