[강의 정리] Node.js웹 서버에 Swagger UI 입혀보기 by 동빈나

* Reference Video: https://www.youtube.com/watch?v=FYS7Zt2LPis

https://github.com/swagger-api/swagger-ui에 접속해서 다운로드

(01:26)

다운로드 받은 파일 압축 풀고 그 중 dist 폴더를 public 옮김 --> 누구든지 웹서버에 접속해서 문서 확인할 수 있도록

(optional) 폴더명 docs로 변경

(01:42)

명세서 웹 문서

swagger.yaml 파일 생성

https://swagger.io/specification/에서 Required 요소를 포함해서 작성. 필요에 따라 추가 정의 가능'1tide

(05:16)

(05:25)

---

app.use(express.static('public')); 코드가 들어간 js 파일을 nodej로 열면 (지난 강의에서 사용한 파일 사용)

이렇게 지정한 포트에서 test.html로 접근 가능(public 폴더에 있는)

(02:33)

다음은 docs 폴더 안에 있는 index.html에서 템플릿 안에서 보여주는 url을 수정해야하는데 현재 내가 다운로드 받은 파일엔 해당 값이 없었다. 검색해보니 js 파일들에 있어서 찾아 바꾸기 신공 발휘

이 때 실수하지 않도록

https 대신 http 사용하지 않기 (인증서 없음)

http://localhost:3000/swagger.yaml 경로로 바꾸기!

swagger.yaml 는 우리가 지정한 문서 명세

우리가 이렇게 지정한 파일을 public에 두었기 때문에 접근 가능

docs 폴더에서 보이는 파일 (index.html)에서 바라보고 있는 .js 파일에 정의된 url을 우리가 정의한 스펙으로 바꿈 --> 해당 스킨에 스펙 적용 가능

swagger.yaml에 다음과 같이 정의하니 짜잔!

openapi: 3.0.0
info:
  swagger : "2.0"
  version: '1.0.0'
  title: 'My API'
  description: 'My API'
servers:
  - description: 'My API'
    url: http://localhost:3000/
paths:
  /adder:
    get:
      summary: Adder API
      parameters:
        - name: one
          in: query
          description: First Value
          required: true
          schema:
            type: integer
        - name: two
          in: query
          description: Second Value
          required: true
          schema:
            type: integer
    response:
      '200':
          description: Added Result
          schema:
            type: integer

주의: get, response의 들여쓰기 일치해야함. 그렇지 않으면

이젠 요청은 되는데 응답이 안내려오네? 원래대로라면 이렇게 200 요청이 와야하는데

(08:26)

수정한 사항이 제대로 반영안되면?

웹 문서 캐시되기 때문. 개발자모드 Network에서 캐시를 삭제해보았다. 그래도 동일한 현상 발생

Network탭 >Response 보면 응답을 정상적으로 내려와서 패스. 여기까지 마무리

어쨌든 API 명세에 Swagger 스킨을 적용하는 방법을 알아보고 실습까지 해보았다. Swagger spec. 문서만 보다가 직접 적용해보니 너무 재밌고 신기하네.