📘 미루고 미루던 정규표현식 공부!

부트캠프 코스란 자고로 쉴새없는 새 스택과 새 기술 학습의 연속! 우선순위를 설정하고 선택과 집중을 하는 것이 무엇보다 중요하다. 그런 부트캠프 학습과정 중 가차없이 탈락된 학습 파트가 있었으니... 정규 표현식! 인간에게 이다지도 친화적인 자바스크립트를 공부하는 내게 정규표현식은 유독 👽 외계어👽 같았고, 코스에서도 자주 사용하는 정규 표현식은 검색해서 우선 가져다 써도 무방하다고 이야기해주어 나는 일말의 부담감 없이 정규표현식을 늘 봐도 못 본 척하며 미뤄왔다!

정규표현식을 마주할 때면 늘, "그래, 이 걸 내가 직접 작성할 일이 얼마나 되겠어...!"라며 애써 학습 필요를 외면했지만, 요 근래에 정규표현식을 직접 작성해야 할 일이 연달아 몇 번씩이나 생기게 되었다.

문자열을 두 개의 인자로 split 해줄 때!

최근 코딩테스트 준비 겸 매일 아침 알고리즘 문제를 한 문제씩 풀면서 "문자열을 두 개 이상을 기준으로 split"해주고 싶은 상황이 자주 있었다. 예를 들어 "9+3*8-10+5+1"과 같은 문자열이 주어졌을 때 연산기호들을 기준으로 split을 해주고 싶은 상황!

그럴 때 마다 여러 차례 split() 메서드를 써주어야 하는 점이 늘 어딘가 불편했다. 불편함은 감수한다 치더라도, 코드가 장황해지고 복잡해졌다... 물론 꼭 split 하나 때문만은 아니었겠지만...!
모쪼록 그래서 여러 개의 기준점을 갖고 split을 해주는 방법을 서치하면 늘 정규표현식을 인자로 넘겨주면 된다는 답이 제시되었다.

테스트 코드 작성 시, 필요!

최근 나는 NextJS에 너무 너무 진심이고, 강의를 듣기 시작했는데, 시작부터 테스트 코드를 세팅하면서 정규표현식을 또 다시 마주하게 되었다...!

그래서 생각하게 되었다...
이제는 더 이상 물러날 곳이 없다!

---

정규표현식은 패턴🧩과 플래그🚩

말 그대로 이다. 우선 정규 표현식은 패턴과 플래그로 구성된다. 패턴과 플래그라 함은 아래와 같다.

기본적으로,

• 패턴: 문자열의 일정한 규칙을 표현한다.
• 플래그: 정규표현식의 검색 방식을 설정한다.

패턴에 대해서 알아보자! 😯

• 우선 패턴은 /로 열고 닫으며, 문자열의 따옴표는 생략한다! (따옴표를 패턴 안에 포함시키면, 따옴표까지를 하나의 패턴으로 포함해 검색한다.)
• 패턴은 아래와 같이 다양한 표현식을 활용한다.

출처: https://velog.io/@denmark-choco/javascript-%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D

출처: https://aftersiesta.tistory.com/3

그렇다면 지금껏 자주 사용해오던 정규표현식을 분석해보자!
다음은 아이디로 사용 가능한지 검사하는 정규표현식이다.

위 패턴을 종합해서 분석해보면 결국,
위 정규표현식은 "임의의 알파벳 대문자, 소문자, 숫자로 이루어진 문자가 4, 10번 반복되는 형태의 문자열"을 나타냄을 알 수 있다.

그렇다면 플래그는 무엇? 🧐

플래그는 앞서 살펴보았다시피 정규표현식의 검색 방식을 설정하기 위해 사용한다.
플래그의 의미는 다음과 같다.

• i : Ignore Case, 말 그대로 대소문자를 구별하지 않고 패턴을 검색한다.
• g: Global, 대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색한다. (이 옵션을 주지 않으면 첫 번째로 검색되는 패턴만 반환)
• m: Multi Line: 문자열의 행이 바뀌더라도 패턴 검색을 계속한다.

위 세 플래그가 상대적으로 중요하고 자주 사용되는 플래그들이다.
이 외에도 s, u, y 등의 플래그들이 존재하지만, 상대적으로 자주 사용되지 않는다.

• s:.이 개행 문자 \n도 포함하도록 ‘dotall’ 모드를 활성화한다.
• u: 유니코드 전체를 지원한다.
• y: 문자 내 특정 위치에서 검색을 진행한다.

정규표현식 메서드!

자바스크립트에서 정규표현식을 리터럴로 생성할 수도 있지만, RegExp 생성자 함수를 통해서도 생성할 수 있다. 그말인 즉, RegExp라는 생성자 함수가 존재한다는 것이다!

콘솔에 RegExp.prototype을 입력하면 아래와 같은 출력을 살펴볼 수 있다.
정규표현식에는 다양한 메서드들 (+프로퍼티들)이 있음을 알 수 있다.
이 중 몇 가지만 살펴보면!

RegExp.prototype.exec

const target = "Is this all there is?";
const regExp = /is/;

regExp.exec(target);
// ['is', index: 5, input: 'Is this all there is?', groups: undefined]

위 메서드는 인수로 전달 받은 문자열에 대해 정규 표현식의 패턴을 검색해 매칭 결과를 배열로 반환하고, 매칭 내역이 없으면 null을 반환한다.

RegExp.prototype.test

const target = "Is this all there is?";
const regExp = /is/;

regExp.test(target);
// true

test는 해당 정규표현식 패턴에 해당하는 패턴이 있는지 없는지를 불리언 값으로 반환한다!

일단 퇴각!

정규표현식의 전체 컨셉은 이와 같다. 지금 당장 세세한 기호들을 하나하나 외울 필요는 없겠다.
전체 컨셉을 명확하게 이해했고, 중요한 패턴 기호들과 플래그, 메서드들을 알아두었으니 이제 실전에서 필요할때 활용하면서 감을 익혀야겠다.
약간 초등학생 일기 같이 마무리 된 것 같은데... 아무튼!