[nestjs/react] nestia로 sdk package 생성 해서 리엑트에서 사용하기(feat. github npm registry)

 

기전 nestjs 프로젝트를 nestia 환경으로 마이그레이션 중이다.
nestia는 참 편리한게 많은데. 그 중 대박적인게 명령어 하나로 sdk를 생성 할 수 있는 것이다.

 

그래서 기존 프로젝트에 nestia를 설치한 후 그 구조에 맞게 변경을 시켰다.

그런 뒤, 리엑트에서 sdk를 다운 받아서, 백엔드에 요청하는 것을 하고자 한다.

---

 

일단 nestia 코드를 작성하는 것은 생략한다.
아래 링크로 대체하겠다. 참고로 samchon 이분이 개발했다.

https://github.com/samchon/nestia-template

GitHub - samchon/nestia-template: Nestia template project installed by "npx nestia start"

https://github.com/picktogram/nestia-example

GitHub - picktogram/nestia-example: nestjs + nestia + typeorm example repo

 

 

---

1. 생성(빌드)

2. 퍼블리시

3. 사용

---

 

1. 생성 및 빌드

 

루트에서 다음의 명령어를 실행하면, src/api에 sdk 코드가 생성된다.

$ npx nestia sdk

 

그런 후, 루트에 tsconfig.api.json 파일을 추가하자.

내용은 각자 환경에 맞춰서 작성해주면 된다.

주의 할 부분은, outDir와 include 부분이다.

(나의 경우엔 outDIr을 packages로 지정했지만, 실제 깃허브에 올라갈 sdk 리퍼지토리명으로 하는 것을 추천한다.)

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "lib": ["DOM", "ES2020"],
    "declaration": true,
    "outDir": "./[패키지명]",
    "downlevelIteration": true,
    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": false,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": false,
    "baseUrl": "./"
  },
  "include": ["src/api"]
}

 

그점 이제 빌드를 해보자.

npx tsc -p tsconfig.api.json

 

문제가 없다면 폴더가 생겼을 것이다.

 

 

---

 

2. 퍼블리시

 

빌드된 곳에 package.json 파일을 생성한다.

{
  "name": "@[깃허브계정명]/[패키지명]",
  "version": "0.0.0",
  "description": "API for PROJECT",
  "main": "api/lib/api/index.js",
  "typings": "api/lib/api/index.d.ts",
  "publishConfig": {
    "@[계정명]:registry": "https://npm.pkg.github.com/"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/[깃허브계정명]/[패키지명]"
  },
  "author": "[입력사항]",
  "license": "MIT",
  "bugs": {
    "url": ""
  },
  "homepage": "#readme",
  "dependencies": {
    "@nestia/fetcher": "^2.4.3",
    "typia": "^5.3.5"
  }
}

 

 

깃허브 토큰 발급 https://github.com/settings/tokens/new 

 

루트에서 .npmrc 파일을 생성해주자.

그리고 발급한 토큰을 입력한다.

@[깃허브계정명]:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=[깃허브토큰]

 

 

이제 깃허브 리퍼지토리를 생성해 패키지(빌드된 결과물)를 push 해주자.

끝으로

 

아래의 퍼블리시 명령을 실행한다.

cd ./packages/api/lib && npm publish

 

성공을 하면 깃허브 리퍼지토리 우측 package에 표시된다.

버전 관리도 가능~!

 

 

---

 

3. 사용

 

이제 프론트에서 sdk를 사용해보자.

 

루트에 .npmrc 파일을 생성하자.

백엔드에서 생성한 내용과 같다.

 

package.json에 dependencies 항목을 추가해주자.

 

패키지 매니저를 통해 설치를 한다.

npm install
yarn
pnpm install

 

만약 yarn 사용자라면, 패키지를 찾지 못해 실패 할 수 있다.

그런 경우 .yarnrc.yml을 수정해주자.

...
npmScopes:
  "[깃허브계정명]":
    npmAlwaysAuth: true
    npmAuthToken: [깃허브토큰]
    npmRegistryServer: "https://npm.pkg.github.com"

 

 

사용법은 간단하다.

기본 예시 코드

import { nestiaTest } from './dist/api/functional/nestia';

(async function () {
  const response = await nestiaTest({ host: 'http://127.0.0.1:3000' }, 1);
})();

 

사용 예시 코드

import { getTestList } from '@*********/********-apis/api/functional/test/list/index';
const token = localStorage.getItem("access_token");



export const getList = async (param1: number, param2: number): Promise<getTestList.Output> => {
	const res = await getTestList({ host: import.meta.env.VITE_BASE_URL, headers: { Authorization: `Bearer ${token}` } }, param1, param2);
	return res;
};

 

대박인게, 함수를 호출하듯이 사용 할 수 있고, 프론트에서 타입을 또한번 정의 할 필요가 없다.