Swagger UI에서 요청 바디(Request Body)를 입력하고 실행하는 방법은 다음과 같습니다:

  1. Swagger UI 페이지에서 원하는 API 엔드포인트와 요청 메소드를 선택합니다.
  2. 해당 엔드포인트의 "Request Body" 섹션을 찾습니다. 이 섹션은 대개 "Parameters" 또는 "Request Payload" 등의 이름으로 표시됩니다.
  3. 요청 바디의 스키마(Schema)를 확인하고 필요한 필드와 값에 대한 정보를 파악합니다.
  4. 요청 바디 입력란을 찾아 값을 입력합니다. 일반적으로 JSON 형식으로 데이터를 입력하며, 필요한 필드와 값을 적절히 설정해야 합니다.
  5. 입력이 완료되면 "Execute" 또는 "Try it out" 버튼을 클릭하여 API 호출을 실행합니다.
  6. 실행 결과가 나타나며, 응답 코드(HTTP 상태 코드), 응답 본문(JSON 형식) 및 기타 응답 정보가 제공됩니다.

따라서, Swagger UI에서 Request Body 입력란을 사용하여 원하는 데이터를 제공하고, 실행 버튼을 클릭하여 API 호출을 수행할 수 있습니다. 이렇게 하면 해당 API의 유효성 검사 테스트가 진행됩니다.

 

음.. 그래 UI 맘에 들고, 다 좋은데, 막상 실행해보면,

{"statusCode":404,"message":"Cannot GET /api","error":"Not Found"} 왤까?

 

주어진 오류 메시지인 "Cannot GET /api"는 요청한 엔드포인트가 존재하지 않음을 나타냅니다. 이는 Nest.js 애플리케이션에서 해당 경로에 대한 라우트가 정의되지 않았거나, 잘못된 경로를 요청했을 가능성이 있습니다.

해결하기 위해 다음 단계를 따를 수 있습니다:

  1. 라우트 확인: Nest.js 애플리케이션에서 /api 경로에 대한 적절한 라우트가 정의되어 있는지 확인하세요. main.ts 또는 해당 프로젝트의 라우팅 파일에서 /api 경로에 대한 핸들러 함수나 컨트롤러 메서드를 찾아보세요.
  2. 올바른 경로 사용: 요청하는 엔드포인트의 경로가 올바른지 확인하세요. Nest.js 애플리케이션에서 /api 외부에 다른 접두사나 다른 경로 구조를 사용하는 경우, 그에 맞게 요청을 수정해야 합니다.
  3. HTTP 메서드 확인: API 테스트 도구(Swagger, Postman 등)를 사용하여 정확한 HTTP 메서드(GET, POST 등)와 함께 /api 엔드포인트에 요청을 보내세요.
  4. 서버 실행 상태 확인: Nest.js 서버가 실행 중인지 확인하세요. 포트 충돌 문제 없이 서버가 제대로 실행되고 있는지 확인하고, 필요하다면 서버를 재시작하세요.테스트 결과가 제대로 작동하지 않고 잘못된 형식에 대한 반응이 오지 않는다면 몇 가지 가능한 원인과 해결 방법을 살펴볼 수 있습니다.

위 절차를 따라서, 어찌저찌 고치긴 했다... 그런데 이번엔 API 호출이 말썽이다 ㅡㅡ;;

테스트 결과가 제대로 작동하지 않고 잘못된 형식에 대한 반응이 오지 않는다면 몇 가지 가능한 원인과 해결 방법을 살펴볼 수 있습니다:

  1. 요청 바디 형식 확인: 먼저, 요청 바디의 형식과 필드를 정확하게 확인해야 합니다. Swagger UI에서 제공하는 스키마(Schema)를 기반으로 요청 바디를 구성해야 합니다. 필수 필드, 데이터 타입, 유효성 검사 규칙 등을 올바르게 설정해야 합니다.
  2. 오류 메시지 확인: 잘못된 형식의 요청을 보냈을 때 Swagger UI에서 오류 메시지나 경고 사항이 표시되어야 합니다. 이를 통해 어떤 부분이 잘못되었는지 파악할 수 있습니다. 따라서 실행 결과에 오류 메시지가 표시되는지 확인하고 해당 내용을 분석합니다.
  3. 서버 로그 확인: 만약 Swagger UI에서는 문제가 없어 보이는데도 API 호출 결과가 예상과 다르다면, 서버 측 로그를 확인해야 할 수도 있습니다. 서버 로그에서 API 호출 시 발생하는 에러나 예외 정보를 찾아보고 문제 해결에 도움을 받을 수 있습니다.
  4. 다른 도구 사용: Swagger UI 외에도 다른 API 테스트 도구(예: Postman)를 사용하여 같은 요청을 보내보세요. 이렇게 함으로써 Swagger UI 자체의 문제인지 아니면 API 구현 자체의 문제인지 판단할 수 있습니다.
  5. 엔드포인트 및 버전 호환성 확인: API의 엔드포인트와 버전 호환성도 주의해야 합니다. Swagger 스펙 파일 또는 URL이 정확한 버전 및 엔드포인트 정보와 일치하는지 다시 한번 확인하세요.
  6. 라우팅 설정 확인: NestJS의 라우팅 설정을 확인하여 /users/validate-email 경로가 올바르게 매핑되어 있는지 확인하세요. UserController 클래스에 @Controller('users') 데코레이터가 지정되어 있으므로, /users/validate-email 경로에 대한 GET 요청을 처리할 수 있어야 합니다.
  7. validateEmail() 메서드 확인: validateEmail() 메서드는 주어진 이메일을 검증하고 유효성 여부를 반환하는 역할을 합니다. 이 메서드 내에서 필요한 로직(이메일 형식 검사, 중복 이메일 검사 등)이 정확하게 구현되었는지 다시 한번 확인해 보세요.
  8. 응답 반환: validateEmail() 메서드에서 유효성 여부에 따라 적절한 응답 값을 반환해야 합니다. 현재 코드에서는 Promise<boolean> 타입으로 유효성 여부를 반환하고 있습니다. 그러나 클라이언트에게 실제 응답을 보내기 위해서는 해당 boolean 값을 HTTP 응답으로 변환하여 전송해야 합니다.
  9. Swagger 문서화: Swagger 문서화와 관련된 부분도 점검해 보세요. @Get('validate-email') 엔드포인트에 대한 Swagger 데코레이터(@ApiTags, @ApiResponse, 등)가 올바르게 설정되었는지 다시 한번 확인합니다.

무슨 확인해야 할 게 이렇게 많은지..;;

얘는 아무래도 코드 문제인것같아서 코드를 다시한번 살펴보았다.

@Get('validate-email')
async validateEmail(@Query('email') email: string): Promise<boolean> {
const isValidFormat = this.emailService.validateEmailFormat(email);
if (!isValidFormat) {
return false;

내가 테스트하려는 API 엔드포인트는 바로 이것. 이메일 유효성 검사를 GET으로 요청하였다.

NestJS를 사용한 UserController 클래스입니다. 
이 컨트롤러는 사용자 관련 API 엔드포인트를 정의하고 있습니다. 
각 엔드포인트에는 Swagger 데코레이터가 사용되어 API 문서화가 이루어지고 있습니다.

여기서 몇 가지 주요 포인트를 설명해 드리겠습니다:

@ApiTags('users'): Swagger 문서에서 해당 컨트롤러에 대한 태그를 지정합니다. 
여기서는 'users'라는 태그로 분류됩니다.
@Post('signup'), @Post('profile-image'), @Get('validate-email'): 
각각 회원 가입, 프로필 이미지 업로드, 이메일 유효성 검사와 관련된 API 엔드포인트입니다.
@ApiResponse({ type: SignupResponse }): 회원 가입 API의 응답 스키마로 SignupResponse 
클래스를 사용한다는 것을 나타냅니다.
async signup(@Body() body: SignUpRequest): 
회원 가입 API에서 요청 바디의 형식으로 SignUpRequest 클래스를 사용하고 있습니다.
async uploadProfileImage(@CtxUser() user: UserContext, @UploadedFile() image: Express.Multer.File): 
프로필 이미지 업로드 API에서 CtxUser 데코레이터를 사용하여 인증된 사용자 정보(UserContext)를 가져오고, 
UploadedFile 데코레이터를 통해 업로드된 파일(image)을 받아옵니다.
async validateEmail(@Query('email') email: string): Promise<boolean>: 
이메일 유효성 검사 API에서 쿼리스트링으로 전달받은 이메일 값을 검증하고 결과(boolean)를 반환합니다.
위 코드에서는 Swagger 데코레이터와 NestJS의 기능들을 활용하여 API 문서화 및 요청 처리 로직을 
구현하고 있습니다.

삽질기 시즌 2는 계속된다...

+ Recent posts