프로젝트 꾸미기 : 일명 프꾸

Swagger & GitHub READ.me

코드를 잘 짜는것도 중요하지만 완료한 프로젝트를 잘 포장하는 것도 중요합니다.
다른 사람이 우리의 작업물을 봤을 때 한눈에 알아볼 수 있게 요약본과 시각적인 요소들을 담아주면 포트폴리오로 쓰기도 좋고 배포를 했을 때 많은 유저들이 사용할 때 보기 좋겠죠!

오늘은 Swagger와 GitHub로 업로드한 프로젝트를 소개하는 READ.me를 작성하는 방법을 소개해보겠습니다!

1) GitHub의 READ.me 이용하여 프로젝트 소개하기

• #[] : 가장 큰 제목, 굵은 글씨로 강조

• ##, ###, #### : 샵이 많이 붙을수록 점점 작은 글씨가된다.

• 프로젝트에 사용된 프레임워크 및 도구들 아이콘 넣기
  → 
  → (http://이미지 url+style=for-the-badge&logo=도구정식명칭&logoColor=white)
  → 도구 정식 명칭은 아래 첫 번째 url에서 #으로 시작하는 걸 가져와서 붙여넣으면 된다.
  

  로고 컬러는 보통 white를 많이쓴다.
  → 나는 도구 이미지 url을 아래 첫 번째 링크에서 참조했다.
  두 번째 링크로도 많이 활용하는 듯 하다.

https://simpleicons.org/
https://shields.io/

적용 예시!

![Javascript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=JavaScript&logoColor=white)

2) Swagger로 API문서 자동화하기
내가 작성한 API가 작동이 되었다면
1 - 프론트엔드와 협업
2 - API명세서와 어느정도 달라졌는지 확인
3 - 전체적으로 백엔드가 어떻게 작성되었는지 확인하고 싶을 때
를 위해 Swagger 를 사용한다.

사용방법

a. 설치
npm install --save @nestjs/swagger
b. 모듈 불러오기 : main.ts에 넣기

import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';

const app = 밑에 넣기

const config = new DocumentBuilder()
    .setTitle('Cats example')
    .setDescription('The cats API description')
    .setVersion('1.0')
    .addTag('cats')
    .build();
  const document = SwaggerModule.createDocument(app, config);
SwaggerModule.setup('api', app, document);

c. npm run start로 실행
d. 주소에서 확인 : localhost:3000/api
e. 세부사항 변경

.setTitle('프로젝트 이름')
    .setDescription('프로젝트 설명')
    .setVersion('현재 버전')
    .addTag('태그')
    .build();

결과물

엥? 난 그냥 코드 몇 줄만 갖다 붙였을 뿐인데 이게 다 된다고?
실화입니다 ^-^