웹게임 개발기 (6) - 로그인/회원가입 관련 기능 활성화, 기능향상

저번에는 기본적인 로그인 및 회원가입을 진행하고, 이에 대한 결과로 token을 받아, 해당 token으로 동일 root URL의 다른 page로 갔을 때에도 token 정보로 유저정보를 불러오는 기능을 구현했다.

 

오늘은 그 과정에서 조금 더 고도화시키고, 놓쳤을만한 부분들을 둘러보며 보충개발을 하려고 한다.

 

1. 회원가입 시 비밀번호 규칙 검증

 

마이크로소프트에서 제시하는 안전한 비밀번호의 규칙은 최소 12자 이상, 대문자, 소문자, 숫자, 특수문자의 조합을 권하고 있다.

또한, 특정 단어나 유추가 가능한 사람의 이름과 같은 단어가 포함되면 안되며, 당연한 내용이지만 직전에 사용하던 비밀번호를 사용하면 안된다.

 

https://support.microsoft.com/en-us/windows/create-and-use-strong-passwords-c5cebb49-8c53-4f5e-2bc4-fe357ca048eb

Create and use strong passwords - Microsoft Support

 

그래서 회원가입 시점에 비밀번호를 하나하나 타이핑할때마다 해당내용이 조건을 충족하는지 보여주는 부분을 추가하였다.

 

이는 정규표현식을 통해 검증해낼 수 있는데 아래와 같은 정규표현식으로 8~14자의 알파벳 소문자, 대문자, 숫자, 특수기호를 포함하는 문자열인지 검증하는 정규표현식을 사용하였다.

// 8~12자, 알파벳 대문자, 소문자, 숫자, 특수기호를 포함하는 비밀번호에 대한 정규표현식
const passwordRegex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[^A-Za-z0-9]).{8,14}$/;

function isValidPassword(str) {
    return passwordRegex.test(str);
}

 

[그림] 비밀번호 검증을 위한 유한오토마타

 

2. 이메일 검증

또한, 이러한 정규표현식은 이메일을 검증할 때도 사용이 되는데, 이는 아예 유한오토마타 다이어그램으로 존재하고 있었다.

 

// email 검증을 위한 정규표현식
const emailRegex = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;

function isValidEmail(str) {
   return emailRegex.test(str);
}

 

https://stackoverflow.com/questions/201323/how-can-i-validate-an-email-address-using-a-regular-expression

How can I validate an email address using a regular expression?

 

오랜만에 보는 유한오토마타 다이어그램이라 감회가 새롭다. 컴파일러 수업시간에 다룬 이후로는 크게 접할 일이 없었는데 오랜만에 접하게 되었다.

[그림] email 검증을 위한 유한오토마타

 

3. 아이디 존재여부 검증

이 부분이 쓸모없이 많은 시간을 소모한 파트이다.

아이디 존재여부를 검증하면서 정상적으로 mongoDB에서 아이디의 갯수를 반환하여 아이디의 존재여부를 파악하는 방식이었는데, await을 활용하지 않고 결과값을 반영해버리니까 자꾸 쓰레기값을 읽어서 아이디 존재여부와 상관없이 모든 아이디를 사용가능하다(?)고 반환하는 현상이 벌어졌다.

async / await 개념은 따로 시간내어 다잡아야 할 것으로 사료된다.

 

이제야 좀 구색을 갖춘 형태로 사이트가 만들어진 것 같다.

회원가입 input의 값의 검증이 정상적으로 이루어져야만 회원가입버튼이 활성화되도록 만들었다.

 

이번 개발 내역은 아래 이슈에서 확인가능하다.

https://github.com/KerNYing/exitplan/issues/6

[feature/improvement#1] SignIn / SignUp 기능향상 · Issue #6 · KerNYing/exitplan