<div id="readability-page-1" class="page"><div id="entry-view">
            
            <main>
                <div>
                        <article id="mainContent">
                            <div>
                                <p><a href="/m/category/BACKEND"><span>BACKEND</span></a></p><h3>nestjs swagger가 아니라 redoc 적용하기</h3>
                            </div>
                            <p><cite>나를찾는아이</cite>
                                <span> 2024. 3. 11. 18:33</span>
                            </p>
                            
                    
        

        

            <div><p data-ke-size="size16"><a href="https://petstore.swagger.io/?_gl=1*fmwoqb*_gcl_au*MTIzOTU0MTYzMi4xNzA5ODg2NDk4&amp;_ga=2.262938187.671560328.1709886498-515535871.1709886497" target="_blank" rel="noopener">swagger live demo</a></p>
<p data-ke-size="size16"><a href="https://redocly.github.io/redoc/" target="_blank" rel="noopener">redoc live demo</a></p>

<p data-ke-size="size16">우리가 많이 사용하고 있는 openapi를 볼수 있는 UI 툴은 잘 알려진 swagger가 있지만,</p>

<p data-ke-size="size16">그의 대체제인 <a href="https://github.com/Redocly/redoc" target="_blank" rel="noopener">redoc</a>도 있다는것 아셨나요?</p>


<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2024-03-08 오후 5.29.56.png" data-origin-width="2814" data-origin-height="1478"><span data-url="https://blog.kakaocdn.net/dn/cwDy3j/btsFFRBJqWy/0ssOzZZTYV1i9CidRpO11K/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/cwDy3j/btsFFRBJqWy/0ssOzZZTYV1i9CidRpO11K/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2024-03-08 오후 5.29.56.png" data-origin-width="2814" data-origin-height="1478"></span></figure>


<p data-ke-size="size16">이것은 swagger UI 이고</p>



<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2024-03-08 오후 5.30.28.png" data-origin-width="2728" data-origin-height="1684"><span data-url="https://blog.kakaocdn.net/dn/XyLYF/btsFC3pWx7D/b6eNzeQ3BLTrpWUvtGW7sk/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/XyLYF/btsFC3pWx7D/b6eNzeQ3BLTrpWUvtGW7sk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2024-03-08 오후 5.30.28.png" data-origin-width="2728" data-origin-height="1684"></span></figure>


<p data-ke-size="size16">이것이 redoc UI 입니다</p>

<p data-ke-size="size16">redoc은 3개의 컬럼 기반으로 좌측에 path, 가운데 params, 우측에 example이 보여지는 형태의 구성입니다</p>


<p data-ke-size="size16">사람마다 swagger, redoc 호불호가 있겠습니다</p>


<p data-ke-size="size16">nestjs 프로젝트에서 redoc을 적용하는것도 어렵지 않습니다</p>

<p data-ke-size="size16"><a href="https://www.npmjs.com/package/@jozefazz/nestjs-redoc" target="_blank" rel="noopener&nbsp;noreferrer">https://www.npmjs.com/package/@jozefazz/nestjs-redoc</a></p>
<figure id="og_1709886767205" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="@jozefazz/nestjs-redoc" data-og-description="NestJS ReDoc (Swagger UI Alternative). Latest version: 1.0.7, last published: 2 months ago. Start using @jozefazz/nestjs-redoc in your project by running `npm i @jozefazz/nestjs-redoc`. There are no other projects in the npm registry using @jozefazz/nestjs" data-og-host="www.npmjs.com" data-og-source-url="https://www.npmjs.com/package/@jozefazz/nestjs-redoc" data-og-url="https://www.npmjs.com/package/@jozefazz/nestjs-redoc" data-og-image="https://scrap.kakaocdn.net/dn/bRs7UX/hyVxvbqvys/wViOC9UINZRQGnvrXool0k/img.png?width=1200&amp;height=630&amp;face=0_0_1200_630"><a href="https://www.npmjs.com/package/@jozefazz/nestjs-redoc" target="_blank" rel="noopener" data-source-url="https://www.npmjs.com/package/@jozefazz/nestjs-redoc">

<div>
<p data-ke-size="size16">@jozefazz/nestjs-redoc</p>
<p data-ke-size="size16">NestJS ReDoc (Swagger UI Alternative). Latest version: 1.0.7, last published: 2 months ago. Start using @jozefazz/nestjs-redoc in your project by running `npm i @jozefazz/nestjs-redoc`. There are no other projects in the npm registry using @jozefazz/nestjs</p>
<p data-ke-size="size16">www.npmjs.com</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/bRs7UX/hyVxvbqvys/wViOC9UINZRQGnvrXool0k/img.png?width=1200&amp;height=630&amp;face=0_0_1200_630"></figure>
<pre id="code_1709886749852" data-ke-language="typescript" data-ke-type="codeblock"><code>    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,
    });</code></pre>

<p data-ke-size="size16">해당 npm 패키지를 설정하고 Redoc을 setup 해주면 끝!</p></div>
                    
        

        



<ins data-ad-client="ca-pub-9527582522912841" data-ad-slot="3250933968" data-ad-format="auto" data-full-width-responsive="true" data-ad-type="inventory" data-ad-adfit-unit="DAN-VHBugUKpJ1qm98uW"></ins>




                            
                        </article>
                        
                            
                        
                        
                        
                        
                        
                            
                        

                        
                        

                        
                    </div>
            </main>
        </div></div>

나를 찾는 아이

Kyoung min, Kim

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
    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 해주면 끝!

nestjs swagger가 아니라 redoc 적용하기

댓글