✏️정규식 뽀개기
1. 정규표현식(Regular Expression)
정규표현식(Regular Expression)은 정규식 이라고도 한다. 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다.
크롤링 데이터 파싱, 머신러딩 데이터 전처리 등을 진행하며 다루었던 기억이 있는데, 회원가입 시 받는 다양한 정보들의 형식을 체크하는 데에도 사용할 수 있다니. 정규표현식은 정말 여러 분야에서 유용하게 사용되고 있는 것 같다. 👍
정규식을 처음 접한다면 굉장히 눈에 잘 들어오지도 않고, 어렵게 느껴지기 마련이다.
인터넷에 아이디 정규식, 비밀번호 정규식 등을 검색하면 정말 많은 예시들이 나오지만. 개발을 하며 모르는 코드를 가져다 쓰는 것은 폭탄을 심는 것과 같기에, 정규표현식 핵심을 다시 한 번 정리하고 사용하고자 한다.
2. 정규 표현식 문법 정리
a. 정규표현식 생성
정규표현식은 ‘/’로 감싸거나 RegExp의 생성자를 호출하여 생성할 수 있다.
1
2
const re=/abc/
const re=new RegExp('abc')
b. 패턴 작성
아래는 단순 패턴이다. 문자 그대로 정확히 “abc”와 정확히 같아야 일치한다.
1
const re=/abc/
특수문자 * 은 앞의 문자기 0번 이상 반복되는 패턴이다. ac, abc, abbc, abbbc 모두 이 패턴과 일치한다.
(추가 필요)
1
const re=/ab*c/
이스케이핑 패턴을 정의할 때 특수문자를 사용하다보니, 해당 특수문자와 일치하는 패턴을 작성할 때에는 이스케이프 문자를 사용하여야 한다. 역슬래시 ‘'를 사용한다. 다음 패턴은 *가 반복의 의미가 아니게 되어 ‘ab*c’라는 문자와 일치한다.
1
const re=/ab\*c/
괄호
반복과 그룹 등에서 사용된다
(추가 필요)
3. 정규표현식 사용법
이렇게 만든 정규표현식은 RegExp 객체로서 exec()와 test() 메소드를 사용할 수 있고, String의 메소드 match(), replace(), search(), split()와도 사용할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
const re=/abc/
value='target-value'
<!-- RegExt Method -->
re.text(value)
re.exec(value)
<!-- String Method -->
value.match(re)
value.search(re)
...
간략히 설명하면 exec()는 일치 정보를 반환하고, text()는 일치 여부를 boolean 형태로 반환한다. 기존의 String 메소드의 인자로 사용하여 일치하는 패턴들을 치환, 분할, 검색 할 수 있다.
4. 회원가입 정규표현식
POOL React Native 프로젝트 회원가입에서 사용한 정규표현식 예제도 정리한다. validation을 체크하는 함수들을 하나의 파일로 작성하여, 회원가입시 체크할 때 import 하여 사용하였다.
a. 아이디
아이디는 영문소문자, 숫자만 사용 가능하며 최소 3자 ~ 최대 20자를 입력하도록 설정했다.
조건 불만족시 TextInput 영역 하단에 어떤 조건이 맞지 않는지 경고 문구를 띄워주는데, 알려줄 조건이 너무 많았다. (알파벳 대문자를 사용한 경우, 한글을 사용한 경우, 특수문자를 사용한 경우 등등…)‼️
그래서 경고의 가짓수를 줄이기 위해, 아이디의 경우는 ReplaceKorean을 두어서 한글은 입력조차 되지 않도록 처리했다. (어이쿠 뒤늦게 알파벳 대문자도 거르도록 작성했으니 함수 명을 수정해두어야겠다!..ㅎ😆)
1
2
3
4
5
6
7
8
9
export function CheckUserName(value: string) {
const re = /^(?=.*[a-z0-9])[a-z0-9]{3,20}$/;
return re.test(value);
}
export function ReplaceKorean(value: string) {
const re = /[가-힣ㄱ-ㅎㅏ-ㅣA-Z]/g;
return value.replace(re, '');
}
b. 닉네임
닉네임은 영문, 국문, 숫자, 특수문자(언더바_)만 사용가능, 최소 3자 ~ 최대 20자로 설정했다. 아이디보다 뭔가 복잡해보이지만, 사용 가능한게 많아서 그렇다. 사실상 예외처리는 아이디보다 덜 해도 돼서 편하다.
1
2
3
4
export function CheckNickName(value: string) {
const re = /^(?=.*[a-zA-Z0-9가-힣_])[a-zA-Z0-9가-힣_]{3,20}$/;
return re.test(value);
}
c. 전화번호
전화번호는 슬래시 없이 11자리 숫자로 설정했다. 정규식을 보면 시작은 01 로 시작해야하고 그 다음에는 0, 1, 6, 7, 8, 9 중에 하나가 와야한다. 그 다음은 숫자 3자리 혹은 4자리가 올 수 있고, 마지막에는 숫자 4자리가 오는 정규표현식이다.
시작 번호 010, 011 까지도 익숙한데 016 ~ 019는 낯설다😶
1
2
3
4
export function CheckPhoneNumber(value: string) {
const re = /^01(?:0|1|[6-9])(?:\d{3}|\d{4})\d{4}$/;
return re.test(value);
}
d. 비밀번호
비밀번호는 8자 이상, 알파벳, 숫자, 특수문자 각 1개 이상 포함하도록 설정했다. 특수문자는 아래 입력된 @$!%*#?& 만 가능하다.
1
2
3
4
export function CheckPassword(value: string) {
const re = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]/;
return re.test(value);
}
e. 생년월일
생년월일은 6자리로 입력받았고, 년도, 월, 일 기준에 맞추어 정규식을 작성한다.
년도는 0~9의 숫자 두개로 이루어지고, 월은 십의자리가 0이고 일의자리가 1~9 이거나, 십의자리가 1이고 일의자리가 0~2인경우로 이루어진다. 날짜도 그렇게 십의자리가 1,2,3일 경우에 맞추어 작성해준다.
이 정규식의 문제점은 일수가 적은 2월의 경우 31일이 입력이 가능하다는 점이다. 여유가 될 때 보완해보아야겠다!😆
1
2
3
4
export function CheckBirthday(value: string) {
const re = /([0-9]{2}(0[1-9]|1[0-2])(0[1-9]|[1,2][0-9]|3[0,1]))/;
return re.test(value);
}