초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)

민태 김
민태 김Programmer at 우아한형제들
Regular! 
Expressions 
for Beginners g 
^.*?$[]()[]:= 
/bysKimsminstae/gmi
/…/ 
gim 
AA BB Aa Bb $12,000 
[“AA ”] 
1 match
/…/ 
gim 
AA BB Aa Bb $12,000 
1 match 
정규표현식 
시작,종료 기호 
플래그 
[“AA ”]
/…/ 
gim 
AA BB Aa Bb $12,000 
1 match 
검색 대상! 
문자열 
[“AA ”]
/…/ 
gim 
AA BB Aa Bb $12,000 
1 match 
정규식과 일치한 문자열 
[“AA ”]
/…/ 
AA BB Aa Bb $12,000 
추출된 문자들 
[“AA ”] 
1 match 
gim
입력된 표현식이 없으면 일치한 문자열도 없음 
// 
AA BB Aa Bb $12,000 
[ ] 
no match
입력된 문자와 일치한 첫 번째 문자를 찾고 반환 
/A/ 
AA BB Aa Bb $12,000 
[“A”] 
1 match
/A/ 
AA BB Aa Bb $12,000 
[“A”, “A”, “A”] 
3 matches 
g 
대상 문자열 전체로 검색 대상을 지정! 
정규식 패턴에 일치하는 모든 문자(열) 반환
/A/ 
AA BB Aa Bb $12,000 
[“A”, “A”, “A”, “a”] 
4 matches 
gi 
알파벳 대소문자 구분 무시 
i 플래그의 영향으로 소문자 a 도 일치됨
/AA/ 
AA BB Aa Bb $12,000 
[“AA”, “Aa”] 
2 matches 
gi 
문자열 패턴
임의의 문자 하나를 의미하는 메타 문자 마침표(.) 
/./ 
AA BB Aa Bb $12,000 
[“A”] 
1 match
두 개의 마침표는 문자 두 개가 결합된 문자열과 일치 
/../ 
AA BB Aa Bb $12,000 
[“AA”] 
1 match
/.../ 
AA BB Aa Bb $12,000 
[“AA ”] 
1 match
대상 문자열 전체를 선택하는 방법?! 
대상 문자열의 문자 갯수 만큼 마침표를 입력 
/………………/ 
AA BB Aa Bb $12,000 
[“AA BB Aa Bb $12,000”] 
1 match
대상 문자열의 길이가 너무 길거나 알 수 없다면? 
/./ 
AA BB Aa Bb $12,000 
[“A”] 
1 match
g 플래그로 마침표 패턴 일치 결과를 대상 문자열 전체로 확장 
/./ 
g 
AA BB Aa Bb $12,000 
그러나 전체 문자열이 아닌 모든 문자가 분해되어 반환 
[“A”, “A”, “ ”, “B”, “B”, “ ”, “A”, “a”, “ ”, “B”, “b”, “ ”, “$”, “1”, “2”, “,”, “0”, “0”, “0” ] 
19 matches
/.+/ 
AA BB Aa Bb $12,000 
[“AA BB Aa Bb $12,000”] 
1 match 
앞에 있는 패턴의 반복을 지시하는 메타 문자 
앞선 패턴(마침표, 즉 모든 문자)의 ! 
불일치가 발생할 때 까지 반복 시킴 
모든 문자의 불일치가 대상 문자열 끝까지 ! 
일어나지 않았기 때문에 결국 대상 문자열 전체가 일치
/A+/ 
AA BB Aa Bb $12,000 
[“AA”] 
1 match 
A 문자 패턴이 반복되고 공백 문자를! 
만나는 순간 A 문자 패턴의 불일치가! 
발생하여 AA 까지만 일치됨 
공백 문자를 만나 불일치!!
/A+/ 
AA BB Aa Bb $12,000 
[“AA”, “A”] 
2 matches 
g 
대상을 전체로 확대하여 ! 
A 문자 하나가 추가로 일치
/A+/ 
AA BB Aa Bb $12,000 
[“AA”, “Aa”] 
2 matches 
gi 
대소문자 구분을 무시! 
따라서 Aa 패턴도 일치
A or B or … 조건의 패턴 정규식 
// 
AA BB Aa Bb $12,000 
[ ] 
no match
파이프 문자(|)는 OR를 의미! 
좌측과 우측의 패턴 중 하나와 일치하면 일치 
/A|B/ 
AA BB Aa Bb $12,000 
[“A”, “A”, “B”, “B”, “A”, “B”] 
6 matches 
g
분해되지 않은 문자열을 얻기위해! 
/A+|B+/ 
AA BB Aa Bb $12,000 
[“AA”,“BB”, “A”, “B”] 
4 matches 
g 
반복 메타 문자 사용
문자 집합 메타 문자! 
문자 집합 내에 포함된 문자는 OR 로 작동 
/[AB]/g 
AA BB Aa Bb $12,000 
[“A”, “A”, “B”, “B”, “A”, “B”] 
6 matches
앞선 패턴의 반복을 지정! 
앞선 패턴이 그룹(문자 집합, 하위 표현식 등)이면 ! 
그룹 전체가 반복의 대상이 됨 
/[AB]+/ 
AA BB Aa Bb $12,000 
[“AA”,“BB”, “A”, “B”] 
4 matches 
g 
반복 대상
범위 지정 메타 문자 마이너스(-)! 
왼쪽 문자를 시작으로 오른쪽 문자까지 순차적으로 문자를 증가! 
[A-Z] 는 [ABCDEGHIJKLMNOPQRSTUVWXYZ] 과 동일! 
문자 집합 내에서만 사용 가능 
/[A-Z]+/ 
AA BB Aa Bb $12,000 
[“AA”,“BB”, “A”, “B”] 
4 matches 
g
범위는 하나의 패턴으로 취급! 
모든 대문자 알파벳, 모든 소문자 알파벳을 의미 
/[A-Za-z]+/ 
AA BB Aa Bb $12,000 
[“AA”,“BB”, “Aa”, “Bb”] 
4 matches 
g
$12,000 추출하기 
// 
AA BB Aa Bb $12,000 
[ ] 
no match
일치되지 않음! 
“$” 문자는 정규식 내에서 특별한! 
기능을 가진 메타 문자기 때문 
/$12,000/ 
AA BB Aa Bb $12,000 
[ ] 
no match 
g
/$12,000/ 
AA BB Aa Bb $12,000 
[“$12,000”] 
1 match 
g 
역슬래쉬(  )! 
메타 문자를 일반 문자로 취급! 
$ 정규식은 $ 문자와 일치
$ 이후 숫자를 한정하지 않기 위해 ! 
0-9 문자집합 사용, 그러나 $ 이후! 
숫자 하나만 일치 
/$[0-9]/ 
AA BB Aa Bb $12,000 
[“$1”] 
1 match 
g
문자 집합을 반복 일치! 
콤마(,)가 나타나 일치가 중단되어! 
$12 까지만 일치 
/$[0-9]+/ 
AA BB Aa Bb $12,000 
[“$12”] 
1 match 
g
문자집합에 콤마(,)도 추가하여! 
금액 전체를 일치시킴 
/$[0-9,]+/ 
AA BB Aa Bb $12,000 
[“$12,000”] 
1 match 
g
/$[0-9,]+/ 
AA BB Aa Bb $12,000.00 
[“$12,000”] 
1 match 
g 
금액에 소숫점이 있다면?
문자집합에 마침표( . ) 추가 
/$[0-9,.]+/ 
AA BB Aa Bb $12,000.00 
[“$12,000.00”] 
1 match 
g
마침표( . )는 문자 집합 [ ] 밖에서는! 
임의의 한 문자를 의미하는 메타문자로 작동! 
문자 집합 밖에서 마침표를 일치시키기 위해선! 
역슬래쉬 사용 
/./ 
AA BB Aa Bb $12,000.00 
[“.”] 
1 match 
g
특별한 기능을 가진 메타 문자가 있다! 
d 는 숫자를 의미함. [0-9] 와 같다 
/d/ 
AA BB Aa Bb $12,000.00 
[“1”, “2”, “0”, “0”, “0”, “0”, “0”] 
7 matches 
g
대문자 D 는 숫자의 반대 즉, ! 
숫자가 아닌 모든 문자를 의미 
/D/ 
AA BB Aa Bb $12,000.00 
[“A”, “A”, “ ”, “B”, “B”, “ ”, “A”, “a”, “ ”, “B”, “b”, “ ”, “$”, “,”, “.”] 
15 matches 
g
w 는 영문자를 의미! 
[a-zA-Z_0-9] 의 축양형! 
* 영문자에 언더바 (_)와 숫자가 포함된다 
/w/ 
AA BB Aa Bb $12,000.00 
[“A”, “A”, “B”, “B”, “A”, “a”, “B”, “b”, “1”, “2”, “0”, “0”, “0”, “0”, “0”] 
15 matches 
g
대문자 W 는 영문자 이외의 모든 문자를 의미! 
[^a-zA-Z_0-9] 의 축약형! 
* 캐럿(^) 은 문자 집합의 반대(Not)를 의미 
/W/ 
AA BB Aa Bb $12,000.00 
[“ ”, “ ”, “ ”, “ ”, “$”, “,”, “.”] 
7 matches 
g 
공백도 당연히 독립된! 
하나의 문자다
http: 또는 https: 문자열 찾기 
// 
http: vs. https: or httpss: What’s the difference? 
[ ] 
no match
http: 로는 https: 와 httpss: 를 찾지 못함 
/http:/ 
http: vs. https: or httpss: What’s the difference? 
[“http:”] 
1 match 
g
s 를 추가하면 http: 와 httpss: 가 일치되지 않음 
/https:/ 
http: vs. https: or httpss: What’s the difference? 
[“https:”] 
1 match 
g
/http:|https:/ 
http: vs. https: or httpss: What’s the difference? 
[“http:”, “https:”] 
2 matches 
g 
OR를 이용하여 http: 와 https: 를 찾을 수 있다! 
그러나 정규식이 과도하게 길어짐
앞에 문자가 없거나 1번이상! 
나타나는 패턴과 일치시킴 
/https*:/ 
http: vs. https: or httpss: What’s the difference? 
[“http:”, “https:”, “httpss:”] 
3 matches 
g 
앞에 문자 s 가 없거나 1번 이상! 
반복되는 패턴과 일치 
일치되길 원하지 않는 httpss: 문자열도 일치됨
앞에 문자가 없거나 1번만! 
나타나는 패턴과 일치시킴 
/https?:/ 
http: vs. https: or httpss: What’s the difference? 
[“http:”, “https:”] 
2 matches 
g 
s가 두번 반복되기 때문에 일치되지 않음
HTTP URL 추출하기 
// 
http://www.static.com:8080/a.jpg 
A: https://admin.static-best.io/show?no=1 
B: https://static-best.site.org/show.jsp?no=1 
http://static best.net/#!/ibare 
http://static.net/#!/ibare 
[ ] 
no match
/https?:/ 
http://www.static.com:8080/a.jpg 
A: https://admin.static-best.io/show?no=1 
B: https://static-best.site.org/show.jsp?no=1 
http://static best.net/#!/ibare 
http://static.net/#!/ibare 
[ ] 
5 matches 
g 
프로토콜 문자열 일치
두 개의 슬래쉬 문자는 정규식 내에서 메타 문자이기 때문에! 
/https?:/// 
http://www.static.com:8080/a.jpg 
A: https://admin.static-best.io/show?no=1 
B: https://static-best.site.org/show.jsp?no=1 
http://static best.net/#!/ibare 
http://static.net/#!/ibare 
[ ] 
5 matches 
g 
역슬래쉬를 이용하여 표현
호스트 문자열 지정! 
그러나 호스트 문자열은 www 뿐만 아닌, ! 
적시할 수 없는 임의의 문자열 패턴 
/https?://www/ 
[ ] 
1 match 
g 
http://www.static.com:8080/a.jpg 
A: https://admin.static-best.io/show?no=1 
B: https://static-best.site.org/show.jsp?no=1 
http://static best.net/#!/ibare 
http://static.net/#!/ibare
메타 문자 w 사용. 알파벳과 숫자를 일치시키도록 변경 
/https?://w/ 
[ ] 
5 matches 
g 
http://www.static.com:8080/a.jpg 
A: https://admin.static-best.io/show?no=1 
B: https://static-best.site.org/show.jsp?no=1 
http://static best.net/#!/ibare 
http://static.net/#!/ibare
패턴의 불일치가 발생할 때 까지 반복 지정 
/https?://w+/ 
[ ] 
5 matches 
g 
http://www.static.com:8080/a.jpg 
A: https://admin.static-best.io/show?no=1 
B: https://static-best.site.org/show.jsp?no=1 
http://static best.net/#!/ibare 
http://static.net/#!/ibare
너무 많은 도메인 문자 패턴이 존재하여 안티 패턴 사용! 
도메인 문자로 사용할 수 없는 문자 이외의 문자가 일치되도록 패턴 변경! 
캐럿(^)은 문자 집합내에서 NOT 을 의미 
/https?://[^:/s]/ 
[ ] 
5 matches 
g 
http://www.static.com:8080/a.jpg 
A: https://admin.static-best.io/show?no=1 
B: https://static-best.site.org/show.jsp?no=1 
http://static best.net/#!/ibare 
http://static.net/#!/ibare
문자 집합을 반복시켜 도메인 주소 끝까지 확장! 
그러나 잘못된 도메인도 일치되는 문제점 발생 
/https?://[^:/s]+/ 
[ ] 
5 matches 
g 
http://www.static.com:8080/a.jpg 
A: https://admin.static-best.io/show?no=1 
B: https://static-best.site.org/show.jsp?no=1 
http://static best.net/#!/ibare 
http://static.net/#!/ibare 
공백 문자가 포함된 잘못된 도메인
도메인 문자의 마지막은 마침표와 알파벳으로 끝나는 패턴 삽입 (.com, .io 등)! 
잘못된 도메인이 일치되는 문제점 수정 
/https?://[^:/s]+.w+/ 
[ ] 
4 matches 
g 
http://www.static.com:8080/a.jpg 
A: https://admin.static-best.io/show?no=1 
B: https://static-best.site.org/show.jsp?no=1 
http://static best.net/#!/ibare 
http://static.net/#!/ibare
도메인의 포트 지정 (:80, :8080 등) 은 도메인에 포함되기 위해 포트 형식 패턴 추가! 
그러나 포트가 없는 (생략된) 도메인이 모두 일치되지 않는 문제점 발생 
/https?://[^:/s]+.w+:d+/ 
[ ] 
1 match 
g 
http://www.static.com:8080/a.jpg 
A: https://admin.static-best.io/show?no=1 
B: https://static-best.site.org/show.jsp?no=1 
http://static best.net/#!/ibare 
http://static.net/#!/ibare
없거나, 1번만 나오는 패턴과 일치하는 메타 문자 물음표(?)를 사용! 
포트 지정 패턴은 하나의 문자 패턴이 아니기 때문에 하위 표현식 괄호 ()를 이용하여 그룹화 함! 
문자 집합과 마찮가지로 하나의 패턴 그룹으로 지정 
/https?://[^:/s]+.w+(:d+)?/ 
[ ] 
4 matches 
g 
http://www.static.com:8080/a.jpg 
A: https://admin.static-best.io/show?no=1 
B: https://static-best.site.org/show.jsp?no=1 
http://static best.net/#!/ibare 
http://static.net/#!/ibare
대상 문자열의 첫 번째 나타나는 문자 지정 메타 문자 캐럿(^)! 
문자 집합 밖에서의 캐럿은 대상 문자열의 첫 번째를 의미함 
/^https?://[^:/s]+.w+(:d+)?/ 
[ ] 
1 match 
g 
http://www.static.com:8080/a.jpg 
A: https://admin.static-best.io/show?no=1 
B: https://static-best.site.org/show.jsp?no=1 
http://static best.net/#!/ibare 
http://static.net/#!/ibare
대상 문자열의 줄바꿈을 인식하여 멀티 라인 모드 사용 플래그! 
멀티 라인 모드 활성화의 결과로 캐럿의 효과가 각 라인으로 확대 ! 
각 라인의 첫 번째에서 시작되는 도메인만 일치됨 
/^https?://[^:/s]+.w+(:d+)?/ 
[ ] 
2 matches 
gm 
http://www.static.com:8080/a.jpg 
A: https://admin.static-best.io/show?no=1 
B: https://static-best.site.org/show.jsp?no=1 
http://static best.net/#!/ibare 
http://static.net/#!/ibare
.brand { 
반복 패턴 사용 
//g 
font-size: 22px; 
color: #ff0000; 
background-color: #00ff00; 
border-color: #ddd; 
margin: 10px 10px 10px 5px; 
padding: 2em 1em 2em 1em; 
} 
[ ] 
no match
#으로 시작되는 16진수 컬러값을 추출하기 위한 문자 집합 패턴 
.brand { 
/#[0-9A-Fa-f]/g 
font-size: 22px; 
color: #ff0000; 
background-color: #00ff00; 
border-color: #ddd; 
margin: 10px 10px 10px 5px; 
padding: 2em 1em 2em 1em; 
} 
[ ] 
3 matches
동일한 패턴을 하나 더 추가 
/#[0-9A-Fa-f][0-9A-Fa-f]/g 
.brand { 
font-size: 22px; 
color: #ff0000; 
background-color: #00ff00; 
border-color: #ddd; 
margin: 10px 10px 10px 5px; 
padding: 2em 1em 2em 1em; 
} 
[ ] 
3 matches
동일한 패턴을 세 번 반복 
/#[0-9A-Fa-f][0-9A-Fa-f][0-9A-Fa-f]/g 
.brand { 
font-size: 22px; 
color: #ff0000; 
background-color: #00ff00; 
border-color: #ddd; 
margin: 10px 10px 10px 5px; 
padding: 2em 1em 2em 1em; 
} 
[ ] 
3 matches
같은 패턴의 반복 횟수를 지정할 수 있는 메타 문자 { } 사용! 
앞의 패턴을 반복 횟수를 지정 
/#[0-9A-Fa-f]{6}/g 
.brand { 
font-size: 22px; 
color: #ff0000; 
background-color: #00ff00; 
border-color: #ddd; 
margin: 10px 10px 10px 5px; 
padding: 2em 1em 2em 1em; 
} 
[ ] 
2 matches
6번 반복되는 컬러값 외에도 3번 반복되는 컬러값 패턴도 대응하기 위해! 
3번 반복 패턴을 OR 로 추가 
/#[0-9A-Fa-f]{6}|[0-9A-Fa-f]{3}/g 
.brand { 
font-size: 22px; 
color: #ff0000; 
background-color: #00ff00; 
border-color: #ddd; 
margin: 10px 10px 10px 5px; 
padding: 2em 1em 2em 1em; 
} 
[ ] 
3 matches
반복 지정을 { from, to } 로 할 수 있음! 
앞선 패턴이 3번 이상 6번 이하 반복되는 패턴으로 정규식을 간소화 시킴 
/#[0-9A-Fa-f]{3,6}/g 
.brand { 
font-size: 22px; 
color: #ff0000; 
background-color: #00ff00; 
border-color: #ddd; 
margin: 10px 10px 10px 5px; 
padding: 2em 1em 2em 1em; 
} 
[ ] 
3 matches
컬러값의 마지막이 항상 세미콜론(;) 으로 끝나기 때문에 ! 
반복 횟수 지정을 사용하지 않고 세미콜론까지 무한 반복 형태로 변경! 
그러나 추출된 문자열에 세미콜론까지 포함되는 문제점 발생 
/#[0-9A-Fa-f]+;/g 
.brand { 
font-size: 22px; 
color: #ff0000; 
background-color: #00ff00; 
border-color: #ddd; 
margin: 10px 10px 10px 5px; 
padding: 2em 1em 2em 1em; 
} 
[ ] 
3 matches
패턴을 일치시키는 위치를 지정하는 위치 지정 메타 문자 중 ! 
전방 탐색 연산자를 (?=) 사용하여 추출시 세미콜론을 제거 
/#[0-9A-Fa-f]+(?=;)/g 
.brand { 
font-size: 22px; 
color: #ff0000; 
background-color: #00ff00; 
border-color: #ddd; 
margin: 10px 10px 10px 5px; 
padding: 2em 1em 2em 1em; 
} 
[ ] 
3 matches 
전방 탐색 방향 후방 탐색 방향 
* 후방 탐색 (?<=) 연산자는 Javascript! 
정규식에서 지원되지 않는다
<article> 
역참조를 이용한 범위 지정 
//g 
<h1>Tim Cook didn't address Apple's real privacy problem</h1> 
<h2>Tim Cook didn't address Apple's real privacy problem</h2> 
<h2>Tim Cook didn't address Apple's real privacy problem</h2> 
<h3>Tim Cook didn't address Apple's real privacy problem</h1> 
<h4>Tim Cook didn't address Apple's real privacy problem</h4> 
</article> 
[ ] 
no match
<article> 
<h1>과 </h1> 문자열 사이의 모든 문자를 찾는다 
/<h1>.+</h1>/g 
<h1>Tim Cook didn't address Apple's real privacy problem</h1> 
<h2>Tim Cook didn't address Apple's real privacy problem</h2> 
<h2>Tim Cook didn't address Apple's real privacy problem</h2> 
<h3>Tim Cook didn't address Apple's real privacy problem</h1> 
<h4>Tim Cook didn't address Apple's real privacy problem</h4> 
</article> 
[ ] 
1 matches
<article> 
h1, h2, h3 … h6 까지 종류를 확대하기 위해 문자 집합 사용! 
<h3>…</h1> 처럼 짝이 맞지 않는 잘못된 문자열도 일치되는 문제가 존재 
/<h[1-6]>.+</h[1-6]>/g 
<h1>Tim Cook didn't address Apple's real privacy problem</h1> 
<h2>Tim Cook didn't address Apple's real privacy problem</h2> 
<h2>Tim Cook didn't address Apple's real privacy problem</h2> 
<h3>Tim Cook didn't address Apple's real privacy problem</h1> 
<h4>Tim Cook didn't address Apple's real privacy problem</h4> 
</article> 
[ ] 
5 matches
일치된 하위 표현식()을 지정하는 역참조를 사용하여 앞선 하위 표현식과 동일한 패턴으로 일치시킴! 
<article> 
역참조로 인해 <h3> … </h1> 패턴은 일치되지 않음! 
하위 표현식 () 이 1개 이상일 경우 순차적으로 1, 2, 3 과 같이 지정 
/<h([1-6])>.+</h1>/g 
<h1>Tim Cook didn't address Apple's real privacy problem</h1> 
<h2>Tim Cook didn't address Apple's real privacy problem</h2> 
<h2>Tim Cook didn't address Apple's real privacy problem</h2> 
<h3>Tim Cook didn't address Apple's real privacy problem</h1> 
<h4>Tim Cook didn't address Apple's real privacy problem</h4> 
</article> 
[ ] 
4 matches 
1
Code (Javascript) 
var targetText = “http: vs. https: or httpss:”; 
var matches = targetText.match(/https?:/g); 
! 
console.log(matches); 
> Array [“http:”, “https:”] 
targetText = targetText.replace(/https?:/g, “protocol”); 
console.log(targetText); 
> “protocol vs. protocol or httpss:”
Reference 
• http://en.wikipedia.org/wiki/Regular_expression 
• http://www.regexr.com/ 
• http://www.regexper.com/
Regular! 
Expressions 
for Beginners 
/bysKimsminstae/gmi 
.+end$/g 
*참고: 이 문서는 정규 표현식의 기본적인 작성 방법을 학습하기위해 작성되었습니다. 
따라서 다루지 않은 내용이 존재합니다. 정규 표현식은 프로그래밍 언어에 따라 문법 
과 기능의 차이가 존재합니다. 기본적인 작동 방식은 유사하나 다루는 프로그래밍 
언어에 따른 추가 학습이 필요합니다.
1 of 76

Recommended

Aws개념 EC2로 API서버 구축 by
Aws개념 EC2로 API서버 구축Aws개념 EC2로 API서버 구축
Aws개념 EC2로 API서버 구축Gi Bong Kim
4.8K views26 slides
Git - Level 2 by
Git - Level 2Git - Level 2
Git - Level 2민태 김
19.7K views76 slides
모바일 메신저 아키텍쳐 소개 by
모바일 메신저 아키텍쳐 소개모바일 메신저 아키텍쳐 소개
모바일 메신저 아키텍쳐 소개Hyogi Jung
23.2K views37 slides
이벤트 기반 분산 시스템을 향한 여정 by
이벤트 기반 분산 시스템을 향한 여정이벤트 기반 분산 시스템을 향한 여정
이벤트 기반 분산 시스템을 향한 여정Arawn Park
13.6K views65 slides
우아한테크세미나-우아한멀티모듈 by
우아한테크세미나-우아한멀티모듈우아한테크세미나-우아한멀티모듈
우아한테크세미나-우아한멀티모듈용근 권
4.4K views242 slides
마이크로서비스 아키텍처로 개발하기 by
마이크로서비스 아키텍처로 개발하기마이크로서비스 아키텍처로 개발하기
마이크로서비스 아키텍처로 개발하기Jaewoo Ahn
33.6K views46 slides

More Related Content

What's hot

Mongo DB 성능최적화 전략 by
Mongo DB 성능최적화 전략Mongo DB 성능최적화 전략
Mongo DB 성능최적화 전략Jin wook
17.6K views33 slides
[Spring Camp 2018] 11번가 Spring Cloud 기반 MSA로의 전환 : 지난 1년간의 이야기 by
[Spring Camp 2018] 11번가 Spring Cloud 기반 MSA로의 전환 : 지난 1년간의 이야기[Spring Camp 2018] 11번가 Spring Cloud 기반 MSA로의 전환 : 지난 1년간의 이야기
[Spring Camp 2018] 11번가 Spring Cloud 기반 MSA로의 전환 : 지난 1년간의 이야기YongSung Yoon
12.4K views83 slides
3.2 javascript regex by
3.2 javascript regex3.2 javascript regex
3.2 javascript regexJalpesh Vasa
420 views21 slides
bamboo 로 PHP 프로젝트 지속적인 배포 by
bamboo 로 PHP 프로젝트 지속적인 배포bamboo 로 PHP 프로젝트 지속적인 배포
bamboo 로 PHP 프로젝트 지속적인 배포KwangSeob Jeong
6.2K views24 slides
Cache in API Gateway by
Cache in API GatewayCache in API Gateway
Cache in API GatewayGilWon Oh
2K views40 slides
[수정본] 우아한 객체지향 by
[수정본] 우아한 객체지향[수정본] 우아한 객체지향
[수정본] 우아한 객체지향Young-Ho Cho
20.1K views173 slides

What's hot(20)

Mongo DB 성능최적화 전략 by Jin wook
Mongo DB 성능최적화 전략Mongo DB 성능최적화 전략
Mongo DB 성능최적화 전략
Jin wook17.6K views
[Spring Camp 2018] 11번가 Spring Cloud 기반 MSA로의 전환 : 지난 1년간의 이야기 by YongSung Yoon
[Spring Camp 2018] 11번가 Spring Cloud 기반 MSA로의 전환 : 지난 1년간의 이야기[Spring Camp 2018] 11번가 Spring Cloud 기반 MSA로의 전환 : 지난 1년간의 이야기
[Spring Camp 2018] 11번가 Spring Cloud 기반 MSA로의 전환 : 지난 1년간의 이야기
YongSung Yoon12.4K views
3.2 javascript regex by Jalpesh Vasa
3.2 javascript regex3.2 javascript regex
3.2 javascript regex
Jalpesh Vasa420 views
bamboo 로 PHP 프로젝트 지속적인 배포 by KwangSeob Jeong
bamboo 로 PHP 프로젝트 지속적인 배포bamboo 로 PHP 프로젝트 지속적인 배포
bamboo 로 PHP 프로젝트 지속적인 배포
KwangSeob Jeong6.2K views
Cache in API Gateway by GilWon Oh
Cache in API GatewayCache in API Gateway
Cache in API Gateway
GilWon Oh2K views
[수정본] 우아한 객체지향 by Young-Ho Cho
[수정본] 우아한 객체지향[수정본] 우아한 객체지향
[수정본] 우아한 객체지향
Young-Ho Cho20.1K views
Spring Cloud Workshop by YongSung Yoon
Spring Cloud WorkshopSpring Cloud Workshop
Spring Cloud Workshop
YongSung Yoon2.8K views
AI 연구자를 위한 클린코드 - GDG DevFest Seoul 2019 by Kenneth Ceyer
AI 연구자를 위한 클린코드 - GDG DevFest Seoul 2019AI 연구자를 위한 클린코드 - GDG DevFest Seoul 2019
AI 연구자를 위한 클린코드 - GDG DevFest Seoul 2019
Kenneth Ceyer3.1K views
카카오 광고 플랫폼 MSA 적용 사례 및 API Gateway와 인증 구현에 대한 소개 by if kakao
카카오 광고 플랫폼 MSA 적용 사례 및 API Gateway와 인증 구현에 대한 소개카카오 광고 플랫폼 MSA 적용 사례 및 API Gateway와 인증 구현에 대한 소개
카카오 광고 플랫폼 MSA 적용 사례 및 API Gateway와 인증 구현에 대한 소개
if kakao18.9K views
DevNexus 2020 "Break me if you can: practical guide to building fault-toleran... by Alex Borysov
DevNexus 2020 "Break me if you can: practical guide to building fault-toleran...DevNexus 2020 "Break me if you can: practical guide to building fault-toleran...
DevNexus 2020 "Break me if you can: practical guide to building fault-toleran...
Alex Borysov592 views
Introduction to SASS by Jon Dean
Introduction to SASSIntroduction to SASS
Introduction to SASS
Jon Dean13K views
네이버 오픈세미나 백엔드_아키텍쳐 by NAVER D2
네이버 오픈세미나 백엔드_아키텍쳐네이버 오픈세미나 백엔드_아키텍쳐
네이버 오픈세미나 백엔드_아키텍쳐
NAVER D219.9K views
Postman과 Newman을 이용한 RestAPI 테스트 자동화 가이드 by SangIn Choung
Postman과 Newman을 이용한 RestAPI 테스트 자동화 가이드 Postman과 Newman을 이용한 RestAPI 테스트 자동화 가이드
Postman과 Newman을 이용한 RestAPI 테스트 자동화 가이드
SangIn Choung13.7K views
200.마이크로서비스에 적합한 오픈소스 WAS는 무엇? by Opennaru, inc.
200.마이크로서비스에 적합한 오픈소스 WAS는 무엇?200.마이크로서비스에 적합한 오픈소스 WAS는 무엇?
200.마이크로서비스에 적합한 오픈소스 WAS는 무엇?
Opennaru, inc. 1.1K views
JavaScript Fetch API by Xcat Liu
JavaScript Fetch APIJavaScript Fetch API
JavaScript Fetch API
Xcat Liu1.6K views
Web assembly 맛보기 by GyeongSeok Seo
Web assembly 맛보기Web assembly 맛보기
Web assembly 맛보기
GyeongSeok Seo11.9K views
REST: From GET to HATEOAS by Jos Dirksen
REST: From GET to HATEOASREST: From GET to HATEOAS
REST: From GET to HATEOAS
Jos Dirksen48.3K views
Athena & Step Function 으로 통계 파이프라인 구축하기 - 변규현 (당근마켓) :: AWS Community Day Onl... by AWSKRUG - AWS한국사용자모임
Athena & Step Function 으로 통계 파이프라인 구축하기 - 변규현 (당근마켓) :: AWS Community Day Onl...Athena & Step Function 으로 통계 파이프라인 구축하기 - 변규현 (당근마켓) :: AWS Community Day Onl...
Athena & Step Function 으로 통계 파이프라인 구축하기 - 변규현 (당근마켓) :: AWS Community Day Onl...
Coder sans peur du changement avec la meme pas mal hexagonal architecture by Thomas Pierrain
Coder sans peur du changement avec la meme pas mal hexagonal architectureCoder sans peur du changement avec la meme pas mal hexagonal architecture
Coder sans peur du changement avec la meme pas mal hexagonal architecture
Thomas Pierrain5.5K views
An Introduction to CSS Preprocessors (SASS & LESS) by Folio3 Software
An Introduction to CSS Preprocessors (SASS & LESS)An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)
Folio3 Software1.6K views

Viewers also liked

버전관리를 들어본적 없는 사람들을 위한 DVCS - Git by
버전관리를 들어본적 없는 사람들을 위한 DVCS - Git버전관리를 들어본적 없는 사람들을 위한 DVCS - Git
버전관리를 들어본적 없는 사람들을 위한 DVCS - Git민태 김
606.5K views46 slides
[오픈소스컨설팅]Subversion vs git - 참을 수 없는 간단함 by
[오픈소스컨설팅]Subversion vs git - 참을 수 없는 간단함[오픈소스컨설팅]Subversion vs git - 참을 수 없는 간단함
[오픈소스컨설팅]Subversion vs git - 참을 수 없는 간단함Ji-Woong Choi
12.4K views16 slides
외계어 스터디 4/5 Event & Library by
외계어 스터디 4/5 Event & Library외계어 스터디 4/5 Event & Library
외계어 스터디 4/5 Event & Library민태 김
3.9K views53 slides
웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스 by
웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스
웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스민태 김
24.4K views59 slides
Sublime Text 3 for python and django by
Sublime Text 3 for python and djangoSublime Text 3 for python and django
Sublime Text 3 for python and djangoraccoony
9.9K views136 slides
비개발자를 위한 Javascript 알아가기 #5.1 by
비개발자를 위한 Javascript 알아가기 #5.1비개발자를 위한 Javascript 알아가기 #5.1
비개발자를 위한 Javascript 알아가기 #5.1민태 김
4.3K views20 slides

Viewers also liked(11)

버전관리를 들어본적 없는 사람들을 위한 DVCS - Git by 민태 김
버전관리를 들어본적 없는 사람들을 위한 DVCS - Git버전관리를 들어본적 없는 사람들을 위한 DVCS - Git
버전관리를 들어본적 없는 사람들을 위한 DVCS - Git
민태 김606.5K views
[오픈소스컨설팅]Subversion vs git - 참을 수 없는 간단함 by Ji-Woong Choi
[오픈소스컨설팅]Subversion vs git - 참을 수 없는 간단함[오픈소스컨설팅]Subversion vs git - 참을 수 없는 간단함
[오픈소스컨설팅]Subversion vs git - 참을 수 없는 간단함
Ji-Woong Choi12.4K views
외계어 스터디 4/5 Event & Library by 민태 김
외계어 스터디 4/5 Event & Library외계어 스터디 4/5 Event & Library
외계어 스터디 4/5 Event & Library
민태 김3.9K views
웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스 by 민태 김
웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스
웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스
민태 김24.4K views
Sublime Text 3 for python and django by raccoony
Sublime Text 3 for python and djangoSublime Text 3 for python and django
Sublime Text 3 for python and django
raccoony 9.9K views
비개발자를 위한 Javascript 알아가기 #5.1 by 민태 김
비개발자를 위한 Javascript 알아가기 #5.1비개발자를 위한 Javascript 알아가기 #5.1
비개발자를 위한 Javascript 알아가기 #5.1
민태 김4.3K views
MEAN Stack 기반 모바일 서비스 개발 overview by 민태 김
MEAN Stack 기반 모바일 서비스 개발 overviewMEAN Stack 기반 모바일 서비스 개발 overview
MEAN Stack 기반 모바일 서비스 개발 overview
민태 김8K views
Waterfall과 agile의 불편한 동거 public by 민태 김
Waterfall과 agile의 불편한 동거 publicWaterfall과 agile의 불편한 동거 public
Waterfall과 agile의 불편한 동거 public
민태 김2.6K views
외계어 스터디 3/5 function and object by 민태 김
외계어 스터디 3/5   function and object외계어 스터디 3/5   function and object
외계어 스터디 3/5 function and object
민태 김4.7K views
Svn에서 git으로 이주하기 by Seunghwa Song
Svn에서 git으로 이주하기Svn에서 git으로 이주하기
Svn에서 git으로 이주하기
Seunghwa Song3.2K views
Git는 머꼬? GitHub는 또 머지? by Ian Choi
Git는 머꼬? GitHub는 또 머지?Git는 머꼬? GitHub는 또 머지?
Git는 머꼬? GitHub는 또 머지?
Ian Choi37.8K views

More from 민태 김

외계어 스터디 2/5 - Expressions & statements by
외계어 스터디 2/5 - Expressions & statements외계어 스터디 2/5 - Expressions & statements
외계어 스터디 2/5 - Expressions & statements민태 김
4.9K views141 slides
외계어 스터디 1/5 - Overview by
외계어 스터디 1/5 - Overview외계어 스터디 1/5 - Overview
외계어 스터디 1/5 - Overview민태 김
17K views90 slides
비개발자를 위한 Javascript 알아가기 #7.1 by
비개발자를 위한 Javascript 알아가기 #7.1비개발자를 위한 Javascript 알아가기 #7.1
비개발자를 위한 Javascript 알아가기 #7.1민태 김
2.4K views18 slides
비개발자를 위한 Javascript 알아가기 #7 by
비개발자를 위한 Javascript 알아가기 #7비개발자를 위한 Javascript 알아가기 #7
비개발자를 위한 Javascript 알아가기 #7민태 김
2.8K views11 slides
비개발자를 위한 Javascript 알아가기 #6.1 by
비개발자를 위한 Javascript 알아가기 #6.1비개발자를 위한 Javascript 알아가기 #6.1
비개발자를 위한 Javascript 알아가기 #6.1민태 김
1.8K views8 slides
비개발자를 위한 Javascript 알아가기 #6 by
비개발자를 위한 Javascript 알아가기 #6비개발자를 위한 Javascript 알아가기 #6
비개발자를 위한 Javascript 알아가기 #6민태 김
1.8K views11 slides

More from 민태 김(20)

외계어 스터디 2/5 - Expressions & statements by 민태 김
외계어 스터디 2/5 - Expressions & statements외계어 스터디 2/5 - Expressions & statements
외계어 스터디 2/5 - Expressions & statements
민태 김4.9K views
외계어 스터디 1/5 - Overview by 민태 김
외계어 스터디 1/5 - Overview외계어 스터디 1/5 - Overview
외계어 스터디 1/5 - Overview
민태 김17K views
비개발자를 위한 Javascript 알아가기 #7.1 by 민태 김
비개발자를 위한 Javascript 알아가기 #7.1비개발자를 위한 Javascript 알아가기 #7.1
비개발자를 위한 Javascript 알아가기 #7.1
민태 김2.4K views
비개발자를 위한 Javascript 알아가기 #7 by 민태 김
비개발자를 위한 Javascript 알아가기 #7비개발자를 위한 Javascript 알아가기 #7
비개발자를 위한 Javascript 알아가기 #7
민태 김2.8K views
비개발자를 위한 Javascript 알아가기 #6.1 by 민태 김
비개발자를 위한 Javascript 알아가기 #6.1비개발자를 위한 Javascript 알아가기 #6.1
비개발자를 위한 Javascript 알아가기 #6.1
민태 김1.8K views
비개발자를 위한 Javascript 알아가기 #6 by 민태 김
비개발자를 위한 Javascript 알아가기 #6비개발자를 위한 Javascript 알아가기 #6
비개발자를 위한 Javascript 알아가기 #6
민태 김1.8K views
비개발자를 위한 Javascript 알아가기 #5 by 민태 김
비개발자를 위한 Javascript 알아가기 #5비개발자를 위한 Javascript 알아가기 #5
비개발자를 위한 Javascript 알아가기 #5
민태 김3.2K views
비개발자를 위한 Javascript 알아가기 #4.1 by 민태 김
비개발자를 위한 Javascript 알아가기 #4.1비개발자를 위한 Javascript 알아가기 #4.1
비개발자를 위한 Javascript 알아가기 #4.1
민태 김4.3K views
비개발자를 위한 Javascript 알아가기 #4 by 민태 김
비개발자를 위한 Javascript 알아가기 #4비개발자를 위한 Javascript 알아가기 #4
비개발자를 위한 Javascript 알아가기 #4
민태 김5.3K views
비개발자를 위한 Javascript 알아가기 #3 by 민태 김
비개발자를 위한 Javascript 알아가기 #3비개발자를 위한 Javascript 알아가기 #3
비개발자를 위한 Javascript 알아가기 #3
민태 김4.9K views
비개발자를 위한 Javascript 알아가기 #2 by 민태 김
비개발자를 위한 Javascript 알아가기 #2비개발자를 위한 Javascript 알아가기 #2
비개발자를 위한 Javascript 알아가기 #2
민태 김5.4K views
비개발자를 위한 Javascript 알아가기 #1 by 민태 김
비개발자를 위한 Javascript 알아가기 #1비개발자를 위한 Javascript 알아가기 #1
비개발자를 위한 Javascript 알아가기 #1
민태 김10.8K views
AWS 구축 경험 공유 by 민태 김
AWS 구축 경험 공유AWS 구축 경험 공유
AWS 구축 경험 공유
민태 김5.2K views
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍 by 민태 김
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
민태 김3.6K views
Knockout.js Overview by 민태 김
Knockout.js OverviewKnockout.js Overview
Knockout.js Overview
민태 김1.2K views
스마트미디어 크로스플렛폼 개발 전략 by 민태 김
스마트미디어 크로스플렛폼 개발 전략스마트미디어 크로스플렛폼 개발 전략
스마트미디어 크로스플렛폼 개발 전략
민태 김1.4K views
CANVAS, SVG, WebGL, CSS3, WebEvent by 민태 김
CANVAS, SVG, WebGL, CSS3, WebEventCANVAS, SVG, WebGL, CSS3, WebEvent
CANVAS, SVG, WebGL, CSS3, WebEvent
민태 김1.3K views
Html5 game programming overview by 민태 김
Html5 game programming overviewHtml5 game programming overview
Html5 game programming overview
민태 김1.9K views
What is Hybrid Apps by 민태 김
What is Hybrid AppsWhat is Hybrid Apps
What is Hybrid Apps
민태 김1.4K views
고품질웹앱개발전략 by 민태 김
고품질웹앱개발전략고품질웹앱개발전략
고품질웹앱개발전략
민태 김555 views

Recently uploaded

학교현장에서의 생성형 AI 활용에 대한 법·윤리적 이슈와 대응방안 by
학교현장에서의 생성형 AI 활용에 대한 법·윤리적 이슈와 대응방안학교현장에서의 생성형 AI 활용에 대한 법·윤리적 이슈와 대응방안
학교현장에서의 생성형 AI 활용에 대한 법·윤리적 이슈와 대응방안Kyubok Cho
7 views39 slides
비융합 3조_자세-교정-알림-서비스.ppt by
비융합 3조_자세-교정-알림-서비스.ppt비융합 3조_자세-교정-알림-서비스.ppt
비융합 3조_자세-교정-알림-서비스.pptqkrwnsrb8049
10 views29 slides
RLHF_Lessons_learned.pdf by
RLHF_Lessons_learned.pdfRLHF_Lessons_learned.pdf
RLHF_Lessons_learned.pdfssuser1bc84b
85 views54 slides
잡지 검색 예시.pptx by
잡지 검색 예시.pptx잡지 검색 예시.pptx
잡지 검색 예시.pptxjones cho
68 views2 slides
종합설계프로젝트(1960013_나호석).pptx by
종합설계프로젝트(1960013_나호석).pptx종합설계프로젝트(1960013_나호석).pptx
종합설계프로젝트(1960013_나호석).pptxssuser82df24
28 views22 slides
디볼스테로이드파는곳 () 옥시메톨론특징 #클렌부테롤구매【카톡Emm36】#정품테스토스테론 by
디볼스테로이드파는곳 () 옥시메톨론특징  #클렌부테롤구매【카톡Emm36】#정품테스토스테론디볼스테로이드파는곳 () 옥시메톨론특징  #클렌부테롤구매【카톡Emm36】#정품테스토스테론
디볼스테로이드파는곳 () 옥시메톨론특징 #클렌부테롤구매【카톡Emm36】#정품테스토스테론starsoul5722
5 views4 slides

Recently uploaded(8)

학교현장에서의 생성형 AI 활용에 대한 법·윤리적 이슈와 대응방안 by Kyubok Cho
학교현장에서의 생성형 AI 활용에 대한 법·윤리적 이슈와 대응방안학교현장에서의 생성형 AI 활용에 대한 법·윤리적 이슈와 대응방안
학교현장에서의 생성형 AI 활용에 대한 법·윤리적 이슈와 대응방안
Kyubok Cho7 views
비융합 3조_자세-교정-알림-서비스.ppt by qkrwnsrb8049
비융합 3조_자세-교정-알림-서비스.ppt비융합 3조_자세-교정-알림-서비스.ppt
비융합 3조_자세-교정-알림-서비스.ppt
qkrwnsrb804910 views
RLHF_Lessons_learned.pdf by ssuser1bc84b
RLHF_Lessons_learned.pdfRLHF_Lessons_learned.pdf
RLHF_Lessons_learned.pdf
ssuser1bc84b85 views
잡지 검색 예시.pptx by jones cho
잡지 검색 예시.pptx잡지 검색 예시.pptx
잡지 검색 예시.pptx
jones cho68 views
종합설계프로젝트(1960013_나호석).pptx by ssuser82df24
종합설계프로젝트(1960013_나호석).pptx종합설계프로젝트(1960013_나호석).pptx
종합설계프로젝트(1960013_나호석).pptx
ssuser82df2428 views
디볼스테로이드파는곳 () 옥시메톨론특징 #클렌부테롤구매【카톡Emm36】#정품테스토스테론 by starsoul5722
디볼스테로이드파는곳 () 옥시메톨론특징  #클렌부테롤구매【카톡Emm36】#정품테스토스테론디볼스테로이드파는곳 () 옥시메톨론특징  #클렌부테롤구매【카톡Emm36】#정품테스토스테론
디볼스테로이드파는곳 () 옥시메톨론특징 #클렌부테롤구매【카톡Emm36】#정품테스토스테론
starsoul57225 views
박사과정 진학을 하기 전 알았으면 좋았을 것들 by Sungwoo Park
박사과정 진학을 하기 전 알았으면 좋았을 것들박사과정 진학을 하기 전 알았으면 좋았을 것들
박사과정 진학을 하기 전 알았으면 좋았을 것들
Sungwoo Park31 views
종합설계프로젝트(1960052 추영호).pptx by choo7913
종합설계프로젝트(1960052 추영호).pptx종합설계프로젝트(1960052 추영호).pptx
종합설계프로젝트(1960052 추영호).pptx
choo791324 views

초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)

  • 1. Regular! Expressions for Beginners g ^.*?$[]()[]:= /bysKimsminstae/gmi
  • 2. /…/ gim AA BB Aa Bb $12,000 [“AA ”] 1 match
  • 3. /…/ gim AA BB Aa Bb $12,000 1 match 정규표현식 시작,종료 기호 플래그 [“AA ”]
  • 4. /…/ gim AA BB Aa Bb $12,000 1 match 검색 대상! 문자열 [“AA ”]
  • 5. /…/ gim AA BB Aa Bb $12,000 1 match 정규식과 일치한 문자열 [“AA ”]
  • 6. /…/ AA BB Aa Bb $12,000 추출된 문자들 [“AA ”] 1 match gim
  • 7. 입력된 표현식이 없으면 일치한 문자열도 없음 // AA BB Aa Bb $12,000 [ ] no match
  • 8. 입력된 문자와 일치한 첫 번째 문자를 찾고 반환 /A/ AA BB Aa Bb $12,000 [“A”] 1 match
  • 9. /A/ AA BB Aa Bb $12,000 [“A”, “A”, “A”] 3 matches g 대상 문자열 전체로 검색 대상을 지정! 정규식 패턴에 일치하는 모든 문자(열) 반환
  • 10. /A/ AA BB Aa Bb $12,000 [“A”, “A”, “A”, “a”] 4 matches gi 알파벳 대소문자 구분 무시 i 플래그의 영향으로 소문자 a 도 일치됨
  • 11. /AA/ AA BB Aa Bb $12,000 [“AA”, “Aa”] 2 matches gi 문자열 패턴
  • 12. 임의의 문자 하나를 의미하는 메타 문자 마침표(.) /./ AA BB Aa Bb $12,000 [“A”] 1 match
  • 13. 두 개의 마침표는 문자 두 개가 결합된 문자열과 일치 /../ AA BB Aa Bb $12,000 [“AA”] 1 match
  • 14. /.../ AA BB Aa Bb $12,000 [“AA ”] 1 match
  • 15. 대상 문자열 전체를 선택하는 방법?! 대상 문자열의 문자 갯수 만큼 마침표를 입력 /………………/ AA BB Aa Bb $12,000 [“AA BB Aa Bb $12,000”] 1 match
  • 16. 대상 문자열의 길이가 너무 길거나 알 수 없다면? /./ AA BB Aa Bb $12,000 [“A”] 1 match
  • 17. g 플래그로 마침표 패턴 일치 결과를 대상 문자열 전체로 확장 /./ g AA BB Aa Bb $12,000 그러나 전체 문자열이 아닌 모든 문자가 분해되어 반환 [“A”, “A”, “ ”, “B”, “B”, “ ”, “A”, “a”, “ ”, “B”, “b”, “ ”, “$”, “1”, “2”, “,”, “0”, “0”, “0” ] 19 matches
  • 18. /.+/ AA BB Aa Bb $12,000 [“AA BB Aa Bb $12,000”] 1 match 앞에 있는 패턴의 반복을 지시하는 메타 문자 앞선 패턴(마침표, 즉 모든 문자)의 ! 불일치가 발생할 때 까지 반복 시킴 모든 문자의 불일치가 대상 문자열 끝까지 ! 일어나지 않았기 때문에 결국 대상 문자열 전체가 일치
  • 19. /A+/ AA BB Aa Bb $12,000 [“AA”] 1 match A 문자 패턴이 반복되고 공백 문자를! 만나는 순간 A 문자 패턴의 불일치가! 발생하여 AA 까지만 일치됨 공백 문자를 만나 불일치!!
  • 20. /A+/ AA BB Aa Bb $12,000 [“AA”, “A”] 2 matches g 대상을 전체로 확대하여 ! A 문자 하나가 추가로 일치
  • 21. /A+/ AA BB Aa Bb $12,000 [“AA”, “Aa”] 2 matches gi 대소문자 구분을 무시! 따라서 Aa 패턴도 일치
  • 22. A or B or … 조건의 패턴 정규식 // AA BB Aa Bb $12,000 [ ] no match
  • 23. 파이프 문자(|)는 OR를 의미! 좌측과 우측의 패턴 중 하나와 일치하면 일치 /A|B/ AA BB Aa Bb $12,000 [“A”, “A”, “B”, “B”, “A”, “B”] 6 matches g
  • 24. 분해되지 않은 문자열을 얻기위해! /A+|B+/ AA BB Aa Bb $12,000 [“AA”,“BB”, “A”, “B”] 4 matches g 반복 메타 문자 사용
  • 25. 문자 집합 메타 문자! 문자 집합 내에 포함된 문자는 OR 로 작동 /[AB]/g AA BB Aa Bb $12,000 [“A”, “A”, “B”, “B”, “A”, “B”] 6 matches
  • 26. 앞선 패턴의 반복을 지정! 앞선 패턴이 그룹(문자 집합, 하위 표현식 등)이면 ! 그룹 전체가 반복의 대상이 됨 /[AB]+/ AA BB Aa Bb $12,000 [“AA”,“BB”, “A”, “B”] 4 matches g 반복 대상
  • 27. 범위 지정 메타 문자 마이너스(-)! 왼쪽 문자를 시작으로 오른쪽 문자까지 순차적으로 문자를 증가! [A-Z] 는 [ABCDEGHIJKLMNOPQRSTUVWXYZ] 과 동일! 문자 집합 내에서만 사용 가능 /[A-Z]+/ AA BB Aa Bb $12,000 [“AA”,“BB”, “A”, “B”] 4 matches g
  • 28. 범위는 하나의 패턴으로 취급! 모든 대문자 알파벳, 모든 소문자 알파벳을 의미 /[A-Za-z]+/ AA BB Aa Bb $12,000 [“AA”,“BB”, “Aa”, “Bb”] 4 matches g
  • 29. $12,000 추출하기 // AA BB Aa Bb $12,000 [ ] no match
  • 30. 일치되지 않음! “$” 문자는 정규식 내에서 특별한! 기능을 가진 메타 문자기 때문 /$12,000/ AA BB Aa Bb $12,000 [ ] no match g
  • 31. /$12,000/ AA BB Aa Bb $12,000 [“$12,000”] 1 match g 역슬래쉬( )! 메타 문자를 일반 문자로 취급! $ 정규식은 $ 문자와 일치
  • 32. $ 이후 숫자를 한정하지 않기 위해 ! 0-9 문자집합 사용, 그러나 $ 이후! 숫자 하나만 일치 /$[0-9]/ AA BB Aa Bb $12,000 [“$1”] 1 match g
  • 33. 문자 집합을 반복 일치! 콤마(,)가 나타나 일치가 중단되어! $12 까지만 일치 /$[0-9]+/ AA BB Aa Bb $12,000 [“$12”] 1 match g
  • 34. 문자집합에 콤마(,)도 추가하여! 금액 전체를 일치시킴 /$[0-9,]+/ AA BB Aa Bb $12,000 [“$12,000”] 1 match g
  • 35. /$[0-9,]+/ AA BB Aa Bb $12,000.00 [“$12,000”] 1 match g 금액에 소숫점이 있다면?
  • 36. 문자집합에 마침표( . ) 추가 /$[0-9,.]+/ AA BB Aa Bb $12,000.00 [“$12,000.00”] 1 match g
  • 37. 마침표( . )는 문자 집합 [ ] 밖에서는! 임의의 한 문자를 의미하는 메타문자로 작동! 문자 집합 밖에서 마침표를 일치시키기 위해선! 역슬래쉬 사용 /./ AA BB Aa Bb $12,000.00 [“.”] 1 match g
  • 38. 특별한 기능을 가진 메타 문자가 있다! d 는 숫자를 의미함. [0-9] 와 같다 /d/ AA BB Aa Bb $12,000.00 [“1”, “2”, “0”, “0”, “0”, “0”, “0”] 7 matches g
  • 39. 대문자 D 는 숫자의 반대 즉, ! 숫자가 아닌 모든 문자를 의미 /D/ AA BB Aa Bb $12,000.00 [“A”, “A”, “ ”, “B”, “B”, “ ”, “A”, “a”, “ ”, “B”, “b”, “ ”, “$”, “,”, “.”] 15 matches g
  • 40. w 는 영문자를 의미! [a-zA-Z_0-9] 의 축양형! * 영문자에 언더바 (_)와 숫자가 포함된다 /w/ AA BB Aa Bb $12,000.00 [“A”, “A”, “B”, “B”, “A”, “a”, “B”, “b”, “1”, “2”, “0”, “0”, “0”, “0”, “0”] 15 matches g
  • 41. 대문자 W 는 영문자 이외의 모든 문자를 의미! [^a-zA-Z_0-9] 의 축약형! * 캐럿(^) 은 문자 집합의 반대(Not)를 의미 /W/ AA BB Aa Bb $12,000.00 [“ ”, “ ”, “ ”, “ ”, “$”, “,”, “.”] 7 matches g 공백도 당연히 독립된! 하나의 문자다
  • 42. http: 또는 https: 문자열 찾기 // http: vs. https: or httpss: What’s the difference? [ ] no match
  • 43. http: 로는 https: 와 httpss: 를 찾지 못함 /http:/ http: vs. https: or httpss: What’s the difference? [“http:”] 1 match g
  • 44. s 를 추가하면 http: 와 httpss: 가 일치되지 않음 /https:/ http: vs. https: or httpss: What’s the difference? [“https:”] 1 match g
  • 45. /http:|https:/ http: vs. https: or httpss: What’s the difference? [“http:”, “https:”] 2 matches g OR를 이용하여 http: 와 https: 를 찾을 수 있다! 그러나 정규식이 과도하게 길어짐
  • 46. 앞에 문자가 없거나 1번이상! 나타나는 패턴과 일치시킴 /https*:/ http: vs. https: or httpss: What’s the difference? [“http:”, “https:”, “httpss:”] 3 matches g 앞에 문자 s 가 없거나 1번 이상! 반복되는 패턴과 일치 일치되길 원하지 않는 httpss: 문자열도 일치됨
  • 47. 앞에 문자가 없거나 1번만! 나타나는 패턴과 일치시킴 /https?:/ http: vs. https: or httpss: What’s the difference? [“http:”, “https:”] 2 matches g s가 두번 반복되기 때문에 일치되지 않음
  • 48. HTTP URL 추출하기 // http://www.static.com:8080/a.jpg A: https://admin.static-best.io/show?no=1 B: https://static-best.site.org/show.jsp?no=1 http://static best.net/#!/ibare http://static.net/#!/ibare [ ] no match
  • 49. /https?:/ http://www.static.com:8080/a.jpg A: https://admin.static-best.io/show?no=1 B: https://static-best.site.org/show.jsp?no=1 http://static best.net/#!/ibare http://static.net/#!/ibare [ ] 5 matches g 프로토콜 문자열 일치
  • 50. 두 개의 슬래쉬 문자는 정규식 내에서 메타 문자이기 때문에! /https?:/// http://www.static.com:8080/a.jpg A: https://admin.static-best.io/show?no=1 B: https://static-best.site.org/show.jsp?no=1 http://static best.net/#!/ibare http://static.net/#!/ibare [ ] 5 matches g 역슬래쉬를 이용하여 표현
  • 51. 호스트 문자열 지정! 그러나 호스트 문자열은 www 뿐만 아닌, ! 적시할 수 없는 임의의 문자열 패턴 /https?://www/ [ ] 1 match g http://www.static.com:8080/a.jpg A: https://admin.static-best.io/show?no=1 B: https://static-best.site.org/show.jsp?no=1 http://static best.net/#!/ibare http://static.net/#!/ibare
  • 52. 메타 문자 w 사용. 알파벳과 숫자를 일치시키도록 변경 /https?://w/ [ ] 5 matches g http://www.static.com:8080/a.jpg A: https://admin.static-best.io/show?no=1 B: https://static-best.site.org/show.jsp?no=1 http://static best.net/#!/ibare http://static.net/#!/ibare
  • 53. 패턴의 불일치가 발생할 때 까지 반복 지정 /https?://w+/ [ ] 5 matches g http://www.static.com:8080/a.jpg A: https://admin.static-best.io/show?no=1 B: https://static-best.site.org/show.jsp?no=1 http://static best.net/#!/ibare http://static.net/#!/ibare
  • 54. 너무 많은 도메인 문자 패턴이 존재하여 안티 패턴 사용! 도메인 문자로 사용할 수 없는 문자 이외의 문자가 일치되도록 패턴 변경! 캐럿(^)은 문자 집합내에서 NOT 을 의미 /https?://[^:/s]/ [ ] 5 matches g http://www.static.com:8080/a.jpg A: https://admin.static-best.io/show?no=1 B: https://static-best.site.org/show.jsp?no=1 http://static best.net/#!/ibare http://static.net/#!/ibare
  • 55. 문자 집합을 반복시켜 도메인 주소 끝까지 확장! 그러나 잘못된 도메인도 일치되는 문제점 발생 /https?://[^:/s]+/ [ ] 5 matches g http://www.static.com:8080/a.jpg A: https://admin.static-best.io/show?no=1 B: https://static-best.site.org/show.jsp?no=1 http://static best.net/#!/ibare http://static.net/#!/ibare 공백 문자가 포함된 잘못된 도메인
  • 56. 도메인 문자의 마지막은 마침표와 알파벳으로 끝나는 패턴 삽입 (.com, .io 등)! 잘못된 도메인이 일치되는 문제점 수정 /https?://[^:/s]+.w+/ [ ] 4 matches g http://www.static.com:8080/a.jpg A: https://admin.static-best.io/show?no=1 B: https://static-best.site.org/show.jsp?no=1 http://static best.net/#!/ibare http://static.net/#!/ibare
  • 57. 도메인의 포트 지정 (:80, :8080 등) 은 도메인에 포함되기 위해 포트 형식 패턴 추가! 그러나 포트가 없는 (생략된) 도메인이 모두 일치되지 않는 문제점 발생 /https?://[^:/s]+.w+:d+/ [ ] 1 match g http://www.static.com:8080/a.jpg A: https://admin.static-best.io/show?no=1 B: https://static-best.site.org/show.jsp?no=1 http://static best.net/#!/ibare http://static.net/#!/ibare
  • 58. 없거나, 1번만 나오는 패턴과 일치하는 메타 문자 물음표(?)를 사용! 포트 지정 패턴은 하나의 문자 패턴이 아니기 때문에 하위 표현식 괄호 ()를 이용하여 그룹화 함! 문자 집합과 마찮가지로 하나의 패턴 그룹으로 지정 /https?://[^:/s]+.w+(:d+)?/ [ ] 4 matches g http://www.static.com:8080/a.jpg A: https://admin.static-best.io/show?no=1 B: https://static-best.site.org/show.jsp?no=1 http://static best.net/#!/ibare http://static.net/#!/ibare
  • 59. 대상 문자열의 첫 번째 나타나는 문자 지정 메타 문자 캐럿(^)! 문자 집합 밖에서의 캐럿은 대상 문자열의 첫 번째를 의미함 /^https?://[^:/s]+.w+(:d+)?/ [ ] 1 match g http://www.static.com:8080/a.jpg A: https://admin.static-best.io/show?no=1 B: https://static-best.site.org/show.jsp?no=1 http://static best.net/#!/ibare http://static.net/#!/ibare
  • 60. 대상 문자열의 줄바꿈을 인식하여 멀티 라인 모드 사용 플래그! 멀티 라인 모드 활성화의 결과로 캐럿의 효과가 각 라인으로 확대 ! 각 라인의 첫 번째에서 시작되는 도메인만 일치됨 /^https?://[^:/s]+.w+(:d+)?/ [ ] 2 matches gm http://www.static.com:8080/a.jpg A: https://admin.static-best.io/show?no=1 B: https://static-best.site.org/show.jsp?no=1 http://static best.net/#!/ibare http://static.net/#!/ibare
  • 61. .brand { 반복 패턴 사용 //g font-size: 22px; color: #ff0000; background-color: #00ff00; border-color: #ddd; margin: 10px 10px 10px 5px; padding: 2em 1em 2em 1em; } [ ] no match
  • 62. #으로 시작되는 16진수 컬러값을 추출하기 위한 문자 집합 패턴 .brand { /#[0-9A-Fa-f]/g font-size: 22px; color: #ff0000; background-color: #00ff00; border-color: #ddd; margin: 10px 10px 10px 5px; padding: 2em 1em 2em 1em; } [ ] 3 matches
  • 63. 동일한 패턴을 하나 더 추가 /#[0-9A-Fa-f][0-9A-Fa-f]/g .brand { font-size: 22px; color: #ff0000; background-color: #00ff00; border-color: #ddd; margin: 10px 10px 10px 5px; padding: 2em 1em 2em 1em; } [ ] 3 matches
  • 64. 동일한 패턴을 세 번 반복 /#[0-9A-Fa-f][0-9A-Fa-f][0-9A-Fa-f]/g .brand { font-size: 22px; color: #ff0000; background-color: #00ff00; border-color: #ddd; margin: 10px 10px 10px 5px; padding: 2em 1em 2em 1em; } [ ] 3 matches
  • 65. 같은 패턴의 반복 횟수를 지정할 수 있는 메타 문자 { } 사용! 앞의 패턴을 반복 횟수를 지정 /#[0-9A-Fa-f]{6}/g .brand { font-size: 22px; color: #ff0000; background-color: #00ff00; border-color: #ddd; margin: 10px 10px 10px 5px; padding: 2em 1em 2em 1em; } [ ] 2 matches
  • 66. 6번 반복되는 컬러값 외에도 3번 반복되는 컬러값 패턴도 대응하기 위해! 3번 반복 패턴을 OR 로 추가 /#[0-9A-Fa-f]{6}|[0-9A-Fa-f]{3}/g .brand { font-size: 22px; color: #ff0000; background-color: #00ff00; border-color: #ddd; margin: 10px 10px 10px 5px; padding: 2em 1em 2em 1em; } [ ] 3 matches
  • 67. 반복 지정을 { from, to } 로 할 수 있음! 앞선 패턴이 3번 이상 6번 이하 반복되는 패턴으로 정규식을 간소화 시킴 /#[0-9A-Fa-f]{3,6}/g .brand { font-size: 22px; color: #ff0000; background-color: #00ff00; border-color: #ddd; margin: 10px 10px 10px 5px; padding: 2em 1em 2em 1em; } [ ] 3 matches
  • 68. 컬러값의 마지막이 항상 세미콜론(;) 으로 끝나기 때문에 ! 반복 횟수 지정을 사용하지 않고 세미콜론까지 무한 반복 형태로 변경! 그러나 추출된 문자열에 세미콜론까지 포함되는 문제점 발생 /#[0-9A-Fa-f]+;/g .brand { font-size: 22px; color: #ff0000; background-color: #00ff00; border-color: #ddd; margin: 10px 10px 10px 5px; padding: 2em 1em 2em 1em; } [ ] 3 matches
  • 69. 패턴을 일치시키는 위치를 지정하는 위치 지정 메타 문자 중 ! 전방 탐색 연산자를 (?=) 사용하여 추출시 세미콜론을 제거 /#[0-9A-Fa-f]+(?=;)/g .brand { font-size: 22px; color: #ff0000; background-color: #00ff00; border-color: #ddd; margin: 10px 10px 10px 5px; padding: 2em 1em 2em 1em; } [ ] 3 matches 전방 탐색 방향 후방 탐색 방향 * 후방 탐색 (?<=) 연산자는 Javascript! 정규식에서 지원되지 않는다
  • 70. <article> 역참조를 이용한 범위 지정 //g <h1>Tim Cook didn't address Apple's real privacy problem</h1> <h2>Tim Cook didn't address Apple's real privacy problem</h2> <h2>Tim Cook didn't address Apple's real privacy problem</h2> <h3>Tim Cook didn't address Apple's real privacy problem</h1> <h4>Tim Cook didn't address Apple's real privacy problem</h4> </article> [ ] no match
  • 71. <article> <h1>과 </h1> 문자열 사이의 모든 문자를 찾는다 /<h1>.+</h1>/g <h1>Tim Cook didn't address Apple's real privacy problem</h1> <h2>Tim Cook didn't address Apple's real privacy problem</h2> <h2>Tim Cook didn't address Apple's real privacy problem</h2> <h3>Tim Cook didn't address Apple's real privacy problem</h1> <h4>Tim Cook didn't address Apple's real privacy problem</h4> </article> [ ] 1 matches
  • 72. <article> h1, h2, h3 … h6 까지 종류를 확대하기 위해 문자 집합 사용! <h3>…</h1> 처럼 짝이 맞지 않는 잘못된 문자열도 일치되는 문제가 존재 /<h[1-6]>.+</h[1-6]>/g <h1>Tim Cook didn't address Apple's real privacy problem</h1> <h2>Tim Cook didn't address Apple's real privacy problem</h2> <h2>Tim Cook didn't address Apple's real privacy problem</h2> <h3>Tim Cook didn't address Apple's real privacy problem</h1> <h4>Tim Cook didn't address Apple's real privacy problem</h4> </article> [ ] 5 matches
  • 73. 일치된 하위 표현식()을 지정하는 역참조를 사용하여 앞선 하위 표현식과 동일한 패턴으로 일치시킴! <article> 역참조로 인해 <h3> … </h1> 패턴은 일치되지 않음! 하위 표현식 () 이 1개 이상일 경우 순차적으로 1, 2, 3 과 같이 지정 /<h([1-6])>.+</h1>/g <h1>Tim Cook didn't address Apple's real privacy problem</h1> <h2>Tim Cook didn't address Apple's real privacy problem</h2> <h2>Tim Cook didn't address Apple's real privacy problem</h2> <h3>Tim Cook didn't address Apple's real privacy problem</h1> <h4>Tim Cook didn't address Apple's real privacy problem</h4> </article> [ ] 4 matches 1
  • 74. Code (Javascript) var targetText = “http: vs. https: or httpss:”; var matches = targetText.match(/https?:/g); ! console.log(matches); > Array [“http:”, “https:”] targetText = targetText.replace(/https?:/g, “protocol”); console.log(targetText); > “protocol vs. protocol or httpss:”
  • 75. Reference • http://en.wikipedia.org/wiki/Regular_expression • http://www.regexr.com/ • http://www.regexper.com/
  • 76. Regular! Expressions for Beginners /bysKimsminstae/gmi .+end$/g *참고: 이 문서는 정규 표현식의 기본적인 작성 방법을 학습하기위해 작성되었습니다. 따라서 다루지 않은 내용이 존재합니다. 정규 표현식은 프로그래밍 언어에 따라 문법 과 기능의 차이가 존재합니다. 기본적인 작동 방식은 유사하나 다루는 프로그래밍 언어에 따른 추가 학습이 필요합니다.