- 개요
안녕하세요. 이번 글에서는 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
swagger.io
공식 홈페이지로 접속을 하면 위 이미지와 같은 UI와 설명 글이 보이실 겁니다.
Live Demo를 통해 우리가 어떤 UI를 사용할 수 있는지 알 수 있습니다.
공식 GitHub 저장소 : github.com/swagger-api/swagger-ui
swagger-api/swagger-ui
Swagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API. - swagger-api/swagger-ui
github.com
해당 주소로 접속해 소스코드를 다운로드 받았습니다.
저는 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를 문서를 작성하도록 하겠습니다.
'백앤드(Back-End) > Swagger' 카테고리의 다른 글
| [Swagger] Node.js Swagger API 문서화 (0) | 2021.10.04 |
|---|---|
| [Swagger] Swagger Yaml 파일 RESTFul API 클라이언트 구축 (0) | 2021.01.28 |
| [Swagger] Swagger Yaml 기본 파일 작성 (0) | 2021.01.12 |