#18 회원가입 구현(REST API, Ajax)

 

회원가입시 Ajax를 사용하는 이유

 

요청에 대한 응답을 html이 아닌 Data(JSON)를 받기 위해서다.

클라이언트가 웹일수도 앱일수도 있는데 웹의 경우 서버한테 html을 받으면 그것을 인식하는데,

앱의 경우 html을 인식할 수 없으니 서버에서 Data를 준다.

이렇게 될 경우 서버를 2번 만들어야 하게 된다.

이 서버는 html을 리턴하게되는 서버를 만들고, 이 서버는 Data를 리턴해주는 서버를 만들고..

이렇게 2번 만들바에 서버를 그냥 Data를 리턴하는 서버로 사용하는 것이다.

 

Ajax를 이용하면 이 서버가 각각 다른 서버가 아니라 하나의 서버로

각각 클라이언트 요청을 받아서 응답해줄 수 있게 된다.

웹클라이언트는 그림처럼 추가적인 요청을 통해 HTML파일을 받아야된다.

 

 

비동기 통신을 하기 위해서다.

순서에 상관없이 비동기적으로 통신을 할 수 있기 때문에 사용한다.

 

 

 

 

 

스프링 부트 Controller, Service, DAO, DTO 이해

 

회원가입 기능 구현에 앞서 스프링부트에서 각각 어떤 역할을 하는지 짚고 넘어가야한다.

명료하게 정리된 글이 있어 가져와보았다.

출처 : https://frtt0608.tistory.com/7

 

Controller는 사용자의 요청(request)를 어떻게 처리할지 결정하는 파트이다.

Controller에 정의된 기준대로 요청을 처리한다.

 

Service는 사용자의 요청(request)에 대해 어떤 처리를 할지 결정하는 파트이다.

Controller가 받은 요청에 대해 알맞는 정보를 가공해서 다시 Controller에게 데이터를 넘긴다.

 

DAO는 Data Access Object의 약자로 DB의 data에 접근하기 위한 객체이다.

어플리케이션에서 사용할 DB로직을 객체 하나에 메서드로 구현하고,

이를 호출하여 사용하도록 만든 것을 DAO라고 한다.

 

DTO는 Data Transfer Object의 약자로 계층 간의 데이터 교환을 위한 Java Bean을 말하며 VO와 유사한 특징을 가진다.

DTO는 Client가 요청할 양식과 요청을 처리하는 과정에서 기준이 되는 틀을 정의한 것이다.

 

 

계층 간의 데이터 교환

 

presentation Layer는 HTTP 요청을 처리하고 JSON 매개변수를 객체로 변환하고

요청을 인증하고 business layer로 전송한다. 한마디로 views로 구성된 프론트엔드 파트이다.

 

Business Layer는 모든 비지니스 로직을 처리한다. 서비스 클래스들로 구성되며

data access layers에서 제공하는 서비스를 사용한다. 또한 권한 부여 및 유효성 검사를 수행한다.

 

Persistence Layer는 모든 storage logic을 포함하고 비즈니스 객체를 데이터베이스 행으로 변환한다.

 

Database Layer 계층에서 CRUD(create, retrieve, update, delete) 작업이 수행된다.

 

 

presentation Layer 객체 : Controller

Business Layer 객체 : Service

Persistence Layer : JDBC, ORM 등

Database Layer : MySQL, MariaDB 등

 

출처 : https://www.javatpoint.com/spring-boot-architecture

Spring Boot Architecture - javatpoint

 

 

 

 

Ajax를 이용한 회원가입 기능 구현

 

user.js 작성

 

저번 시간에 이어 이제 user.js에 ajax를 이용해 회원가입 기능을 구현하는 코드를 작성하였다.

요청할 URL를 /api/user로 설정하였다. 

이제 새로운 Controller를 만들고 /api/user를 만들어보도록 하자

 

 

UserApiController.java 생성 및 작성

 

controller 패키지 안에 api 패키지를 생성하고 그 안에 UserApiController 클래스를 생성한다.

 

이렇게 코드를 작성하면 

user.js 의 done(function(resp) { ...에서 resp로 1이 리턴되게 되어 함수가 호출되게 한다.

 

 

그런데 이대로 실행하면 ajax가 작동하지 않는다.

jquery slim버전에서는 잘 동작하지 않는 것 같다.

header.jsp에 있는 jquery 라이브러리를 slim 버전에서 min으로 바꿔주자

이 부분을

 

이렇게 수정해주면 slim버전이 아닌 min을 사용하게 된다.

 

 

실행결과 :

 

회원가입 완료 버튼을 누르니 완료창이 정상적으로 뜨고, 홈 화면으로 돌아가게 된다.

 

 

ResponseDto.java 생성 및 작성

 

dto 패키지와 ResponseDto 클래스를 생성하자

 

ResponseDto.java를 다음과 같이 제네릭을 이용해 작성한다.

 

 

UserApiController.java를 다음과 같이 작성한다.

HttpStatus.OK는 통신이 정상적으로 성공했다면 "OK"

(HttpStatus.OK, 1)에서 1이 있는 위치엔 나중에 데이터베이스에 insert하고 나서 리턴된 결과값을 넣을 예정이다.

 

 

이제 실행을 해볼건데, 제대로 값이 리턴되는지 실험하기 위해서 다음과 같이 코드를 수정해보자

 

주소를 이동시키는 코드를 주석처리하고, 콘솔창에 resp를 띄우는 코드를 작성했다.

 

 

실행결과 :

 

값들이 제대로 리턴되는 것을 확인할 수 있다.

 

 

UserService.java 생성 및 작성

 

우선 service가 필요한 이유는 트랜잭션 관리와 서비스 의미 때문이다.

예를 들어, 송금 서비스가 있다.

내가 다람쥐한테 송금을 할 것이다. 나는 50000원이 있고 다람쥐는 20000원이 있다.

나는 다람쥐에게 30000원을 송금할 것이다.

 

1. 내 금액을 업데이트 해야한다. 나의 돈은 50000 -> 20000원이 된다.

2. 다람쥐의 금액을 업데이트 해야한다. 다람쥐의 돈은 20000 -> 50000원이 된다.

그러면 이 송금이라는 서비스는 2개의 일을 들고있다.

나의 금액을 업데이트하는 것과 다람쥐의 금액을 업데이트하는 것이다.

 

서비스라는 것은 이런 것이다.

데이터베이스에서 한번 업데이트하는 것으로 처리되는 것이 아니라 

하나의 서비스,기능이 되어야 한다.

이런 update, insert, delete 등이 여러 로직들이 묶여 하나의 서비스가 될 수 있다.

+ 서비스에서 오류 발생시 롤백 필요하다. 그것을 @Transactional로 구현 가능하다.

 

이제 서비스를 생성하자

service 패키지를 생성하고 그 안에 UserService 클래스를 생성한다.

 

UserService.java

package com.cos.blog.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import com.cos.blog.model.User;
import com.cos.blog.repository.UserRepository;

// 스프링이 컴포넌트 스캔을 통해 Bean에 등록을 해준다. IoC를 해준다.
// 메모리에 대신 띄워준다는 것이다.
@Service
public class UserService {
	
	@Autowired
	private UserRepository userRepository;

	@Transactional // 오류 발생 시 롤백한다.
	public int 회원가입(User user) {
		try {
			userRepository.save(user);
			return 1;
		} catch (Exception e) {
			e.printStackTrace(); // 에러의 발생근원지를 찾아서 단계별로 에러를 출력한다.
			System.out.println("UserService : 회원가입() : "+e.getMessage());
		}
		return -1;
	}
}

 

UserApiController.java에 다음과 같이 코드를 추가해 작성한다.

 

+ 추가

 

//User.java

@Enumerated(EnumType.STRING) // DB에 해당 Enum이 String이라는 것 알려줌
private RoleType role;

User.java에서 다음과 같이 되어 있어야 setRole이 정상적으로 작동한다.

 

 

 

 

실행결과 :

 

현재 저장된 user 목록

여기 daramG를 추가해보겠다!

 

일단 회원가입이 완료되었다고는 떴다.

과연 DB 테이블에도 제대로 추가되었을까? 두근두근..

 

daramG가 추가된 모습이다

 

다람쥐 만세!

 

 

이렇게 ajax를 이용해 회원가입을 구현할 수 있다.

 

 

 

참고자료 : https://youtu.be/809058DGUPo