[Front+Backend] 로그인 과정에서의 처리 과정 & AJAX와의 데이터 응답

1. JSP에서 <form> 태그 내부를 통해 사용자가 내용을 입력하고 버튼을 누르면 JS에게 전송

2. JS에서 AJAX가 동작하여, 입력된 데이터들을 서버로 비동기 전송 (요청 전송)

3. 서버(컨트롤러)에서 AJAX로 받은 정보들을 가지고 DB(모델)를 통해 사용자 조회. 성공/실패 여부를 판단 후 JSON 형태 등으로 JS에게 응답을 전달함 (로그인 처리는 서버에서 담당)

4. 응답을 받은 JS는 alert을 띄우거나 페이지 이동 등을 결정함.

 

즉, 

사용자 입력(JSP) → AJAX 요청 전송(JS) → 서버에서 처리 (Controller) → AJAX에서 응답 처리(JS)

---

AJAX 양식을 보면 dataType이 있는데, 이 데이터 타입은 js가 서버로부터 받을 응답의 형식을 의미한다. 

 

// AJAX 요청
	// 1. 요청 타입, 2. 서버 URL 3. 데이터 값 4. 데이터 타입 5. 실패/에러 시 수행할 코드
	$.ajax({
		type: "POST", // 방식
		url: loginUrl, // 서버로 데이터를 보낼 URL
		data: { // 보낼 값
			memberId: memberId,
			memberPassword: memberPassword
		},
		dataType: "json", // 받을 타입
		success: function(response) {
		// response : 서버에서 return한 JSON 객체
			console.log("받은 로그인 데이터 : [" + response.member + "]");
			// 자바에서 put한 member 값(사용자 정보가 들어있음)
			// member: AJAX 응답(response)에서 response.member로 서버에서 보낸 값을 꺼냄
			if (!response.member) { // 로그인 실패 시
				// 스위트 알럿창 출력
				printSweetAlert("error", "존재하지 않는 계정입니다.", "아이디 혹은 비밀번호를 확인하세요.");
			} else { // 로그인 성공 시
				// 관리자 계정이라면
				if (response.member.memberIsAdmin) {
					// 스위트 알럿창 출력
					printSweetAlert("success", "관리자 계정 확인", "회원관리 페이지로 이동합니다.", "manageMember.do");
				} else { // 일반 회원이라면
					// 스위트 알럿창 출력
					printSweetAlert("success", "방문을 환영합니다.", "", "main.do");
				}
			}
		},

 

위 코드에서는 json으로 응답을 받겠다고 지정했다.

 

여기서 헷갈리는 개념이 있을 수 있어서 contentType과 dataType에 대해 정리하고자 한다.

dataType	서버에게 받는 형식
contentType	서버에게 보내는 형식

정반대의 의미를 가지니 조심하도록 하자.

---

현재 프로젝트에서는 컨트롤러에서 Map을 사용해서 응답을 전달하고 있다.

단, 이 경우에는 @ResponseBody 어노테이션을 사용하여 view 이동이 아닌, JSON 데이터 전달을 할 수 있도록 해야한다.

즉, JSON으로 변환된 상태로 주어야 AJAX가 응답을 받을 수 있는 것이다.

 

// 로그인 기능
	@PostMapping("/member/login")
	@ResponseBody // JSON 응답을 줄거고 + view 반환 형태가 아닌, Map 형태로 줄 거니까 해당 어노테이션이 필요함
	public Map<String, Object> login(PasswordEncoderUtil passwordEncoderUtil, MemberVO memberVO, HttpSession session) {
		// 로그인 처리 후 JSON 형태로 결과를 돌려줌

 

@ResponseBody 태그가 있으면 Map이 자동으로 JSON으로 바뀌어 응답된다.

 

서버가 Map을 리턴하면 Jackson 같은 JSON 변환 라이브러리가 자동으로 JSON 응답으로 바꿔준다.

이떄, Jackson 라이브러리는 스프링부트에 들어있는 도구로, Map이나 객체를 JSON으로 바꿔주는 역할을 한다.

Map, List, DTO 등을 JSON으로 바꿔서 응답.

JSON ↔ Java 객체 간의 자동 변환(직렬화 & 역직렬화)을 담당하는 라이브러리

=> Jackson 라이브러리 덕분에 서버에서 map으로 응답해도 ajax가 json 데이터로 받을 수 있다!!

 

즉, 예를 들어 Map으로 데이터를 전달하면

Map<String, Object> map = new HashMap<>();
map.put("name", "감자");
map.put("age", 25);
return map;

 

다음과 같이 알아볼 수 있게 바꿔준다는 것이다.

"자동 직렬화" 해준다. (Map → JSON)

{
  "name": "감자",
  "age": 25
}