React + Spring Boot + MySQL (8)

HTTP 프로토콜을 이용하여 회원가입 API를 구축해보자

회원가입 API

• Method : POST
• Request URL : /api/auth/signup
• body :
  userEmail
  userPassword
  userPasswordCheck
  userNickname
  userPhoneNumber
  userAddress
  userAddressDetail
  

---

View 레이어와 Controller 레이어 사이에 데이터를 전송할 때는
DTO(Data Transfer Object)를 이용하여 데이터를 보내줄 것이다

---

Dto 라는 이름의 패키지 하나 만들고 SignupDto 클래스를 만들어준다

package com.hyeonjoonpark.board_crud.Dto;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class SignupDto {

}

Entity와 같이 @Data @AllArgsConstructor @NoArgsConstructor 어노테이션을 추가해준다

---

DTO 작성

package com.hyeonjoonpark.board_crud.Dto;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class SignupDto {
    private String userEmail;
    private String userPassword;
    private String userPasswordCheck;
    private String userNickname;
    private String userPhoneNumber;
    private String userAddress;
    private String userAddressDetail;
}

DTO를 작성해준다

---

ResponseDto (응답을 위한 Dto)

package com.hyeonjoonpark.board_crud.Dto;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class ResponseDto {
    
}

Dto 패키지 아래에 ResponseDto 클래스 파일을 생성하고 다음과 같이 작성해준다

@NoArgsConstructor는 굳이 없어도 된다

ResponseDto는
result : True / False
message : 성공 및 실패 여부를 나타내는 메세지
data : token, exprTime

• exprTime : 토큰 만료시간

을 반환해주는데 data의 타입이 불분명하기 때문에 Generic 문법으로 작성해주겠다

package com.hyeonjoonpark.board_crud.Dto;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import javax.xml.stream.events.StartDocument;

@Data
@AllArgsConstructor(staticName = "set")
public class ResponseDto<D> {
    private boolean result;
    private String message;
    private D data;
    
    public static <D> ResponseDto<D> setSuccess(String message, D data) {
        return ResponseDto.set(true, message, data);
    }
    
    public static <D> ResponseDto<D> setFailed(String message, D data) {
        return ResponseDto.set(false, message, null);
    }
}

bool형의 result
String형의 message
Generic 타입의 data를 선언해주고

회원가입에 성공했을 때 실행되는 로직인 setSuccess 메소드와 실패했을 때 실행되는 로직인 setFailed를 작성해준다

@AllArgsConstructor 어노테이션에 네이밍을 적용시켜놨기 때문에

성공했을 때는
result: true, message, data를 반환하고

실패했을 때는
result: false, message, null을 반환한다

메소드의 매개변수가 Generic 타입일 때는

생성자 앞에도 Generic 자료형을 적어줘야 한다

---

token, exprTime

Dto 패키지 밑에 SignupResponseDto 클래스 파일을 만든다

package com.hyeonjoonpark.board_crud.Dto;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class SignupResponseDto {
    private String token;
    private int exprTime;
}

exprTime은 token의 유효시간을 나타낸다

---

Auth Controller

package com.hyeonjoonpark.board_crud.Controller;

import com.hyeonjoonpark.board_crud.Dto.ResponseDto;
import com.hyeonjoonpark.board_crud.Dto.SignupDto;
import com.hyeonjoonpark.board_crud.Dto.SignupResponseDto;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api/auth")
public class AuthController {
    @PostMapping("/signUp")
    public ResponseDto<SignupResponseDto> signUp(@RequestBody SignupDto requestBody) {
    	System.out.println(requestBody.toString());
        return null;
    }
}

@RestController로 지정해주고
@RequestMapping의 경로를 /api/auth로 설정해준다

• Post요청을 /signup 경로로 요청을 할 때 signUp() 메소드가 실행되도록 하는데
  이 signUp() 메소드의 반환 타입은
  ResponseDto 이다

Postman으로 테스트를 해보자

콘솔에 우리가 작성한 Request가 잘 출력되는 것을 알 수 있다

---

다음 블로그에서는 React에서 Request를 보내보도록 하겠다