[SpringBoot] (IntelliJ, vue.js, H2) 회원가입 페이지 만들기 3편: watch로 아이디와 이메일 변경 시 다시 중복체크하게 만들기.

 

 

 

[ 회원가입 페이지 만들기 2편 : 아이디와 이메일 패턴 체크하고 중복 확인하기 ]

[SpringBoot] (IntelliJ, vue.js, H2) 회원가입 페이지 만들기 2편 : 아이디, 이메일 중복체크 만들기.

 

 

 

아이디와 이메일을
중복 체크하고 패턴 체크까지 만들었따.
그런데 이럴수가!
사용자가 중복 체크를 만들고
값을 변경해도 가입이 성공한다.

 

 

 

 

1.  화면 동작과 전체 코드

• 화면동작

 

 

 

• 코드

Register-Web-frontend/src/views/BasicRegister.vue at master · hyeong-ing/Register-Web-frontend

 

 

 

 

 

---

 

 

 

 

 

 

2.  문제와 해결 방법

• 문제

아이디와 이메일을 중복 체크 후, 사용자가 아이디와 이메일을 새롭게 작성하면 그대로 회원가입이 되는 문제가 발생했다. 중복 체크가 성공적으로 수행되면 true를 기본값으로 가지던 idDuplicate 값과 emailDuplicate 값이 false로 변경되면서 아이디와 이메일 데이터 값이 변경되어도 여전히 false가 되어 가입이 성공됐던 것이다. 스프링에서 이 문제를 해결해야하나 고민하던 찰나, vue에서 이 문제에 대해 아주 쉽게 해결할 수 있는 방법을 찾게 되는데...

 

 

• 해결방법

바로 watch라는 함수를 통해 해결할 수 있었다.

 

 

 

 

---

 

 

 

 

3.  Watch

<template> 코드

<input v-model="userId" type="text" name="userId" placeholder="id"/>
<button class="id-duplicate-btn" @click="checkIdDuplicate"> id </button>

<input v-model="email"  type="email" name="email" placeholder="example01@sori.com"/>
<button class="email-duplicate-btn" @click="checkEmailDuplicate"> email </button>

<script> 코드

  data() {
    return {
      name: "",
      userId: "",
      pwd: "",
      pwdConfirm: "",
      tel: "",
      birth: "",
      email: "",
      idDuplicate: true,
      emailDuplicate: true,
    };
  },

  watch: {
    userId(newVal, oldVal) {
      this.idDuplicate = true;
    },
    email(newVal, oldVal) {
      this.emailDuplicate = true;
    }
  },

watch는 data, props, computed 등 반응형 데이터의 변화를 감시하다가, 값이 바뀌면 함수를 실행시킨다. userId와 email은 newVal과 oldVal를 가지는데, newVal은 변경된 새로운 값이고 oldVal은 변경되기 전의 이전 값이다. 그래서 newVal과 oldVal의 값이 다르면 this.idDuplicate = true와 this.emailDuplicate = true가 실행된다. 

중복 버튼을 누르고 확인이 끝났으면, idDuplicate와 emailDuplicate의 값은 false로 변경된다. 그런데 사용자가 id 혹은 email 값을 변경하면 watch가 그걸 알아채고 다시 idDuplicate와 emailDuplicate 값은 true로 변경한다.

사용자가 회원가입을 하기 위해서는 idDuplicate와 emailDuplicate 값이 false를 가져야하기 때문에, true로 변경되어 가입이 제대로 수행되지 않는다.

 

 

 

 

---

 

 

 

4.  다른 방법 input, watch와 차이점은?

<template> 코드

<input v-model="userId" @input="userIdInput" type="text" name="userId" placeholder="id"/>
<button class="id-duplicate-btn" @click="checkIdDuplicate"> id </button>

혹은

<input v-model="userId" v-on:input="userIdInput" type="text" name="userId" placeholder="id"/>
<button class="id-duplicate-btn" @click="checkIdDuplicate"> id </button>

<script> 코드

methods: {
  userIdInput() {
    this.idDuplicate = true;
  },

watch는 데이터 자체가 바뀌면 실행된다. 그리고 값이 어떻게 바뀌었는지를 oldVal, newVal로 알 수 있다. 그런데 @input은 HTML DOM 이벤트 레벨에서 동작한다. <input> 태그의 input 이벤트가 발생했을 때만 알아서, 사용자가 뭔가 입력했다는 것만 아는 것이다.

사용자가 아이디에 sori1234를 적었고 그 값 위에 붙여넣기 했다고 가정하자.(이어서 적거나 지웠다 적은게 아니라 아이디를 드래그 해놓은 뒤 붙여넣기 한 것) watch는 데이터 값의 변동을 확인하니까 oldVal과 newVal의 값이 달라지지 않았음을 확인하고 idDuplicate에 true를 할당하지 않을 것이다. 그런데 @input은 사용자가 input란을 건드렸기에 다시 체크하라고 뜬다. 

위의 상황만 봐도 watch를 쓰는게 더 적절하게 보인다. 그리고 정의한 역할 자체도 watch가 더 맞다. watch는 값이 바뀌는 경우 사용자 입력으로 값이 변경된 경우, 코드로 값이 변경된 경우, 자동완성+초기화+라우팅으로 값이 변경된 모든 경우를 알아차린다. (그 외 더 다양한 이유로 watch를 쓰라고 한다) 만약 프로그램이 값을 세팅해놓은 어떤 경우라면 DOM 이벤트가 발생할 때 반응하는 input은 놓칠 수 있다.

Vue에서 DOM 이벤트를 등록할 때는 원래 v-on 디렉티브를 쓴다. v-on은 줄여서 @로 쓸 수 있다. @input은 v-on:input의 줄임말이다.

 

 

 

---

 

제가 이해한 걸 최대한 잘 적어보려고 노력했습니다.

내용 중에 틀린 내용이 있으면 댓글로 알려주세요 :-)
도움이 되셨으면 좋겠습니다.

 

🐳 화이팅 🐳

 

 

 

- watch

Vue.js

 

 

 

- event handling

Vue.js

 

 

 

- @input

Vue.js

 

 

 

- watch

Vue에서 중첩 데이터를 감시하는 법

 

 

 

-watch

Watch | Cracking Vue.js

 

 

 

- @input

vue input value 값 실시간 변경 감지

 

 

 

- v-on

v-model 대신 v-on를 사용해야하는 경우 (v-model 한글입력)