[FE] API명세 의존성 낮추기 (OpenAPI Generator)

API에서 Swagger가 적용이 되었다면,
위와 같이 바뀐 명세 확인을 위해 매번 swagger-ui를 들어가서 확인하는 번거로움이 있었다.

해당 의존성을 털어내고자 code generator를 적용하게 되었다.( Loosely coupling 정말 좋아합니다 )

적용기

1. 일단 설치

npm install @openapitools/openapi-generator-cli -g

※node 18버전 이상 가능
(nvm 이용해서 로컬에서 node 버전 여러개 보유 가능합니다.)

※Swagger Specification 사용시

npm install swagger-codegen -g

과 같은 다른 라이브러리 설치하여야합니다.

2. package.json 스크립트 설정

  "generate": "openapi-generator-cli generate -g typescript-axios -i https://test-api.com/api-docs -o ./src/api/apidocs -t src/api/apidocs/mustaches -c ./openapi.json --skip-validate-spec",

3. openapi.json 파일 생성

{
  "spaces": 2,
  "modelPackage": "src/model",
  "apiPackage": "src/api",
  "supportsES6": true,
  "withNodeImports": false,
  "useSingleRequestParameter": true,
  "enumNameSuffix": "",
  "withSeparateModelsAndApi": true
}

4. npm run generate

npm run generate

그러면 제가 설정한 src/api/apidocs 아래 생성된 파일들을 확인 할 수 있습니다.
아래는 생성된 예제 파일입니다.

5. 예제 파일 확인

/* tslint:disable */
/* eslint-disable */
/**
 * TEST- API
 * TEST API 문서입니다.
 *
 * The version of the OpenAPI document: 1.0
 * 
 *
 * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
 * https://openapi-generator.tech
 * Do not edit the class manually.
 */


// May contain unused imports in some cases
// @ts-ignore
import type { testResponse } from './test-response';

/**
 * 
 * @export
 * @interface testResponse
 */
export interface TestResponse {
    /**
     * 방패크기
     * @type {string}
     * @memberof TestResponse
     */
    'shieldSize'?: string;
    /**
     * 방패종류
     * @type {string}
     * @memberof TestResponse
     */
    'shieldType'?: string;
    /**
     * 방패생산일
     * @type {LocalDateTime}
     * @memberof TestResponse
     */
    'date'?: LocalDateTime;
    /**
     * 방패색깔
     * @type {string}
     * @memberof TestResponse
     */
    'color'?: string;...

결과

1. TypeScript를 쓰는 환경이라면 바로 Import해서 사용하면 되고 명세가 바뀔때마다 일일히
   swagger-ui에 들어가 확인할 필요가없어집니다.

2. 해당 변수가 없거나 타입이 맞지 않다면 IDE에서 에러를 표시하기에 고생이 줄었습니다.