[Swagger] Swagger UI를 활용한 내부 API Client 구축

-  개요

안녕하세요. 이번 글에서는 Swagger UI를 활용한 API 문서화 및 Client 서버 구축에 대해서 알아보겠습니다.

 

일단 Swagger라는 기술은 API를 설계하고 문서화를 해주는데 도움을 주는 기술입니다. 이해가 안 가고 머릿속에 그려지지 않으실 거예요.

 

저도 처음에는 무슨 소리인 건지 하는 생각이 들었었어요. 하지만 UI를 확인해보면 우리가 생각했던 RESTful API 설계하고 문서화를 할 수 있는 기술이라는 걸 알 수 있었어요. :)

 

이 글에서는 Swagger UI를 구축하고 yaml 파일을 작성해서 RESTful API를 만들어 보겠습니다.

 

- 구축

공식 홈페이지 : swagger.io/tools/swagger-ui/

REST API Documentation Tool | Swagger UI

Live Demo 선택

공식 홈페이지로 접속을 하면 위 이미지와 같은 UI와 설명 글이 보이실 겁니다.

 

Live Demo를 통해 우리가 어떤 UI를 사용할 수 있는지 알 수 있습니다.

 

공식 GitHub 저장소 : github.com/swagger-api/swagger-ui

swagger-api/swagger-ui

해당 주소로 접속해 소스코드를 다운로드 받았습니다.

 

파일 Download 

저는 git 명령어를 활용해서 프로젝트를 다운로드하였습니다.

 

다운로드 명령어 : git clone https://github.com/swagger-api/swagger-ui.git

 

다운로드를 다 하면 실제 우리가 사용할 파일은 dist 폴더입니다. (dist 폴더를 원하는 곳으로 이동시켜 줍니다)

 

그리고 나머지 폴더를 삭제합니다.

 

PC에 Node.JS가 설치가 되어있다면 http-server 모듈을 설치합니다. (실행방법 : npm http-server --cors)

 

만약 서버에 대해서 잘 모르시는 분들은 dist 폴더 안에 index.html 파일을 더블클릭해서 실행시켜줍니다.

 

실행 화면

브라우저에 위와 같은 실행된 화면을 볼 수 있습니다.

 

이번 시간에는 Swagger UI를 구축하는 시간을 가져봤습니다.

 

다음 시간에는 직접 RESTful API를 문서를 작성하도록 하겠습니다.