[Vue.js][Spring] Post Data 전송 간 null값 전송 문제

[Vue.js][Spring] Post Data 전송 간 null값 전송 문제

2022. 3. 25. 03:20ㆍ개념 정리 작업실/문제 정리

728x90

👷‍♂️ 작업 중인 내용

주니하랑은 Spring과 Vue.js를 이용해서 회원 가입 기능을 만들고 있고, 현재 중복 확인에 대한 기능을 만들고 있는 것이에요.

🔽 Spring Boot(Maven - mybatis)

📦 UserController.java

📦 UserService.java

📦 UserService.java

/**
 * 회원 가입 관련 비즈니스 로직
 * <pre>
 * <b>History:</b>
 *    주니하랑, 1.0.0, 2022.03.24 최초 작성
 * </pre>
 *
 * @author 주니하랑
 * @version 1.0.0, 2022.03.24 최초 작성
 * @See ""
 * @see <a href=""></a>
 */

@RequiredArgsConstructor @Slf4j
@Service public class UserServiceImpl implements UserService {

    private final PasswordEncoder passwordEncoder;
    private final UserMapper userMapper;

    /**
     * 회원 가입 전 등록된 정보 인지 확인
     * @param duplicateByIdInfoDTO - 회원 가입 전 등록되어 있는 정보 인지 확인을 위한 이용자 입력 필수 정보
     * @return CustomUserDetails - 해당 회원의 정보 반환
     * @see ""
     */

    @Override
    public DefaultResponse duplicateUserInfo(DuplicateByIdInfoDTO duplicateByIdInfoDTO) {

        log.info("UserServiceImpl의 duplicateId(String username)가 호출 되었습니다! Client로 부터 전달된 값 : " + duplicateByIdInfoDTO.toString());

        if (duplicateByIdInfoDTO == null) {
            log.info("이용자가 입력한 값이 모두 null 입니다.");

            return DefaultResponse.response(400, "잘못된 요청", "Bed Request");
        } // if (duplicateByIdInfoDTO == null) 끝

        log.info("DB에서 회원 가입 요청 이용자가 입력한 UserId(username)를 통해 해당 회원이 등록 되어 있는지 찾겠습니다!");

        Optional<DuplicateByIdInfoDTO> findByUserInfo = userMapper.findByUserInfo(duplicateByIdInfoDTO);

        if (findByUserInfo.isEmpty()) {

            log.info("회원 가입 요청 이용자가 입력한 Email 주소가 DB에 저장 되어 있지 않습니다!");
            log.info("회원 가입 입력란 중 중복 불가한 값에 대해 중복 값이 있는지 확인 하겠습니다!");

            return findByUserInfo.filter(user -> user. getUserEmail().equals(duplicateByIdInfoDTO.getUserEmail()))
                    .map(user -> {
                        log.info("이미 존재하는 E-mail 주소 입니다! 409 Code와 함께 \"이미 존재하는 값 입니다!\" 반환 하겠습니다!");

                        return DefaultResponse.response(409, "이미 존재하는 이메일 입니다!", "Conflict");

                    }).orElse((findByUserInfo.filter(user -> user.getNickname().equals(duplicateByIdInfoDTO.getNickname())))
                            .map(user -> {

                                log.info("이미 존재하는 별명 입니다! 409 Code와 함께 \"이미 존재하는 값 입니다!\" 반환 하겠습니다!");

                                return DefaultResponse.response(409, "이미 존재하는 별명 입니다!", "Conflict");

                            }).orElse(((findByUserInfo.filter(user -> user.getUserPhone().equals(duplicateByIdInfoDTO.getUserPhone()))))
                                    .map(user -> {

                                        log.info("이미 존재하는 핸드폰 번호 입니다! 200 Code와 함께 \"이미 존재하는 값 입니다!\" 반환 하겠습니다!");

                                        return DefaultResponse.response(409, "이미 존재하는 핸드폰 번호 입니다!", "Conflict");

                                    }).orElseGet(() -> {

                                        log.info("중복 되는 값이 없습니다! 200 Code와 함께 \"사용 가능!\" 반환 하겠습니다!");

                                        return DefaultResponse.response(200, "사용 가능", "OK", findByUserInfo);

                                    })));
        } else {

            log.info("이미 존재하는 ID 입니다! 409 Code와 함께 \"이미 존재하는 값 입니다!\" 반환 하겠습니다!");

            return DefaultResponse.response(409, "이미 존재하는 ID 입니다!", "Conflict");
        } // // if-else (checkEmail.isEmpty()) 끝

    } // duplicateId(String username) 끝

📦 UserMapper.java

📦 UserMapper.xml

🔽 Vue.js

📦 SignUp.vue

methods: {
  // ID 중복 확인
  idCheck() {

    const pattern = /^\s+|\s+$/g;  // 공백(Space)에 해당하는 정규 표현식

    console.log("입력된 이용자가 이용하고자 하는 ID 값 : " + this.inputParam.userId);

    if (this.inputParam.userId === undefined || this.inputParam.userId === '' || this.inputParam.userId === null) {
      console.log("ID가 입력되지 않았습니다!")

      alert("ID를 입력 해 주세요!")

      this.$refs.userId.focus();

      return false;
    } // if (this.inputParam.userId === undefined || this.inputParam.userId === '') 끝

    if (this.inputParam.userId.replace(pattern, '') === "") {
      console.log("ID에 공백 문자가 있습니다!")

      alert("ID에는 공백을 입력할 수 없습니다!")

      this.$refs.userId.focus();

      return false;
    } // if (this.inputParam.userId.replace(pattern, '') === "") 끝

    console.log("Back End로 요청과 함께 Data를 보내기 전 Data 값 확인 : " + this.inputParam.toString())

    duplicateUserIdCheck(this.inputParam).then(response => {

      console.log("ID 중복 요청 보낸 뒤 Back End에서 돌아온 응답을 확인 합니다! ID 값 : " + response.data.toString());

      if (response.data.statusCode === 409 || response.data.messageEn === "conflict") {
        console.log("이미 등록된 ID 입니다!");

        alert("이미 등록된 ID 입니다!")

        this.$refs.userId.focus();

        return false;

      } else {
        console.log("이용 가능한 ID 입니다!")

        alert("이용 가능한 ID  입니다!")

        return true;
      }
    });
  }, // idCheck() 끝

🔽 DataBase

현재 DB에는 이렇게 한 개의 계정만 등록이 되어 있는 것이에요.

주니하랑은 username(ID), nickname(별명), userEmail, userPhone(핸드폰 번호)를 중복 확인하여 같은 것이 있으면 다시 등록하도록 만들고 싶은 것이에요.

⚠️ 문제 발생!

위와 같이 POSTMAN으로 username(ID)를 검사하면 정상적으로 사용 가능하다는 200 CODE를 반환하는 것을 확인할 수 있는 것이에요.

그런데, 이렇게 Vue.js에서 중복확인을 하려고 하면 자꾸 이미 등록되어 있다고 해버리는 것이에요.

2022-03-25 02:58:47.605  INFO 31480 --- [nio-8080-exec-6] c.d.j.controller.member.UserController   : UserController의 duplicateId(@RequestBody String username)가 호출 되었습니다! Client로 부터 전달된 값 확인 : DuplicateByIdInfoDTO(username=, nickname=, userEmail=null, userPhone=null)
2022-03-25 02:58:47.606  INFO 31480 --- [nio-8080-exec-6] c.d.j.controller.member.UserController   : userService.signUp(userSignUpRequestDTO)를 호출하여 비즈니스 로직을 처리하겠습니다!
2022-03-25 02:58:47.606  INFO 31480 --- [nio-8080-exec-6] c.d.j.service.user.UserServiceImpl       : UserServiceImpl의 duplicateId(String username)가 호출 되었습니다! Client로 부터 전달된 값 : DuplicateByIdInfoDTO(username=, nickname=, userEmail=null, userPhone=null)
2022-03-25 02:58:47.606  INFO 31480 --- [nio-8080-exec-6] c.d.j.service.user.UserServiceImpl       : DB에서 회원 가입 요청 이용자가 입력한 UserId(username)를 통해 해당 회원이 등록 되어 있는지 찾겠습니다!
2022-03-25 02:58:47.612  INFO 31480 --- [nio-8080-exec-6] log4jdbc.log4j2                          : 1. Connection.isValid(5) returned true
2022-03-25 02:58:47.613  INFO 31480 --- [nio-8080-exec-6] log4jdbc.log4j2                          : 1. Connection.getAutoCommit() returned true
2022-03-25 02:58:47.613  INFO 31480 --- [nio-8080-exec-6] log4jdbc.log4j2                          : 1. PreparedStatement.new PreparedStatement returned 
2022-03-25 02:58:47.613  INFO 31480 --- [nio-8080-exec-6] log4jdbc.log4j2                          : 1. Connection.prepareStatement(select username, nickname, userEmail, userPhone
        from user
        where 1 = 1) returned net.sf.log4jdbc.sql.jdbcapi.PreparedStatementSpy@452e1a54
2022-03-25 02:58:47.613  INFO 31480 --- [nio-8080-exec-6] log4jdbc.log4j2                          : 1. PreparedStatement.setFetchSize(500) returned 
2022-03-25 02:58:47.619  INFO 31480 --- [nio-8080-exec-6] log4jdbc.log4j2                          : 1. select username, nickname, userEmail, userPhone from user where 1 = 1  {executed in 5 ms}
2022-03-25 02:58:47.619  INFO 31480 --- [nio-8080-exec-6] log4jdbc.log4j2                          : 1. PreparedStatement.execute() returned true
2022-03-25 02:58:47.619  INFO 31480 --- [nio-8080-exec-6] log4jdbc.log4j2                          : 1. ResultSet.new ResultSet returned 
2022-03-25 02:58:47.619  INFO 31480 --- [nio-8080-exec-6] log4jdbc.log4j2                          : 1. PreparedStatement.getResultSet() returned net.sf.log4jdbc.sql.jdbcapi.ResultSetSpy@2c8c95
2022-03-25 02:58:47.620  INFO 31480 --- [nio-8080-exec-6] log4jdbc.log4j2                          : 1. ResultSet.getMetaData() returned org.mariadb.jdbc.MariaDbResultSetMetaData@7c8f92e5
2022-03-25 02:58:47.620  INFO 31480 --- [nio-8080-exec-6] log4jdbc.log4j2                          : 1. ResultSet.getType() returned 1003
2022-03-25 02:58:47.620  INFO 31480 --- [nio-8080-exec-6] log4jdbc.log4j2                          : 1. ResultSet.isClosed() returned false
2022-03-25 02:58:47.620  INFO 31480 --- [nio-8080-exec-6] log4jdbc.log4j2                          : 1. ResultSet.next() returned true
2022-03-25 02:58:47.622  INFO 31480 --- [nio-8080-exec-6] log4jdbc.log4j2                          : 1. ResultSet.getString(username) returned 주니
2022-03-25 02:58:47.623  INFO 31480 --- [nio-8080-exec-6] log4jdbc.log4j2                          : 1. ResultSet.getString(nickname) returned 주니하랑
2022-03-25 02:58:47.623  INFO 31480 --- [nio-8080-exec-6] log4jdbc.log4j2                          : 1. ResultSet.getString(userEmail) returned junyharang8592@gmail.com
2022-03-25 02:58:47.623  INFO 31480 --- [nio-8080-exec-6] log4jdbc.log4j2                          : 1. ResultSet.getString(userPhone) returned 010-123-4567
2022-03-25 02:58:47.623  INFO 31480 --- [nio-8080-exec-6] log4jdbc.log4j2                          : 1. ResultSet.isClosed() returned false
2022-03-25 02:58:47.624  INFO 31480 --- [nio-8080-exec-6] log4jdbc.log4j2                          : 
|---------|---------|-------------------------|-------------|
|username |nickname |useremail                |userphone    |
|---------|---------|-------------------------|-------------|
|주니       |주니하랑     |junyharang8592@gmail.com |010-123-4567 |
|---------|---------|-------------------------|-------------|

위의 Console Log에서 눈 여겨 봐야 할 부분이 바로 아래인 것이에요.

2022-03-25 02:58:47.605  INFO 31480 --- [nio-8080-exec-6] c.d.j.controller.member.UserController   : UserController의 duplicateId(@RequestBody String username)가 호출 되었습니다! Client로 부터 전달된 값 확인 : DuplicateByIdInfoDTO(username=, nickname=, userEmail=null, userPhone=null)
2022-03-25 02:58:47.606  INFO 31480 --- [nio-8080-exec-6] c.d.j.controller.member.UserController   : userService.signUp(userSignUpRequestDTO)를 호출하여 비즈니스 로직을 처리하겠습니다!
2022-03-25 02:58:47.606  INFO 31480 --- [nio-8080-exec-6] c.d.j.service.user.UserServiceImpl       : UserServiceImpl의 duplicateId(String username)가 호출 되었습니다! Client로 부터 전달된 값 : DuplicateByIdInfoDTO(username=, nickname=, userEmail=null, userPhone=null)

보면 Client(Vue.js)에서 전달되는 값이 모두 null인 것을 확인 할 수 있는 것이에요.

여기서 보면 where 절에 1=1 즉, 참이 되게 해 놓고, if절로 조건에 맞으면 AND 조건절로 해당 정보를 찾게 만들어 논것이에요.

🤔 원인 분석

근데 NULL 값이 들어와 버리니 검색할 것은 없고, where 절에 1=1이라고 되어 있으니 결국 모든 Data를 찾게 되는 문제가 발생했고, 그 결과 다른 username을 입력했지만, DB에서 어떤 결과가 찾아지면 값이 있다고 판단하라고 Logic을 짰기 때문에 결국 '이미 등록 된 ID'라고 출력을 해 버리는 것이에요.

그럼 도대체 어떤 문제 때문에 이와 같은 결과가 나오는 것일까요?

🍻 문제 해결!

주니하랑은 그럼 도대체 왜? Client에서는 제대로 값이 던져지는데, 받는 곳에서는 못 받는 것일까를 고민하다가 변수명에 눈이 간 것이에요.

위 DTO는 회원 가입 전 중복 확인을 위해 필요한 값들을 담는 등의 처리를 할 수 있는 DTO Class 것이에요.

Controller에서는 매개 변수로 이 Class를 객체로 받고 있는 것이에요.

다시 이 곳 Vue.js Code에서 주니하랑은 38번째 줄 v-model에 집중 해 본 것이에요.

V-model에 Mapping된 객체에 ID값이 담길 것이고,

이 곳 idCheck()에서 사용이 되면서 BackEnd로도 전달이 되는 것이에요.

근데 문제는 바로 Vue에 `userId`와 Spring에 `username`이 똑같은 값을 받고, 똑같은 역할을 하지만, 결론적으로 이름이 다르기 때문에 Vue에서는 `userId`를 넘겼지만, Spring은 이 변수명을 몰라 `Null` 값이 들어왔던 것이에요.

원인을 파악했으니 재빠르게 수정하고, 다시 Test를 해봐야 하겠어요!

야호!😀

문제를 해결 한 것이에요!

728x90

저작자표시 비영리 변경금지

'개념 정리 작업실 > 문제 정리' 카테고리의 다른 글

[Node.js][Nest.js] ERROR [ExceptionHandler] No metadata for "{EntityName}" was found. (0)	2022.04.10
[Node.js][Error] Cannot find module '.dotenv' (0)	2022.04.08
[Vue.js] <input> 기본값 없음으로, null 전달로 인한 NPE 발생 문제 (0)	2022.03.21
[Vue.js] .ceil / .rang \| 도달할 수 없는 코드 (0)	2022.03.16
[Vue.js] xhr.js?1a5c:210 GET http://**/api/support/devInquryList 404 (Not Found) & CORS Error (0)	2022.03.15

Juny's ITLog

Juny's ITLog

태그

최근글

댓글

공지사항

아카이브

👷‍♂️ 작업 중인 내용

🔽 Spring Boot(Maven - mybatis)

📦 UserController.java

📦 UserService.java

📦 UserService.java

📦 UserMapper.java

📦 UserMapper.xml

🔽 Vue.js

📦 SignUp.vue

🔽 DataBase

⚠️ 문제 발생!

🤔 원인 분석

🍻 문제 해결!

'개념 정리 작업실 > 문제 정리' 카테고리의 다른 글

관련글

티스토리툴바

Juny's ITLog

태그

최근글

댓글

공지사항

아카이브

👷‍♂️ 작업 중인 내용

🔽 Spring Boot(Maven - mybatis)

📦 UserController.java

📦 UserService.java

📦 UserService.java

📦 UserMapper.java

📦 UserMapper.xml

🔽 Vue.js

📦 SignUp.vue

🔽 DataBase

⚠️ 문제 발생!

🤔 원인 분석

🍻 문제 해결!

'개념 정리 작업실 > 문제 정리' 카테고리의 다른 글

관련글

티스토리툴바

⚠️ 문제 발생!

🤔 원인 분석

🍻 문제 해결!