Spring Boot(회원가입을 위한 기초 세팅)

Spring Boot에는 src/main/resources 파일 내부에 Static 폴더가 존재하고 이 폴더는 보통 Content를 두곤합니다.

보통 CSS/JS 파일을 위치하게 하고 /static을 통해서 웹에서 바로 접근이 가능합니다.

회원가입 버튼을 눌렀을 때 AJAX로 username, password, email의 value 값들이 이동하게 만들고 회원가입이 성공적으로 이뤄질 수 있게 /static 폴더 내부에 간단한 JS파일 작업을 시작합니다.

#1

/static/js/user.js

회원가입 버튼(#btn-save)가 눌리면 작동하는 save function()을 만들고 username, password, email의 데이터를 

Post 방식으로 전송한다.

let index{
	init: function(){
    	$("#btn-save").on("click",=>(){
        	this.save()        
        });    
    },
    
    
    save: function(){
    	let data = {
                username = {"#username"}.val(),
                password = {"#password"}.val(),
                email = {"#email"}.val()
    }
    
    $.AJAX({
    	type: "POST",
        url: "/blog/api/user",
        data: JSON.stringify(data),
        contentType: "application/json; charset = UTF-8",
        dataType: "json"
    }).done(function(data){
    	alert("회원가입이 완료되었습니다");
        location.href=("/blog");
    }).fail(function(error){
    	alert(JSON.stringify(error));
    });
}
index.init();

 

#2

blog/Controller/api/UserControlller

컨트롤러를 작업하기 이전에 트랜잭션을 관리하기 위한 Service 폴더를 작업을 해야된다.

Service를 만드는 이유는 1. 트랜잭션을 관리하기 위함이고 2. 서비스의 의미 때문이다.

트랜잭션과 관련된 세부 내용은 다음 포스팅에 적도록 하겠다.(다룰게 많기 때문)

// 스프링이 컴포넌트 스캔을 통해서 Bean에 자동적으로 등록을 해준다(IOC)
@Service
public class UserService{
	@AutoWired
    private UserRepository userrepository;
    
    @Transactional
    public void 회원가입(User user){
    	userrepository.save(user);
    }

}

 

#3

blog/api/UserApiController

AJAX로 보낸 데이터를 핸들링할 수 있는 컨트롤러를 작성하도록 하겠다. 데이터를 리턴할 예정이니, @RestController 사용, AJAX로 POST로 보냈기 때문에 @PostMapping 사용, username, password, email은 value()로 받았기 때문에 처리 가능하지만 Role은 컨트롤러에서 따로 Set 해주기, 정도 신경쓰면 될 것 같다.

@RestController
public class UserApiController(){
	
    @AutoWired
	private UserService userservice;

	@PostMapping("api/user")
	public int save(@RequsetBody User user){
    	System.out.println("UserApiController : 실행됨");
        user.setRole(RoleType.USER);
        userservice.회원가입(user);
        return 1;
    }
}

#3-1 

정상적으로 회원가입이 되면 HTTP 상태코드와 Data를 JSON 방식으로 retrun 할 수 있도록 작업해보겠습니다.

그러기 위해선 DTO 페이지를 만들어야 됩니다.

blog/Dto/ResponseDto

public class ResponseDto<T>{
	int status;
    T data;
}

 

 

@RestController
public class UserApiController(){
	
    @AutoWired
	private UserService userservice;

	@PostMapping("api/user")
	public ResponseDto<Integer> save(@RequsetBody User user){
    	System.out.println("UserApiController : 실행됨");
        user.setRole(RoleType.USER);
        userservice.회원가입(user);
        return new ResponseDto<Integer>(Httpstatus.OK.Value(),1);
    }
}

 

이렇게 상태코드를 return 할 수 있게 표현을 하면 상태코드와 data 가 출력됩니다.(console)

 

#4 

1. JoinForm에 만들어져 있던 회원가입 폼에 사용자가 회원가입을 위해 각 데이터를 입력한다.

value값에 데이터 삽입

2. 사용자가 확인 버튼(#btn-save)을 클릭하면 user.js에 존재하는 save 메소드가 실행되고 save 메소드 내부에 존재하는 로직을 타고 username, password, email 데이터가 ajax을 통해 Post방식으로 /blog/api/user 로 넘어가게 된다.

/blog/api/user로 이동

3. @PostMapping("user/api") 컨트롤러는 이동하고 있는 데이터를 핸들링하게 되고 우리가 미리 만들어놨던 userService 내부의 회원가입() 메소드를 실행시킨다. 

UserApiController

UserService.java

4. 회원가입() 메소드는 매개변수로 받은 user 객체를 save 메서드를 통해 DB에 insert 쿼리를 날리고 성공적으로 데이터들이 삽입된다.

insert된 db 데이터

5. Service 내부의 회원가입() 메소드가 끝나고 UserApiController는 HTTP 상태코드와 데이터를 리턴하게 되고, User.js는  alert로 "회원가입이 완료되었습니다" 팝업을 사용자에게 보여준 후 홈페이지(/blog)로 이동하게 된다

사용자들에게 보이는 alert창

---

명심하기

1. ResponseDto를 통해 보여지는 HTTP 상태코드와 데이터

2. Service 로직을 구현해야 되는 2가지 이유(트랜잭션, 서비스의 의미)

3. 의존성 주입(DI)의 정확한 의미