"HA 1주일 전..."
정규 표현식 (Regular Expression)
정규 표현식 (Regular Expression), 또는 간단히 정규식 (regexp) 이라고 부르는 언어가 있습니다. 다른 언어들과 마찬가지로 자바스크립트에서도 지원하는 기능인데요. 위키백과에서는 이를 다음과 같이 설명하고 있습니다.
정규표현식 또는 정규식은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다.
쉽게 말해서 내가 검색하고자 하는 문자열들의 규칙을 찾아 정규 표현식으로 표현한다면, 일일히 많은 조건을 지정하지 않아도 원하는 결과를 찾아낼 수 있고 치환도 가능하다는 것인데요. 이렇게 말해서는 무엇인지 알기가 어려우니 정규 표현식이 무엇을 표현해줄 수 있는지를 한 번 예제를 통해 살펴보겠습니다.
정규 표현식의 사용 예제
let regExp = /^\d{2,3}-\d{3,4}-\d{4}$/;처음에는 이게 무슨 외계어인가 싶을 수도 있습니다. 차근차근 따라가다 보면 이게 뭔지 감을 잡으실 수 있을 것 같아요.
(물론 굳이 완벽하게 이해하고 바로 쓰려고 할 필요는 없다고 합니다. 도움을 주는 사이트도 많이 있구요. 필요한 경우에 찾아서 사용할 수 있을 정도로만 이해해도 충분합니다.)
먼저 가장 외부에 있는 / / 두 슬래쉬는 정규 표현식이 여기에서부터 여기까지라는 범위를 정해주는 것입니다. if 조건문을 사용할 때 괄호로 조건의 범위를 정해주는 것과 같다고 할 수 있겠네요. 그 다음에는 ^ 라는 문자가 있습니다. 뒤에는 $ 라는 문자가 있구요. 이 둘은 각각 시작과 끝을 나타냅니다.
\d 는 숫자를 나타냅니다. [0-9] 라고도 표현이 가능합니다. 뒤에 붙은 {2,3} 은 숫자가 최소 2개에서 3개까지라는 것을 의미합니다. - (하이픈) 은 숫자와 숫자 사이가 - 으로 연결되어 있다는 것을 의미합니다.
자 여기까지 이해하셨다면 위의 정규 표현식이 전화번호를 의미하고 있다는 것을 알아차리셨을 것 같습니다. "(2~3 자리의 숫자)-(3~4 자리의 숫자)-(4자리의 숫자)" 로 이루어진 전화번호의 규칙을 정규 표현식으로는 이렇게 표현할 수 있는 것이죠.
let regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;위의 예시는 이메일을 나타내는 또 다른 정규 표현식입니다. 아무리 많은 이메일도 이 표현식 하나로 체크할 수 있다는 점이 정규 표현식의 장점이라고 할 수 있겠네요. 물론 직접 만들어보라고 하면 만들 수 없을 것 같지만요..ㅋㅋ
참고할 만한 것들
나무위키의 정규 표현식 문서에서는 정규 표현식과 관련한 여러 사이트들을 안내하고 있습니다. 저도 다 들어가보지는 않았지만 일부를 소개해보려고 합니다.
정규 표현식을 더 공부해보고 싶으시다면 regexone.com 에서 퀴즈를 풀면서 차근차근 학습을 진행하실 수 있습니다.
정규 표현식이 잘 작동하는지를 확인하고 싶으시다면 regex101.com 을 추천합니다. 정규표현식의 마지막 / 뒤에 알파벳을 붙여서 옵션을 선택할 수 있는데요. 처음에 이걸 모르고 바로 가져왔다가 원하는대로 동작을 안해서 한참을 고생했었습니다. (실제 자바스크립트 상에서도 뒤에 특정 알파벳을 붙여 사용 가능합니다. 자세한 것은 mdn 문서를 참고하세요.)
이도저도 복잡하니 나는 바로 쓸만한 것을 알고싶으시다면 구글에서 자바스크립트 정규 표현식 * 와 같은 검색어로 * 부분에 원하는 검색어를 넣어 검색하시면 쉽게 정보를 찾으실 수 있습니다. 비밀번호, 이메일, 전화번호와 같은 정규 표현식은 아주 쉽게 검색이 가능합니다.
사실 오늘 배운 것들이 참 많지만, Toy problem 에서 정규 표현식으로 접근했다가 된통 깨지는 바람에 정규 표현식을 다뤄봤습니다. 어느 정도 이해했다고 생각했는데 이해한 게 아니었던 게 뭐 이것만은 아니겠지만 말이죠.
2개월 전의 나와 비교하면 정말 많은 걸 배웠고 사용할 수 있게 되었지만, 한편으로는 어느새 HA 가 눈 앞에 다가와 부담이 됩니다. 부디 이번에도 공부한 것들 잘 활용하고 잘 통과해서 다음 단계로 넘어갈 수 있었으면 좋겠습니다.
