[Spring] 회원가입 구현하기

로그인부터 하려고 했으나, Access Token Refresh Token 방식으로 구현하는 것이 막막하게 느껴져서 

일단 순한맛 회원가입 먼저 해보려고 한다.

 

DB

일단 USERS 테이블을 만든다.

create table USERS 
(
    user_id varchar(30) not null primary key,
    pw char(40) not null,
    name varchar(10) not null,
    email varchar(30) not null,
    profile varchar(50)
);

Spring

UserDto.java

package com.hyomin.memomeet.model;

public class UserDto {
	private String user_id;
	private String pw;
	private String name;
	private String email;
	private String profile;
	
	public UserDto() {}
	
	public UserDto(String user_id, String pw, String name, String email, String profile) {
		super();
		this.user_id = user_id;
		this.pw = pw;
		this.name = name;
		this.email = email;
		this.profile = profile;
	}

	public String getUser_id() {
		return user_id;
	}

	public void setUser_id(String user_id) {
		this.user_id = user_id;
	}

	public String getPw() {
		return pw;
	}

	public void setPw(String pw) {
		this.pw = pw;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

	public String getProfile() {
		return profile;
	}

	public void setProfile(String profile) {
		this.profile = profile;
	}

	@Override
	public String toString() {
		StringBuilder builder = new StringBuilder();
		builder.append("UserDto [user_id=");
		builder.append(user_id);
		builder.append(", pw=");
		builder.append(pw);
		builder.append(", name=");
		builder.append(name);
		builder.append(", email=");
		builder.append(email);
		builder.append(", profile=");
		builder.append(profile);
		builder.append("]");
		return builder.toString();
	}
	
}

 

UserController.java

@RestController
@RequestMapping("/users")
public class UserController {
	
	@Autowired
	private UserService userService;
	
	@PostMapping
	public Message SignUp (@RequestBody UserDto user){
		System.out.println(user.toString());
		
		Message message = new Message();
		
		try {
			userService.insert(user);
		} catch (SQLException e) {
			e.printStackTrace();
			message.setCode(e.getErrorCode());
			message.setMessage(e.getMessage());
			return message;
		}
		
		message.setCode(0);
		message.setMessage("request success");
		message.setData(user);
		
		return message;
	}
}

- Message 클래스를 따로 만들어서 code, message, data를 한번에 보내도록 했다

- Controller -> Service -> Dao 로 전이되며 요청을 처리하게 되고

- Controller에서 에러를 처리한다

 

React

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

var raw = JSON.stringify({ "user_id": user_id, "pw": user_pw, "name": user_name, "email": user_email });

var requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: raw,
    redirect: 'follow'
};

fetch("/users", requestOptions)
    .then(response => response.json())
    .then(result => {
        console.log(result); 
        console.log(result.data);
        if(result.code===0){
            alert("회원가입 성공");
            window.location.href = "/";
       	}
        else if(result.code===1062){
        	alert("이미 존재하는 아이디입니다.")
    	}
    })
	.catch(error => console.log('error', error));

- POST 요청

- Request parameter는 UserDto의 필드명과 동이랗게 수정하였다

- sql 에러코드를 그대로 반환하게 코드를 작성해서, sql 에러코드로 에러처리

 

결과

성공했을 때

실패했을 때

 

 

사실 중간 과정에서 에러도 많이 나고 우여곡절이 많았는데

이 과정들을 블로그에 다 담고 싶었으나, 다음날까지 미뤄지는 바람에 작성하지 못했다.

다음 과정들은 더욱 세세히 과정을 담을 수 있도록 하겠다!