[Photogram] 회원가입 - 공통 응답 DTO, Script 만들기

• 이전시간까지 우리는 Validation 체크를 통해 유효성 검사에 실패할 경우 사용자에게 아래와 같은 페이지가 보여지도록 구현하였습니다.

• 허나 유효성 검사에 실패하였다고 해서 페이지가 강제 이동되며 위와 같은 메시지가 보여진다면 그렇게 좋은 사용자 경험은 아닐 것입니다. 따라서 오늘은 이 부분을 조금 수정해보려고 합니다.

---

📝 1. 공통 응답 DTO

• 첫 번째 방법으로 공통 응답 DTO를 생성하여 해당 DTO를 통해 사용자에게 오류 메시지를 전달하는 방식입니다.

package com.cos.photogram.web.dto.auth;

...

@Data
@NoArgsConstructor
@AllArgsConstructor
public class CMRespDto<T> {
 
	private int code;	//1: 성공, -1: 실패
	private String message;
	private T data;
}

• 해당 방법을 사용할 경우 아래와 같은 결과가 나타납니다.

• 하지만 이 역시도 우리가 처음에 생각했던 문제점을 보완하는 해결책은 아닐 것입니다.
• 해당 방식은 이후 AJAX 통신과 함께 사용할 것으로 남겨두도록 하겠습니다.

---

📝 2. 공통 응답 Script

• 두 번째 방법으로 공통 응답 Script를 생성하여 클라이언트에서 응답하는 방법입니다.
• 이 방법을 사용하기 위해 우선 아래와 같이 서버 단에서 StringBuffer를 통해 HTML 코드를 작성해주었습니다.

package com.cos.photogram.util;

public class Script {

	public static String back(String msg) {
		StringBuffer sb = new StringBuffer();
		sb.append("<script>");
		sb.append("alert('" + msg + "');");
		sb.append("history.back();");
		sb.append("</script>");
		
		return sb.toString();
	}
}

• 이후 ExceptionHandler 또한 조금 수정해주었습니다.

package com.cos.photogram.handler;

...

@RestController
@ControllerAdvice
public class ControllerExceptionHandler {

	@ExceptionHandler(CustomValidationException.class)
	public String validationException(CustomValidationException e) {
		return Script.back(e.getErorrMap().toString());
	}
}

• 해당 방법을 사용하면 클라이언트가 원하는 방식의 오류 처리를 수행할 수 있으며 그 결과는 아래와 같습니다.

팝업창으로 오류 메시지가 출력되며 이후 다시 회원가입 페이지(back)로 이동합니다

---

GitHub - Daegwon-Kim/SpringBoot-Photogram