Library] swagger-ui-react

프로젝트 진행 중에 BE 담당자가 swagger를 서버에 올려주지 않고, yaml 파일로 전달 줘서 불편함을 겪고 있었습니다.

swagger홈페이지 열어서 yaml파일을 import해도 되지만,

따로 페이지를 작성하여 보고자하는 목적에 해당 라이브러리를 사용하게 됐습니다.

 

https://www.npmjs.com/package/@types/swagger-ui-react

 

 

---

 

 

설치

npm i @types/swagger-ui-react

홈페이지 나와있는대로 npm 설치

 

 

---

 

 

사용법

import SwaggerUI from 'swagger-ui-react';
import 'swagger-ui-react/swagger-ui.css';

export default function Swagger() {
  const url = '폴더 경로';

  return <SwaggerUI url={url} />;
}

 

매우 간단합니다. BE개발자로부터 전달받은 yaml파일을 프로젝트 내에 경로(public 내)에 저장해 놓고 경로 지정해 주시면 됩니다.

 

해당 경로로 이동하면 swagger 화면이 그려진 것을 확인할 수 있습니다.

 

 

---

 

 

 

 

yaml파일로 전달 받는건 데이터가 정적이어서 많이 불편한 것 같습니다.
데이터 형태만 확인한다고해도 무언가 마음에 들지는 않네요...