nestjs swagger가 아니라 redoc 적용하기

swagger live demo

redoc live demo

 

우리가 많이 사용하고 있는 openapi를 볼수 있는 UI 툴은 잘 알려진 swagger가 있지만,

 

그의 대체제인 redoc도 있다는것 아셨나요?

 

 

 

이것은 swagger UI 이고

 

 

 

 

이것이 redoc UI 입니다

 

redoc은 3개의 컬럼 기반으로 좌측에 path, 가운데 params, 우측에 example이 보여지는 형태의 구성입니다

 

 

사람마다 swagger, redoc 호불호가 있겠습니다

 

 

nestjs 프로젝트에서 redoc을 적용하는것도 어렵지 않습니다

 

https://www.npmjs.com/package/@jozefazz/nestjs-redoc

@jozefazz/nestjs-redoc

    const config = new DocumentBuilder()
      .setTitle('타이틀')
      .setDescription('설명')
      .setVersion('1.0')
      .addBearerAuth()
      .build();
    const document = SwaggerModule.createDocument(app, config, {
    });
    await RedocModule.setup('api-docs-redoc', app, document, {
      sortPropsAlphabetically: false,
    });

 

해당 npm 패키지를 설정하고 Redoc을 setup 해주면 끝!