게시판 만들어보기 10일차

박세건·2023년 7월 7일
0
post-thumbnail

본격적으로 예외처리를 해보려고한다.
회원가입할때 로그인하는 아이디는 unique처리를 해두었기때문에 중복적인 아이디로 회원가입 하려고 한다면 에러페이지가 나타나게 된다 이러한 상황을 예외처리로 막아보자

참고 YOUTUBE

JAVA의 예외 처리 최상위 클래스는 Object이고 보이는 표처럼 구성이되어있다.
Exception은 크게 RuntimeException과 그외에 Exception으로 되어있고 RuntimeException의 상속을 받는 Unchecked Exception과 그외의 Checked Exception으로 이루어져있다.
이 둘이 큰 차이는 강제처리를 해야하는지이다.
또한 Checked Exception은 컴파일 단계에서 발견할 수 있지만 UnChecked Exception은 실행 중에 발견되기때문에 컴파일단계에서는 확인할 수가 없기에 UnChecked라고 한다.

Spring Boot에서는 예외처리를 하기위해서 대표적으로 @ControllerAdivce, @ExceptionHandler 의 어노테이션을 사용한다.
간단하게 @ControllerAdvice는 모든 컨트롤러에서 발생한 Exception처리를 해당 어노테이션이 붙은 클래스에서 받아와서 처리한다.
@ExceptionHandler이 붙은 함수에서
@ExceptionHandler(value = SQLIntegrityConstraintViolationException.class)
이렇게 지정된 Exception의 처리를 지정해준다.

코드

handler 패키지를 따로 만들어준뒤에 GlobalExceptionHandler를 만들어준다

package com.example.board_project.handler;


import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestControllerAdvice;

import java.sql.SQLIntegrityConstraintViolationException;
import java.util.HashMap;
import java.util.Map;

@RestControllerAdvice
public class GlobalExceptionHandler {

    @ExceptionHandler(value = SQLIntegrityConstraintViolationException.class)
    public ResponseEntity<Map<String, String>> ExceptionHandler(Exception e) {
        HttpHeaders httpHeaders = new HttpHeaders();
        HttpStatus httpStatus = HttpStatus.BAD_REQUEST;

        HashMap<String, String> map = new HashMap<>();
        map.put("error type", httpStatus.getReasonPhrase());
        map.put("code", "400");
        map.put("message", "중복된 아이디로 회원가입시도");

        return new ResponseEntity<>(map, httpHeaders, httpStatus);
    }
}

아직은 너무 간단한 예외처리이지만 조금 더 공부해서 예외처리를 왜 해줘야하는지, 예외처리가 정확히 무슨 일을 해주는지 알고 더 완벽하게 예외처리를 할 수 있게 해야겠다

회원가입할때에 중복 ID로 회원가입할때에 예외처리를 해줘서 띄어주는 것도 좋지만
아이디 중복확인을 해주는 과정이 추가되면 좋을거 같아서 아이디 중복 처리 기능을 추가해본다.

아이디 중복 확인

User Entity 설정에서 로그인 ID는 unique 설정을 해주었기때문에 중복되지 않게 처리해주어야한다.

joinForm.html 수정

<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default_layout}">
<div layout:fragment="content">
    <div class="container">
        </br>
        </br>
        <h2>회원가입</h2>
        </br>
        </br>
        <form action="/auth/userJoin" method="post">
            <div class="form-group">
                <label for="loginId"> 아이디 : </label>
                <input type="text" class="form-control" id="loginId" placeholder="Enter ID" name="loginId">
                <br>
                <button type="button" class="btn btn-secondary" id="btn-doubleCheck">중복 확인</button>
                <div id="resultTrue" class="text-primary"></div>
                <div id="resultFalse" class="text-danger"></div>


            </div>
            <div class="form-group">
                <label for="password"> 비밀번호 : </label>
                <input type="password" class="form-control" id="password" placeholder="Enter password" name="password">
            </div>
            <div class="form-group">
                <label for="name"> 이름 : </label>
                <input type="text" class="form-control" id="name" placeholder="Enter Name" name="name">
            </div>
            <div class="form-group">
                <label for="phoneNumber"> 휴대폰 번호 : </label>
                <input type="text" class="form-control" id="phoneNumber" placeholder="Enter phonenumber"
                       name="phoneNumber">
            </div>
            <div class="form-group">
                <label for="username"> 닉네임 : </label>
                <input type="text" class="form-control" id="username" placeholder="Enter username" name="username">
            </div>
            </br></br>
            <button id="submitBtn" type="submit" class="btn btn-primary">회원가입</button>
            <p id="notSubmit" class="text-danger"></p>
        </form>

    </div>
    <script>
        $(document).ready(function () {
            let isIdChecked = false;

            $("#loginId").change(function () {
                isIdChecked = false;
            });

            $("#btn-doubleCheck").click(function () {   //중복확인 버튼을 눌렀을때

                let data = {
                    loginId: $("#loginId").val(),   //변수설정
                }

                $.ajax({
                    type: "POST",
                    url: "/auth/loginIdCheck",
                    data: JSON.stringify(data), //data변수를 JSON형태로 변환
                    contentType: "application/json; charset=utf-8",
                    //dataType: "json", 받을 데이터 타입, 받는 데이터 타입이 달라서 error가 계속 발생
                    success: function (data) {
                        if (data == "사용가능") {
                            isIdChecked = true;
                            $("#resultFalse").text(""); //id 값을 이용해서 ajax에서 값을 넣어주는것도 가능
                            $("#resultTrue").text("사용 가능한 아이디입니다!");

                        } else {
                            isIdChecked = false;
                            $("#resultFalse").text("중복된 아이디입니다!");
                            $("#resultTrue").text("");
                        }

                    },
                    error: function (req, status, err) {
                        alert("에러발생");
                        console.log(req);
                    }
                });
            });
            $("#submitBtn").click(function (event) {
                event.preventDefault(); //버튼 클릭시submit되는것을 방지
                if (isIdChecked == true) {
                    $("form").submit(); //폼태그를 submit한다
                } else {
                    $("#notSubmit").text("중복확인을 해주세요!")
                }
            });
        });
    </script>
</div>

UserApiController 수정

@PostMapping("/auth/loginIdCheck")
    @ResponseBody
    public String loginIdCheck(@RequestBody UserJoinDto userJoinDto) {

        User findUser = userService.loginIdCheck(userJoinDto.getLoginId());
        System.out.println("-----------------------------------------------"+findUser);
        if (findUser != null) {
            return "중복";
        } else {
            return "사용가능";
        }

    }

Jquery와 ajax를 추가해서 작성하였고 isIdChecked 라는 변수를 두어서 이 값이 true일때만 로그인이 수행되게 함.
ajax부분에서 dataType즉 서버로부터 받아올 데이터 타입을 json이라고 설정해두어서 오류가 발생했었다. UserApiController 부분에서 return 해주는 값이 ajax에서 success: function (data) 이 부분에 data로 들어오게된다.
주석 처리를 해주어서 해결
id 값을 이용해서 ajax에서 글을 넣어줄수있는 것을 알았고, preventDefault() 함수를 사용해서 버튼이 클릭되거나 a태그로 설정된 부분을 클릭했을때에 작동하는것을 막아주는 함수도 배웠다.
꼭 중복확인을 통해서 회원가입이 가능해야하기때문에

$("#loginId").change(function () {
                isIdChecked = false;
            });

이부분 추가

UserApiController 부분에서 ajax를 통해서 정보를 교환할때에 해당 함수에 @ResponseBody를 적어주어서 데이터로 return을 받을 수 있게해줬고(때문에 ajax에서 data를 받을수있다, 아니면 맞는 html을 찾는다) ajax에서 가져온 data는 JSON 형태이기때문에 이를 Java Object 형태로 변경해주는 @RequestBody를 사용

profile
멋있는 사람 - 일단 하자

0개의 댓글