[SpringBoot] (IntelliJ, vue.js, H2) 회원가입 페이지 만들기 1편 : dto 만들고 이름, 패스워드, 전화번호 패턴 체크 만들기.

 

 

 

대부분의 웹사이트는
회원가입과 로그인 기능을 가진다.
그 중 회원가입 기능을 만들어보자!

 

 

 

 

 

1.  화면 동작과 전체코드

• 회원가입 영상

 

 

 

 

• 회원가입 중복

 

 

 

• 디렉토리와 클래스

 

 

 

• Vue와 Spring을 연결해주는 dto 

Register-Web-backend/src/main/java/com/example/JoinWeb/dto at master · hyeong-ing/Register-Web-backend

 

 

 

• 사용자의 입력값 패턴 체크

Register-Web-backend/src/main/java/com/example/JoinWeb/register/check at master · hyeong-ing/Register-Web-backend

 

 

 

• 회원가입 컨트롤러 + 아이디,이메일 중복체크 컨트롤러

Register-Web-backend/src/main/java/com/example/JoinWeb/register/controller at master · hyeong-ing/Register-Web-backend

 

 

 

• 입력된 정보를 레포지토리와 연결할 Member, MemberService

Register-Web-backend/src/main/java/com/example/JoinWeb/register at master · hyeong-ing/Register-Web-backend

 

 

 

• 레포지토리

Register-Web-backend/src/main/java/com/example/JoinWeb/repository at master · hyeong-ing/Register-Web-backend

 

 

 

• 회원가입 vue 

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

 

 

 

 

---

 

 

 

 

 

2.  어떻게 만들지 구상

• 처음에 생각한 화면

 

 

 

 

• 실제로 만든 화면

이름, 아이디, 비밀번호, 전화번호, 이메일은 모두 패턴체크가 들어간다. 패턴에 어긋나면 경고창이 출력된다. 그리고 아이디와 이메일은 중복체크를 해야한다. 중복체크를 하지 않으면 경고창이 출력된다.

 

 

 

 

---

 

 

 

 

3.  확인해야할 것

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

 

 

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

 

 

 

 

---

 

 

 

 

 

4.  RegisterRequest.class (dto)

DTO (Data Transfer Object, 데이터 전송 객체)

: 프로세스 간에 데이터를 전달하는 객체를 의미하며, 복잡한 로직 없이 순수하게 전달하고 싶은 데이터만 담고 있다.

 

@ToString
@Getter
@Setter
public class RegisterRequest {

    private String name;
    private String userId;
    private String pwd;
    private String pwdConfirm;
    private String tel;
    private String birth;
    private String email;

}

 

@ToString

: 객체의 모든 필드 값을 문자열로 보기 좋게 출력한다.

 

@Getter

: 객체 안에 저장된 값을 꺼내서 읽는 메서드를 자동으로 생성한다.

 

@Setter

: 객체 안의 값을 변경/저장하는 메서드를 자동으로 생성한다.

 

사용자가 정보를 입력하면, 입력한 데이터는 RegisterRequest 클래스의 필드에 저장된다. 물론 현재 클래스에서 할 수 있는 것은 없다. 이렇게 만들어두면 나중에 회원가입을 처리하는 컨트롤러에서 RegisterRequest 클래스를 dto로 사용하여 사용자의 데이터를 전달받는다.

현재 코드에서 @ToString은 필요하진 않다. 오히려 없어야하는 코드로, 입력값이 제대로 전달되고 있는지 확인하기 위해 초반에 설정해둔 코드였다.(혹시 필요한 분을 위해 적어둔다) 만약 @ToString을 설정해둔 채 배포를 하게되면 비밀번호까지 노출되어 보안 사고로 이어지니 삭제하는 것이 안전하다. 그리고 @ToString.Exclude를 이용해 비밀번호 필드를 출력 대상에서 제외할 수 있으니 알아두면 좋을 것 같다.

 

 

+ 추가 정보

@NotBlank
@Pattern(regexp = "^[가-힣]{2,5}$", message = "이름은 2-5글자 한글만 가능합니다.")
private String name;

 

@NotBlank

: null, "", "  "을 모두 허용하지 않는다.

 

@Pattern

: 요청 값이 정규표현식에 맞는 문자열인지 검증한다.

 

처음에는 위의 코드처럼 dto에서 입력값에 조건을 붙였다.(다양한 상황에 맞게 alert 문구를 남기고 싶어서 나중엔 바꿨다)

null과 "" 그리고 "  "와 같이 무조건 글자가 하나라도 들어오도록 @NotBlank를 설정할 수 있다. 그리고 더 구체적인 요청 값은 @Pattern으로 설정할 수 있다. 물론 나는 아예 따로 클래스를 만들어서 설정했다. 그러나 이렇게 간단하게 dto에서 해결하는 방법도 있으니 알아두면 좋을 것 같다.

컨트롤러에 @Valid를 붙여야하는 등 사용법(?)에 대한 예시 코드가 있으니 구체적으로 알고 싶으면 아래 출처를 누르면 된다.

 

 

 

- @NotNull, @NotEmpty, @NotBlank 차이점과 예시 코드

[Spring Boot] @NotNull, @NotEmpty, @NotBlank 의 차이점 및 사용법

 

 

 

 

---

 

 

 

 

5.  Check

♠ 중복체크 때문에 이메일과 아이디는 다음 블로그에서 다루도록 하고 여기서는 이름, 패스워드, 전화번호만 올리겠습니다. ♠ 

• CheckName

public class CheckName {

    private static final String NAME_PATTERN = "^[가-힣]{2,5}$";

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

    public static String checkName(String name) {

        if(name == null || name.isBlank()) {
            return "성함을 입력해주세요.";
        }
        if (!pattern.matcher(name).matches()) {
            return "성함은 2~5글자의 한글만 가능합니다.";
        }

        return "ok";
    }

}

^[가-힣]{2,5}$를 한 번 해체해보자. ^와 $는 앵커라는 것으로 문자열의 시작과 끝을 나타내며, 전체 패턴에 완전히 일치해야한다. [가-힣]는 한글의 모든 음절을 나타내며, 한글만 가능하도록 설정했다. 영어도 가능하게 하려면 [A-Za-z]를 붙이면 된다. {2, 5}는 2-5글자로 길이를 제한했다.

이렇게 설정한 NAME_PATTERN을 컴파일해서 pattern 객체로 만들었다. 사실 해당 코드를 복붙해와서 사용했기 때문에, 왜 private static final이 붙는지까진 몰랐다. 이렇게 블로그를 정리하다보면 단순히 넘어갔던 코드들도 돌아보게 된다. pattern 객체에 private static final을 붙여 싱글톤 객체로 만든 이유는 정규식을 해석해 내부 상태로 바꾸는 비용이 드는 작업이라 재사용이 중요해서라고 한다. 이렇게 컴파일을 해두면 매칭 비용만 지불하게 되니 더 효율적이라고 한다.

이름란에 null 값이 들어오거나, 글자가 들어오지 않으면 "성함을 입력해주세요."라는 문구가 뜨도록 설정했다. 그리고 정규식이 불일치하면 "성함은 2~5글자의 한글만 가능합니다." 문구가 출력되도록 했다. 문제가 없으면 "ok"를 반환한다.

여기서 두가지 사실을 알게됐다. 첫번째는 띄어쓰기를 넣으면 matches가 발동되어  "성함은 2~5글자의 한글만 가능합니다." 경고창이 출력된다. null 값만 "성함을 입력해주세요."라고 뜬다. 그리고 두번째는 어차피 matches로 패턴을 체크하기 때문에 앵커를 쓰지 않아도 된다는 것이다. matcher( ).matches 자체가 문자열 전체 일치를 검사하기 때문에 앵커를 빼도 잘 돌아간다.

정말로 웹사이트를 열기 위함이 있거나 퀄을 높이려면 반환값도 String이 아닌, boolean+메세지 혹은 enum 혹은 예외/에러코드로 구조화하면 사용성이 더 높이는 걸 추천한다. 

 

 

 

• CheckPwd

public class CheckPwd {

    private static final String PASSWORD_PATTERN =
            "^(?=.*[A-Z])(?=.*[0-9])(?=.*[a-z])(?=.*[!@#$%^&*()-+=]).{8,}$";

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

    public static String checkPwd(String pwd, String pwdConfirm) {
        if(pwd == null || pwd.isBlank()) {
            return "패스워드를 입력해주세요.";
        }
        if (pwdConfirm == null || pwdConfirm.isBlank()) {
            return "패스워드 확인란을 입력해주세요.";
        }
        if (!pwd.equals(pwdConfirm)) {
            return "패스워드가 일치하지 않습니다.";
        }
        if (!pattern.matcher(pwd).matches()) {
            return "패스워드에 대문자와 특수문자가 포함된 8글자 이상이어야합니다.";
        }

        return "ok";
    }

 

CheckPwd 클래스에서는 pwd와 pwdConfirm에 입력된 값이 동일한지 확인해야한다. 컨트롤러에서 CheckPwd 클래스로 매개변수 pwd와 pwdConfirm을 보낼 것이다. 그럼 CheckPwd 클래스에서 받은 두 인자 값이 동등한지 equals를 통해 확인할 것이다.

 

 

 

• CheckTel

public class CheckTel {

    private static final String TEL_PATTERN = "^01(?:0|1|[6-9])[-](\\d{3}|\\d{4})[-](\\d{4})$";

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

    public static String checkTel(String tel) {
        
        if(tel == null || tel.isBlank()) {
            return "휴대폰 번호를 입력해주세요.";
        }
        if (!pattern.matcher(tel).matches()) {
            return "휴대폰 번호 양식은 010-0000-0000 입니다.";
        }

        return "ok";
    }
}

 

 

 

 

---

 

 

 

 

6. RigisterController

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

    @Autowired
    private MemberService memberService;

    @PostMapping("/register")
    public ResponseEntity<String> register(@RequestBody RegisterRequest request) {

        // 이름 체크
        String nameCheckResult = CheckName.checkName(request.getName());
        if (!"ok".equals(nameCheckResult)) {
            return ResponseEntity.badRequest().body(nameCheckResult);
        }

        // 패스워드 체크
        String pwdCheckResult = CheckPwd.checkPwd(request.getPwd(), request.getPwdConfirm());
        if (!"ok".equals(pwdCheckResult)) {
            return ResponseEntity.badRequest().body(pwdCheckResult);
        }

        // 폰넘버 체크
        String telCheckResult = CheckTel.checkTel(request.getTel());
        if (!"ok".equals(telCheckResult)) {
            return ResponseEntity.badRequest().body(telCheckResult);
        }

        // 출력용 -> 없애야하는 코드
        System.out.println("=========================");
        System.out.println("회원가입 정보가 들어왔습니다.");
        System.out.println("=========================");
        System.out.println(request);
        System.out.println("=========================");
        
        
        // 확인이 끝난 데이터는 member에 저장
        Member member = new Member();
        member.setName(request.getName());
        member.setUserId(request.getUserId());
        member.setPwd(request.getPwd());
        member.setTel(request.getTel());
        member.setBirth(request.getBirth());
        member.setEmail(request.getEmail());

        memberService.save(member);
        
        
        // 회원가입 허가
        return ResponseEntity.ok("ok");
    }
}

다른 포스팅에서 위의 코드는 더 자세하게 살펴보기로 하고, 패턴 체크에 관련된 전반적인 코드만 설명하겠다. @RequestBody RegisterRequest request로 vue에서 보낸 JSON 데이터를 RegisterRequest DTO로 변환해서 받는다. 그리고 ResponseEntity<String>은 응답을 상태 코드와 body 형태로 돌려주는 타입이다. 위의 코드에서 가입에 성공하면  200 OK + "ok"가 보내진다.

String nameCheckResult = CheckName.checkName(request.getName()); 코드를 보자. request.getName( )은 사용자가 입력한 이름을 가져온다. 이때 dto에 설정했던 Getter가 호출된다. 그리고 가져온 이름은  CheckName.checkName으로 CheckName 클래스로 향해 만들어둔 if문을 거치게 된다. 만약 if문을 통과하면 "ok"가 넘어갈 것이고, if문에 걸리면 그에 맞는 문자열이 넘어간다.

if (!"ok".equals(nameCheckResult)) 넘어간 결과값이 ok가 아니라면? ResponseEntity.badRequest().body(nameCheckResult);으로 "성함은 한글로 작성하셔야합니다."가 body에 담기고 400 Bad Request 응답을 보내게 된다. 이제 프론트는 해당 메시지를 받아 사용자 화면에 출력시킨다.

 

 

 

 

 

---

 

 

아래에 출처를 남겨두겠습니다.
블로그엔 제가 최대한 이해한 내용까지만 적는거라
출처에 들어가시면 더 많은 내용이 있어 공부하시는데 도움되실겁니다.

 

🪽

틀린 내용이 있다면 댓글로 알려주세요

 

 

---

 

 

- 올바른 패스워드 작성 규칙

올바른 패스워드 작성규칙(길이 vs 복잡도)

 

 

 

- 앵커

앵커: 문자열의 시작 ^과 끝 $

 

 

 

- 정규표현식

정규표현식

 

 

 

- 패스워드 정규식

[JAVA] 정규식을 이용하여 패스워드 Validator 만들기!

 

 

 

- ResponseEntity

ResponseEntity의 사용법 및 유지보수

 

 

 

- Lombok

@Getter and @Setter