Javascript 언어에 대하여… 2. 문자열과 정규표현식

💻 자바스크립트 Back to Basic (2)

10 min readMay 1, 2020

글 작성자: SoniaComp
공부한 기록을 공유하기 위한 글입니다. 수정할 내용이 있다면 알려주세요!

Table of the Contents
1. 문자열
1.1 자바스크립트의 기본 자료형 String
2. 정규표현식
2.1 정규표현식 만드는 두가지 방법
2.2 기본 정규표현식 기본 규칙
2.3 🔥 여섯문제로 정규표현식 끝내버리기

1. 문자열

🐥 병아리 개발자 SoniaComp의 붙임말
프론트엔드 개발을 하다보면, 사용자가 문자열로 입력할 때가 많다. 사용자가 제공하는 소중한 데이터들을 잘 가공하여 편리한 기능으로 보답하는 건 정말 중요하다! 실제로 프론트엔드 개발할 때도 가장 많이 사용하고, 고생하는 부분이었다. 지금 딱! 정리해보자!!

1.1 자바스크립트의 기본 자료형 String

문자열 접근
.charAt( index )
.subString( startIndex, endIndex )

문자열 비교 ( a < b)
a, b 중 더 짧은 문자열 길이만큼 비교

문자열 검색
.indexOf( searchValue [ , fromIndex ] ) — 찾지 못할 경우 -1
.startWith( Value ) 특정 값으로 시작
.endWith( Value ) 특정 값으로 끝

문자열 분해
.split( separator ) 문자열 배열 생성

문자열 바꾸기
.replace( string, replaceString )

2. 정규표현식

정규표현식 공부자료: MDN 문서, 그림으로 이해하는 정규표현식(Nextree 글)

🐥 SoniaComp의 붙임말
정규표현식: 검색패턴을 정의한 문자열 들의 집합
친구 개발자 Ryan Kim 이 정규 표현식 공부를 추천해줬는데, 그 이유는

정규표현식의 가장 큰 장점은 언어별로 정규표현식 규칙이 모두 동일하다는 점이다. 즉, 타언어로 넘어갈 때 소요되는 학습 시간 소요가 적다.

2.1 자바스크립트에서 정규 표현식을 만드는 두가지 방법

1) 정규식 리터럴(/로 감싸는 패턴) var re = /ab+c/;
→ 스크립트 불러올 때 컴파일: 상수 정규식 때 사용
2) RegExp 객체의 생성자 함수 호출 var re = new RegExp("ab+c");
→ 실행 시점에 컴파일: 사용자 입력에 따라 정규식 패턴이 변경될 때 사용

* RegExp 객체: 자바스크립트의 정규표현식에 사용할 수 있는 객체
RegExp의 생성자가 받는 매개변수
1) 필수 매개변수: 정규표현식
2) 선택 매개변수: 일치관련 설정
(i : 대소문자를 구분하지 않고 검색)
(g : 전역적으로, 일치하는 문자열들을 모두 찾음)
(m : 다중열 문자열에 대해서도 일치하는 문자열 검색)
RegExp의 내장함수
search( ) 문자열 내에 일치하는 문자열을 찾고, index를 return
match( ) 일치하는 문자열을 찾는다. 모든 일치하는 문자열 return
String 객체 내 RegExp를 인자로 받는 정규표현식 관련 함수
exec( ) 문자열 내에서 일치하는 문자열 찾기, 첫번째 문자열 return
test( ) 문자열 내에 일치하는 문자열 찾기, true 또는 false return

2.2 정규 표현식 기본 규칙

^ 문자열/줄의 시작
\d 모든 숫자
[abc] 괄호 내의 모든 문자
[^abc] 괄호 내의 문자들을 제외한 모든 문자
[0–9] 괄호 내의 모든 숫자
[⁰–9] 괄호 내의 숫자들을 제외한 모든 숫자
(x|y) x또는 y

2.3 여섯문제로 정복하는 정규표현식(그냥 지금 공부하고 끝내버려💃)

✅D-6 .숫자와 알파벳 만을 포함하는 문자: /[a-zA-Z0-9]
문제출처) 📕자바스크립트로 하는 자료구조와 알고리즘
해설)
[] 내에 있는 것들을 포함한 문자열. 즉,
a-z 소문자 알파벳을 포함하고, A-Z 대문자 알파벳을 포함하고, 0-9 숫자를 포함한 문자열
Test)
var reg = /[a-zA-Z0–9]/; reg.test(“hello”); // true
reg.test(“helloSONIA”); // true
reg.test(“Let’s Learn”); // true
reg.test(“javaScript v.10”); // true
reg.test(“!?”) // false

✅D-5. 부동소수점 문자 찾기: /^[0-9]*.[0-9]*[1-9]+$/문제출처) 📕자바스크립트로 하는 자료구조와 알고리즘
해설)
^[0-9]* : 시작하는 문자가^ 0–9 내의 모든 숫자[0–9] 중 0회 이상 반복* 되고
.[0-9]*[1-9]+$ : . 이후에. 0–9내의 모든 숫자[0–9]가 0회 이상 반복되고* 1–9사이의 숫자[1–9]가 1회 이상 반복+되는 문자로 끝남$
Test)
var reg = /^[0-9]*.[0-9]*[1-9]+$/; reg.test("123"); // false .이 없음 reg.test("123.0"); // false [1-9]로 끝이 나야함 reg.test("123.12"); // true

✅D-4. uri 쿼리 문자열 찾기: /([^?=&]+)(=([^&]*))?/문제출처) 📕자바스크립트로 하는 자료구조와 알고리즘
이 문제를 이해할 때 도움이 되는 공부자료) string.replace(MDN) 설명
해설)
( ) : 그룹으로 묶을 때 사용한다.
( ) ( ) : 앞에서부터 그룹번호를 부여해서 캡쳐한다. 배열 형식!
([^?=&]+) : ?, =, &이 존재하지 않는 문자열[^?=&]이 하나 이상 존재하는 그룹([]+)
(=([^&]*))? : =이 있고=, &이 존재하지 않는 문자열이 0개 이상 있는 그룹([^&]*) 의 표현식이 존재하거나 존재하지 않는?그룹 배열들
Test) 참고

var uri = "http://www.naver.com/search?category=picture&text=서울
// 정규표현식으로 이걸 쪼개서 DB 쿼리를 파싱해보자!
var queryString = { };// 설명 0
uri.replace( new RegExp("([^?=&]+)(=([^&]*))?", "g"), // 설명 2
             function($0, $1, $2, $3) {queryString[$1]=$3;} // 설명 1
);console.log(queryString['category']); // picture
console.log(queryString['text']); // 서울/ * 
  * 설명 0: str.replace(regexp, function)
  * regexp와 일치하는 항목은 지정된 함수가 반환한 값으로 대체됩니다
  * RegExp가 'g'일 경우, 모든 찾은 문자열마다, function이 호출됨
  * 
  * 설명 1: function($0, $1, $2, $3) 은 ( )( ) 순서와 $ 숫자 가 매치 됩니다
  * $0은 전체, $1은 첫번째 ( ), $2는 두번째 ( )
  * 
  * 설명 2: $1 (처음에는 ?=&이 없는 문자열 그룹), $2(=을 포함하고 &이 없는 문자열(존재해도 되고, 안해도 되고)), $3($2이 존재한다면 =을 제외하고 &이 없는 문자열)
  * // *
  * 따라서 이 정규 표현식은
  * $0, $1, $2, $3
  * 첫번째 RegExp: http://www.naver.com/search, http://www.naver.com/search, undefined, undefined
  * 두번째 RegExp: category=picture, category, =picture, picture
  * 세번째 RegExp: text=서울, text, =서울, 서울
  * /

✅D-3. to를 포함하는 단어 제외: /\b(?:(?!to)\w)+\b/g문제 출처) HAMA 블로그
해설) 단어 경계\b 사이에 \b ( )+ \b to가 없는 그룹(?!to)을 포함하지 않는 문자\w 는 [A-Za-z0–9_]와 같다 가 하나 이상 있는 문자열을 전역으로 찾기/g
Test)
var reg = /\b(?:(?!to)\w)+\b/g; console.log(reg.test(“let’s”)); // true console.log(reg.test(“tutorial”)); // false console.log(reg.test(“let’s tutorial”)); // true

✅D-2. 이메일: /^[0–9a-zA-Z]([-_\.]?[0–9a-zA-Z])*@[0–9a-zA-Z]([-_\.]?[0–9a-zA-Z])*\.[a-zA-Z]{2,3}$/i문제 출처) HAMA 블로그
해설) 시작을 숫자나 영문자로 하고^[0–9a-zA-Z], 그 후에 [ -_.같은 문자가 있을수도 없을수도 있고[-_\.]?, 그 후 숫자나 영문자들[0–9a-zA-Z]] 덩어리( )가 없거나 연달아 나올 수 있다*. @ 은 반드시 존재하고@, 그 후 숫자나 영문자, 없을수도 있고 연달아 나올수도 있는 덩어리가 있다.[0–9a-zA-Z]([-_\.]?[0–9a-zA-Z])* .이 반드시 존재하고., 소문자나 대문자 영문자가 2개나 3개[a-zA-Z]{2,3}로 끝난다$. 이 모든 것은 대소문자 구분하지 않는다/i.

✅D-1. 핸드폰번호: /^01([0|1|6|7|8|9]?)-?([0–9]{3,4})-?([0–9]{4})$/문제 출처) HAMA 블로그
해설) 01로 시작하고^01, 그 이후 0,1,6,7,8,9 중 한 숫자가 있거나 없을수 있다.[0|1|6|7|8|9]? -이 있을 수도 없을수도 있고-?, 0–9 숫자 중[0–9] 3,4개가 나온다.{3,4} -이 있을 수도 있고-? 0–9숫자가 4개[0–9]{4}로 끝이 난다.$

✳️플러스 문제: 최종보스!! URL: ^(https?):\/\/([^:\/\s]+)(:([^\/]*))?((\/[^\s/\/]+)*)?\/?([^#\s\?]*)(\?([^#\s]*))?(#(\w*))?$문제 출처) HAMA 블로그
해설) http나 https로 시작하고^(https?), ://가 어지며:\/\/, :나 /나 공백문자\s가 없는[^:\/\s] 문자열들이 이어지고+, :으로 시작하고 /이 없는 문자열들이 이어질 수 있고(:([^\/]*))?, /으로 시작하고, 공백문자나 /이 없는 문자열이 없거나 하나이상 존재할 수도 있다.((\/[^\s/\/]+)*)?/이 존재하거나 존재하지 않을 수 있고\/?, #, 공백문자, ?이 1개 이상 존재하지 않는다[^#\s\?]*. ? 이후에 #이나 공백문자가 존재하지 않은 문자열이 나올 수 있다(\?([^#\s]*))?. # 이후에 문자열이 있을 수 있다(#(\w*))?.

3. 인코딩과 암호화

인코딩: 컴퓨터 과학 분야에서 효율적인 전송과 저장을 위해, 문자들을 특수 포맷으로 표현하는 개념

3.1 Base64 인코딩

btoa( ) : 문자열로부터 Base64 인코딩된 ASCII 문자열 생성. (각 문자는 byte로 취급됨)
atob( ) : Base64로 인코딩된 자료의 문자열을 디코딩함
🔎문자열 단축 알고리즘 보러가기

3.2 암호화

TLS: 서버와 클라이언트(브라우저) 간에 암호화 된 연결을 수립하기 위한 표준 보안 기술
→ 서버는 비대칭 암호화를 사용해 다양한 키를 암호화, 복호화 한다.
→ 브라우저는 대칭 키를 사용해 자료를 암호화하고 복호화 한다.
1) 서버는 브라우저에게 자신의 비대칭 공개키를 전송한다.
2) 브라우저는 현재 세션을 위한 대칭 키를 생성한다. 해당 키는 서버의 비대칭 공개 키로 암호화 한다.
3) 서버는 자신의 비밀 키로 브라우저의 세션을 복호화 해 세션 키를 추출한다.
4) 두 시스템 모두 세션 키를 가지고 있고, 서버와 브라우저는 세션 키를 사용해 자료를 안전하게 전송한다.
🔎RSA 암호화 알고리즘 보러가기