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

 

 

이름, 비밀번호, 전화번호를
패턴 체크를 했었다.
이번에는 아이디와 이메일을
중복 체크 해보자!

 

 

 

 

 

[ 회원가입 페이지 만들기 1편 : 이름, 패스워드, 전화번호 패턴 체크 ]

이곳에 들어가시면 페이지 동작 화면이 있고, 깃허브 링크를 통해 전체 코드를 확인하실 수 있습니다

[SpringBoot] (IntelliJ, vue.js, H2) 회원가입 페이지 만들기 1편 : dto 만들고, 입력값 패턴설정하기.

 

 

---

 

 

 

 

1.  어떻게 만들지 구상

• 처음에 생각한 화면

 

 

 

 

• 실제로 만든 화면

 

• 만들 방법

맨 처음에는 아래 캡쳐본처럼 구상하긴 했는데, 만들면서 수정된 부분이 많다. (사실 만든지 좀 돼서 잘 기억이 안난다...) 아무튼! 코드 좀 찾아보다가 대충 어떻게 만드는지 구조 파악하고 그냥 직접 하나하나 코드를 치기로 결심했다.(대학생때부터 프로젝트 해보면서 깨달은 결과는 내가 직접 공부해서 코드 치는게 빠르다는 것이다) 어디서 복붙할 생각이었는데, 역시 날로 먹기 쉽지 않다. 

userId가 백엔드로 넘어가면 거기서 중복 체크를 검사할 것이다. 그러면 중복 체크를 검사했는지 안했는지를 idDuplicate와 emailDuplicate의 boolean 값을 통해 확인할 것이다. 아래 캡쳐본에서는 기본값을 false로 설정했는데, 실제 코드는 true를 기본값으로 줬다.

중복 체크에 문제가 없었으면 vue에서 false 값으로 바꿔줄 것이고, 중복 체크에 문제가 있었으면 오류 메시지를 출력할 것이다.

그리고 처음 구상할 땐 생각을 못했는데, 아이디와 이메일을 중복 체크를 해둔 뒤 아이디와 이메일을 수정하게되면 이미 idDuplicate와 emailDuplicate가 false값으로 바뀌어서 가입이 성공한다. 이 부분도 함께 코드를 작성했다.

 

혼자 이렇게 구상해보는 편, 만들면서 수정함

 

 

- 참고

SpringBoot+Vue.js - 회원가입

 

 

 

 

---

 

 

 

 

 

2.  확인해야할 것

	이름	아이디	비밀번호
1	한글만 가능	앞글자는 무조건 영어	대문자, 특수문자 사용하여 8자 이상
2	2자이상 5자 이하	영어와 숫자가 함께	비밀번호와 비밀번호 확인이 다르면 가입 불허
3	정보 미기입시 가입 불허	중복체크	정보 미기입시 가입 불허
4		아이디 미입력시, 중복체크 버튼을 누르면 '아이디를 입력해주세요.' 멘트 출력
5		아이디 수정 후, 중복체크 다시 눌러야함
6		정보 미기입시 가입 불허
7		중복체크 안하면 가입 불허

 

 

	전화번호	이메일
1	한국 전화번호 표준에 맞춰 기입	이메일 표준에 맞춰 기입
2	정보 미기입시 가입 불허	이메일 미입력시, 중복체크 버튼을 누르면 '아이디 입력해주세요.' 멘트 출력
3		이메일 수정 후, 중복체크 다시 눌러야함
4		정보 미기입시 가입 불허
5		중복체크 안하면 가입 불허

 

 

 

 

---

 

 

 

3. vue 코드

<script>

import axios from "axios";

export default {
  name: 'BasicRegister',
  
/* 데이터 정의 */
  data() {
    return {
      name: "",
      userId: "",
      pwd: "",
      pwdConfirm: "",
      tel: "",
      birth: "",
      email: "",
      /* 중복 체크하는 데이터의 기본 값은 true로 설정함 */
      idDuplicate: true,
      emailDuplicate: true,
    };
  },

  /* 변경된 데이터는 다시 중복 체크를 하도록 true로 변경 */
  watch: {
    userId(newVal, oldVal) {
      this.idDuplicate = true;
    },
    email(newVal, oldVal) {
      this.emailDuplicate = true;
    }
  },

  methods: {
    /* 회원가입 */
    async register() {
      try {
       /* 아이디와 이메일 값이 true이면 아직 중복 체크가 되지 않았음 */
       if(this.idDuplicate === true) {
          alert("아이디 중복체크를 해주세요.")
          return;
        }

        if(this.emailDuplicate === true) {
          alert("이메일 중복체크를 해주세요.")
          return;
        }
        /* 해당 경로로 데이터를 보내고 성공시 알림이 가도록 */
        const res = await axios.post("http://localhost:8080/api/register", {
          name: this.name,
          userId: this.userId,
          pwd: this.pwd,
          pwdConfirm: this.pwdConfirm,
          tel: this.tel,
          birth: this.birth,
          email: this.email,
        });
        alert("회원가입에 성공했습니다.");
        this.$router.push({
          path: "/completeView",
          query: { userId: this.userId }
      })
      } catch (e) { /* 실패시 그에 맞는 메시지가 출력 */
        alert(e.response.data);
      }
    },
    /* id 중복 체크 */
    async checkIdDuplicate() {
      console.log("idDuplicate 버튼 클릭됨:", this.userId);
      try{  /* 해당 경로에 userId 데이터 값이 같이 감 */
        const res = await axios.post("http://localhost:8080/api/idDuplicate", {
          userId: this.userId
        });
        /* 성공이면 idDuplicate 값을 false로 바꿈 */
        alert("사용가능한 아이디입니다.");
        this.idDuplicate = false;
      } catch(e) { /* 실패면 여전히 idDuplicate 값은 true */
        alert(e.response.data);
        this.idDuplicate = true;
      }
    },
    /* 이메일 중복 체크 */
    async checkEmailDuplicate() {
      try { /* 경로에 email 데이터가 감 */
        const res = await axios.post("http://localhost:8080/api/emailDuplicate",{
          email: this.email
        }); /* 성공하면 emailDuplicate 값은 false로 바뀜 */
        alert("사용가능한 이메일입니다.");
        this.emailDuplicate = false;
      } catch (e) { /* 실패하면 여전히 true */
        alert(e.response.data);
        this.emailDuplicate = true;
      }
    }
  }
}
</script>

<template> 코드

/* 클릭하면 check~Duplicate 메서드가 실행된다 */

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

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

 

 

 

---

 

 

 

 

4.  IdDuplicate.class, EmailDuplicate.class (dto)

@Getter
@Setter
public class IdDuplicate {
    private String userId;
}

@Getter
@Setter
public class EmailDuplicate {
    private String email;
}

아이디와 이메일 중복체크 버튼을 누르면, 사용자가 입력한 데이터를 받아온다. 물론 아직은 평범한 클래스지만, 중복체크를 담당하는 컨트롤러에서 해당 클래스를 dto 클래스로 설정해 줄 것이다.

 

 

 

 

---

 

 

 

 

5. MemberRepository.interface

public interface MemberRepository extends JpaRepository<Member, Long> {
    boolean existsByUserId(String userId);
    boolean existsByEmail (String email);
}

MemberRepository는 DB에 직접 접근하는 계층이다. 여기서 existsByUserId와 existByEmail은 자동으로 SQL쿼리를 생성한다. 이때 중요한 점은 메서드 이름을 지을 때 규칙을 꼭 지켜야한다. [existBy+필드명]으로 지어야 오류가 발생하지 않는다. (필드명은 Member에 있는 이름대로 적어야 한다.)

 

 

 

 

---

 

 

 

 

6. MemberService.class

@Service
public class MemberService {

    // 레포지토리와 컨트롤러의 중간 역할이라 의존성 주입!
    @Autowired
    private MemberRepository memberRepository;
    
    // 패스워드 암호화
    @Autowired
    private PasswordEncoder passwordEncoder;

    // 레포지토리에서 userId 중복 검사할 메서드
    public Boolean existByUserId (String userId) {
        return memberRepository.existsByUserId(userId);
    }

    // 레포지토리에서 email 중복 검사할 메서드
    public Boolean existByEmail (String email) {
        return memberRepository.existsByEmail(email);
    }

   // 패스워드 레포지토리에 저장할 때 암호화 시킨 후 넣는 메서드
    public Member save(Member member) {
        member.setPwd(passwordEncoder.encode(member.getPwd()));
        return memberRepository.save(member);
    }
}

MemberService는 컨트롤러와 레포지토리 사이에서 중간 역할을 한다. 여기서 existByUserId와 existByEmail은 아까 MemberRepository에서 설정한 메서드를 그대로 가져오는 역할을 하고 있다.

처음에는 MemberServie를 건너뛰고 바로 레포지토리에서 설정한 메서드를 가져와 사용하려고 했다. 그런데 이렇게 레포지토리에서 가져와 바로 사용하게 되면, existByUserId와 existByEmail에 다른 기능을 추가하기 어려워질 수 있다. 지금은 실제로 서버를 열게 아니니까 캐시처리 등 다른 부가적인 기능이 없어서 MemberService에 코드를 추가한 게 의미 없어 보이지만, 후에 확장성을 고려하면 MemberService를 통하는 것이 좋다고 한다.

 

 

 

 

---

 

 

 

 

7. CheckId.class, CheckEmail.class

public class CheckId {

    private static final String ID_PATTERN = "^(?=.*\\d)[A-Za-z][A-Za-z0-9]{3,19}$";

    private static final Pattern pattern = Pattern.compile(ID_PATTERN);

    public static String checkId(String userId) {

        if(userId == null || userId.isBlank()) {
            return "아이디를 입력해주세요.";
        }
        if (!pattern.matcher(userId).matches()) {
            return "아이디의 첫글자는 영어이며, 영어와 숫자를 섞어 4자리 이상 20자리 이하만 가능합니다.";
        }

        return "ok";
    }
}

public class CheckEmail {

    private static final String EMAIL_PATTERN =
            "^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])+[.][a-zA-Z]{2,3}$";

    private static final Pattern pattern = Pattern.compile(EMAIL_PATTERN);

    public static String checkEmail(String email) {
        if(email == null || email.isBlank()) {
            return "이메일을 입력해주세요.";
        }
        if (!pattern.matcher(email).matches()) {
            return "이메일 양식을 확인해주세요.";
        }

        return "ok";
    }
}

아이디와 이메일 패턴 체크를 해줬다. 아이디는 맨 첫글자에 숫자가 올 수 없고, 전체적으로는 영어와 숫자만 올 수 있다. 그리고 이메일은 우리가 알고 있는 그런 양식의 패턴을 설정해줬다.

id와 email 칸에 null과 띄어쓰기 등 공백이 온 채 중복 체크 버튼을 누르면 아이디와 이메일을 입력해달라는 메시지가 출력된다.

 

 

 

 

 

---

 

 

 

 

8. MemberService.class

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:5173")
public class DuplicateController {

    // 의존성 주입
    // MemberServic에 있는 메서드 쓸거라서
    @Autowired
    private MemberService memberService;
    
	// id 패턴 체크 및 중복 확인	
    @PostMapping("/idDuplicate")
    public ResponseEntity<String> idDuplicate(@RequestBody IdDuplicate request) {

        // userId를 null, isblank, 패턴 검사
        String userId = request.getUserId();
        String checkResult = CheckId.checkId(userId);
        if (!"ok".equals(checkResult)) {
            return ResponseEntity.badRequest().body(checkResult);
        }

        // userId 중복 검사
        boolean existUserId = memberService.existByUserId(request.getUserId());
        if (existUserId == true) {
            return ResponseEntity.badRequest().body("id가 중복되었습니다.");
        } else {
            return ResponseEntity.ok("ok");
        }
    }
    
    // email 패턴 체크 및 중복 확인	
    @PostMapping("/emailDuplicate")
    public ResponseEntity<String> emailDuplicate(@RequestBody EmailDuplicate request) {

        // email null, isBlank, 패턴 검사하기
        String email = request.getEmail();
        String checkResult = CheckEmail.checkEmail(email);
        if (!"ok".equals(checkResult)) {
            return ResponseEntity.badRequest().body(checkResult);
        }

        // email 중복 검사
        boolean existEmail = memberService.existByEmail(request.getEmail());
        if (existEmail == true) {
            return ResponseEntity.badRequest().body("email이 중복되었습니다.");
        } else {
            return ResponseEntity.ok("ok");
        }
    }

}

보통은 사용자가 어떤 정보도 입력하지 않은 상태라면, 아이디 중복을 체크하는 버튼을 누르지 않았을 것이다. 그래서 아이디 중복 체크 버튼을 누르기 전은 무조건 아이디 중복 체크를 누르라는 오류 메시지가 alert되도록 했다. 그걸 가장 첫번째 오류 메시지로 뜨도록 설계했다.(vue에서 설정함) 아이디와 이메일이 null, blank 검사도 중복 버튼에서 수행했다. 왜냐면 어차피 idDuplicate와 emailDuplicate 데이터 값이 false로 바뀌지 않은 이상 SIGN UP 버튼은 중복을 검사하라는 메시지를 출력시킬테니까.

 

 

    // 매핑!
    @PostMapping("/idDuplicate")
    public ResponseEntity<String> idDuplicate(@RequestBody IdDuplicate request) {

id 버튼을 누르게 되면, vue에서 const res = await axios.post("http://localhost:8080/api/idDuplicate", { userId: this.userId });가 실행되도록 코드를 적었다. 여기에 보면 해당 주소가 위의 주소로 매핑되는걸 확인할 수 있다. 

보내진 JSON 바디는 이렇게 생겼을 것이다.

{
  "userId": "sori1234"
}​

 

그러면 @RequestBody는 HTTP  요청 바디를 자바 객체(DTO)로 변환해준다.  JSON의 "userId" : "sori1234" 값이 IdDuplicate.userId 필드에 자동으로 매핑된다. HttpMessageConverter는 Jackson 라이브러리인데 이게 JSON을 자바 객체로 바꿔준다.

 

 

        String userId = request.getUserId();
        String checkResult = CheckId.checkId(userId);
        if (!"ok".equals(checkResult)) {
            return ResponseEntity.badRequest().body(checkResult);
        }

그러면 자동으로 매핑된 userId를 가져왔고,  userId를 CheckId 클래스의 checkId 메서드로 보낸다. 그러면 null값인지, isBlank인지, 패턴은 맞는지 검사하고 결과 값을 checkResult에 담을 것이다. 그리고 checkResult 값이 ok이가 아니라면 그에 맞는 메시지를 return 한다.

idDuplicate 메서드의 반환타입은 ResponseEntity<String>인데, 이 이유가 상태 코드와 메시지를 같이 보내기 때문에 그렇게 설정했다.

 

 

        boolean existUserId = memberService.existByUserId(request.getUserId());
        if (existUserId == true) {
            return ResponseEntity.badRequest().body("id가 중복되었습니다.");
        } else {
            return ResponseEntity.ok("ok");
        }

이제 중복을 확인할 것이다. 중복을 체크할 때 필요한 클래스는 MemberService에 레포지토리의 메서드를 가져왔던 existByUserId이다. vue에서 받아온 userId가 (DTO 클래스로 받아둔) 레포지토리에 존재하는지 확인하는 메서드가 existByUserId가 된다.

아마 existByUserId에는 이런 코드가 생략되어 있을 것이다. 

select count(m) > 0
from Member m
where m.userId = :userId​

 
같은 userId가 있으면 true 값을, 없으면 false 값을 existUserId가 가질 것이다. 그래서 if 문으로 true 값을 가지면 id가 중복되었다는 메시지가 리턴되고, false 값이면 ok가 리턴되도록 했다.  

 

 

 

 

---

 

 

 

 

9. 다시 vue 코드

/* 데이터 정의 */
  data() {
    return {
      name: "",
      userId: "",
      pwd: "",
      pwdConfirm: "",
      tel: "",
      birth: "",
      email: "",
      /* 중복 체크하는 데이터의 기본 값은 true로 설정함 */
      idDuplicate: true,
      emailDuplicate: true,
    };
  },

처음엔 idDuplicate와 emailDuplicate가 true 값을 기본 값으로 가진다.

 

 

    /* id 중복 체크 */
    async checkIdDuplicate() {
      console.log("idDuplicate 버튼 클릭됨:", this.userId);
      try{  /* 해당 경로에 userId 데이터 값이 같이 감 */
        const res = await axios.post("http://localhost:8080/api/idDuplicate", {
          userId: this.userId
        });
        /* 성공이면 idDuplicate 값을 false로 바꿈 */
        alert("사용가능한 아이디입니다.");
        this.idDuplicate = false;
      } catch(e) { /* 실패면 여전히 idDuplicate 값은 true */
        alert(e.response.data);
        this.idDuplicate = true;
      }
    },

vue는 자바스크립트 구문을 사용하고 있다. try는 요청이 성공했을 때, catch는 요청에 실패했을 때 코드를 적어주면 된다.

return ResponseEntity.ok("ok");를 스프링이 보내 vue에서 받으면 200이란 상태코드를 받아서 성공했음을 의미한다. alert("사용가능한 아이디입니다.")가 출력되면서, this.idDuplicate를 false로 바꾼다. (여기서 this.은 현재 이곳 data에 정의된 값을 말한다)

실패하게되면 스프링에서 온 메시지가 출력되며 this.idDuplicate를 true로 바꾼다. 사실 this.idDuplicate = true를 안적어도 되는 것 같긴한데 (내 머릿 속 이론상..ㅎㅎ) 그냥 적어줬다. 확실히 바뀌지 않았음을 다시 한 번 각인하기 위해,,,

 

 

 

 

---

 

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

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

 

🐳 화이팅 🐳