[유튜브-메타코딩] - 나만의 블로그 만들기 - 11. 회원가입 하기 (Ajax 요청)

- Service를 사용하는 이유

1. 트랜잭션 관리

2. 서비스의 의미 때문

• 두개 이상의 트랜잭션을 하나의 트랜잭션으로 묶어서 서비스화 시킬 수 있다.
• ex) A가 B에게 송금서비스를 할때 A가 가진돈 update, B가 가진돈 update로 두개의 커밋이 필요한 것을 update두개를 하나로 묶어서 하나의 트랜잭션으로 한번의 커밋을 사용.

UserService 코드

// 스프링이 컴포넌트 스캔을 통해 Bean에 등록 해줌.
@Service
public class UserService {
	
	@Autowired // DI를 사용.
	private UserRepository userRepository;
	
	@Transactional // 하나의 트랜잭션으로 묶여서 전체가 실행. 성공하면 commit 실패하면 rollback
	public int 회원가입(User user) {
		try {
			userRepository.save(user);
			return 1;
		}catch(Exception e){
			e.printStackTrace();
			System.out.println("회원가입() : "+e.getMessage());
			
		}
		return -1;
	}

}

---

- ResponseDto 생성

제네릭 API Response 활용 (Response Dto)

제네릭 (Generic) 이란.

public class 클래스명<T> { 
	... 
}

public interface 인터페이스명<T> { 
	... 
}

• 제네릭 타입은 타입을 파라미터로 가지는 클래스와 인터페이스를 말한다.
• 제네릭 타입은 클래스 또는 인터페이스 이름 뒤에 "<>" 부호가 붙고, 사이에 타입 파라미터가 위치한다. <T>
• 제네릭을 사용하면 특정 클래스나 인터페이스에 다양한 타입으로 사용 및 저장할 필요가 있을 경우 편리하다. (재활용 가능)

제네릭 API ResponseDto 코드

@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class ResponseDto<T> {
	HttpStatus status;
	T data;
}

---

- REST API Controller 생성

UserService의 회원가입 메서드를 실행 후 ResponseDto의 http Status와 result 를 리턴.

UserApiController 코드

@RestController
public class UserApiController {
	
	@Autowired  // DI한다.
	private UserService userService;
	
	@PostMapping("/api/user")
	public ResponseDto<Integer> save(@RequestBody User user) {  // username, password, email
		System.out.println("UserApiController save 호출됨");
		
		user.setRole(RoleType.USER);
		int result = userService.회원가입(user);
		
		return new ResponseDto<Integer>(HttpStatus.OK, result);
		
	}
}

---

- JavaScript ajax통신

• ajax로 url에 GET,POST,PUT,DELETE 타입으로 JSON데이터로 요청.
• 응답은 자동으로 JavaScript 오브젝트로 받는다.

		// ajax 호출시 default.가 비동기 호출
		// ajax가 통신을 성공하고 서버가 json을 리턴해주면 자동으로 자바 오브젝트로 변환
		$.ajax({
			type : "POST",
			url : "/blog/api/user",
			data : JSON.stringify(data), // http body 데이터
			contentType : "application/json; charset=utf-8",  //MIME 타입
			dataType : "json" // 요청을 서버로 해서 응답이 왔을때  기본적으론 문자열이 응답 => 생긴게 JSON이라면 javascript 오브젝트로 변경.
		}).done(function(resp){ //  javascript 오브젝트로 변경된 응답 값이 파라미터에 저장
			alert("회원가입 완료되었습니다.");
			location.href="/blog";
			console.log(resp);
		}).fail(function(error){
			alert(JSON.stringify(error));
		});  // ajax 통신을 이용해서 3개의 파라미터를 JSON으로 변경하여 insert 요청

---

- Dto, ExceptionHandler, ApiController의 HTTP 에러 응답 수정

GlobalExceptionHandler 코드

• 에러메세지 변경

@ControllerAdvice  // 어디서든 Exception이 발생하면 여기 클래스로 온다.
@RestController
public class GlobalExceptionHandler {
	
	@ExceptionHandler(value=Exception.class) // 최상위 보모인 Exception으로 어떤 Exception이든 여기로 온다. 
	public ResponseDto<String> handleArgumentException(Exception e) {
		return new ResponseDto<String>(HttpStatus.INTERNAL_SERVER_ERROR.value(), e.getMessage());  //에러메세지 변경
	}
	
}

ResponseDto 코드

• status 자료형 변경

@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class ResponseDto<T> {
	int status;  // int로 변경
	T data;
}

UserApiController 코드

• 자료형을 int로 변경하여 OK.value() 로 변경

return new ResponseDto<Integer>(HttpStatus.OK.value(), 1);