오늘보다 더 나은 내일의 나에게_
스마트인재개발원 자바스크립트 정규표현식 국비지원무료교육 본문
이번 주 5일 동안 html, css, javascript, servlet, jsp를 배웠고 자바스크립트와 jsp는 다음 주에도 계속 수업이 남아있다. 그래도 한 번씩은 공부를 했었던 언어들이어서 반가웠고 재밌었다. 특히 html, css, javascript는 작년 웹디자인 포트폴리오를 만들 때 공부하면서 만들었기 때문에 조금 수월하게 수업을 들을 수 있었다.
이번 주 수업을 마무리하며 추가적으로 공부하고 싶은 부분은 html/css에서 display flex와 grid, 그리고 자바스크립트에서 정규표현식입니다! display속성의 flex와 grid는 반응형 웹 구현을 위해 잠깐 공부를 하긴 했었지만 실습을 많이 안 했어서 거의 잊어버렸다.😅
flex와 grid부분을 전에 노마드코더에서 보다 말았던 css강의를 보려고 들어갔다. 분명!! 나는 강의를 다 봤다고 생각했는데..... 반절 정도밖에 안봤었.. 역시 그래서 flex와 grid부분이 낯설었나...?? (분명 다 봤는데.. 내 기억이 왜곡됐나..😵)
일단 전에 강의를 보며 정리해놨었던 메모들을 쭉 읽어봤다. 하.. 역시 어렵다..
추가적으로 노마드코더 강의는 좀 재밌다. 뭐랄까 영어강의라 자막으로 봐야 하지만 뭔가 유튜브 감성 같은 그런 게 있다. 무료로 실습하면서 볼 수 있는 강의들이 있으니 관심 있는 사람들은 한번 봐도 좋을 듯하다.
노마드 코더 링크!
노마드 코더 Nomad Coders
코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요!
nomadcoders.co
이번 주에 제일 추가로 공부하고 싶었던 부분은 자바스크립트의 정규표현식이다!! 강의시간에는 조금 간단하게 하고 넘어가서 궁금하기도 하고 앞으로 개발 공부를 하면서 알고 있으면 도움이 많이 될 것 같아서 개인적으로 찾아보고 정리를 해보려고 한다.
최근에 보고 있는 jsp 인강에서도 로그인 기능을 구현할 때?? 사용했었고, 전에 spring을 간단하게 배웠을 때도 게시판 만드는 부분에서도..? 로그인 부분...?(가물가물하네요..ㅜㅜ) 어쨌든 사용을 했었다.
📌정규표현식이란(Regular Expression: Regex)?
문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴!
정규 표현식을 줄여서 '정규식'이라고도 한다!
간단한 문자 검색부터 이메일, 패스워드 검사 등 복잡한 문자 일치 기능 들을 빠르게 수행할 수 있다.
- 문자 검색, 문자 대체, 문자 추출 등
정규표현식 생성
생성자 함수 방식
RegExp 생성자 함수를 호출하여 사용
// new RegExp(표현식) const reg1 = new RegExp("^abc"); //new RegExp(표현식, 플래그) const reg2 = new RegExp("^abc", "gi");
리터럴(Literal) 방식
/ / 로 감싸진 패턴을 리터럴로 사용하고, 주로 사용됨
// /표현식/ const reg1 = /^abc/; // /표현식/플래그 const reg2 = /^abc/gi;
재할당(Re-compile)
재할당할 수 있어야 함, 상수가 아닌 변수로 선언해야 한다!
let reg1 = /lorem/g; reg1 = /ipsum/i; // /ipsum/i 출력됨 const reg2 = /lorem/g; reg2 = /ipsum/i; // Error
플래그(flags)
정규 표현식을 생성할 때 플래그를 사용하여 기본 검색 설정을 변경할 수 있다.
주의할 점으로 설정된 플래그는 나중에 추가되거나 삭제될 수 없다!!
| 플래그 | 설명 |
| i | 검색 패턴을 비교할 때 대소문자를 구분하지 않도록 설정 |
| g | 검색 패턴을 비교할 때 일치하는 모든 부분을 선택하도록 설정 |
| m | 검색 패턴을 비교할 때 여러 줄의 입력 문자열을 그 상태 그대로 여러 줄로 비교하도록 설정 |
| y | 대상 문자열의 현재 위치부터 비교를 시작하도록 설정 |
| s | .에 개행 문자도 매칭(ES2018) |
| u | 유니코드문자를 처리하기 위한 설정 |
특수 문자
단순한 패턴을 검색하고자 할 때는 찾고자 하는 문자열을 직접 나열하면 되지만 복잡한 조건을 사용하려면 특수 문자를
사용해야 한다!
정규 표현식에서 사용되는 괄호(())를 "capturing parentheses"라고도 부른다.
| 특수문자 / 패턴 | 설명 |
| ^ | 줄의 시작에서 일치 |
| $ | 줄의 끝에서 일치 |
| . | 임의의 한 문자와 일치 |
| a|b | a 또는 b와 일치, 인덱스가 작은 것을 우선 반환 |
| * | 0회 이상 연속으로 반복되는 문자와 가능한 많이 일치 {0,}와 동일 |
| *? | 0회 이상 연속으로 반복되는 문자와 가능한 적게 일치 {0}와 동일 |
| + | 1회 이상 연속으로 반복되는 문자에 가능한 많이 일치 {1, }와 동일 |
| +? | 1회 이상 연속으로 반복되는 문자에 가능한 적게 일치 {1}와 동일 |
| ? | 없거나 1회 가능한 많이 일치 |
| ?? | 없거나 1회 가능한 적게 일치 |
| {4} | 4개 연속 일치 |
| {4, } | 4개 이상 연속 일치 |
| {4,6} | 4개 이상 6개 이하 연속 일치 |
| {4,6}? | 4개 이상 6개 이하 연속 중 가능한 적은 4개 연속 일치 {3}와 동일 |
| ( ) | 캡처할 그룹 |
| (?<>) | 캡처 그룹 이름 지정 |
| \1~9 | 정규식 내 캡처된 값 참조 |
| (?:) | 캡처하지 않는 그룹 |
| (?=) | 앞쪽 일치 |
| (?!) | 부정 앞쪽 일치 |
| (?<=) | 뒤쪽 일치 |
| (?<!) | 부정 뒤쪽 일치 |
| [abc] | a또는 b또는 c와 일치 |
| [a-z] | a부터 z사이의 문자 구간에 일치 |
| [A-Z] | A부터Z사이의 문자 구간에 일치 |
| [0,9] | 0부터 9사이의 문자 구간에 일치 |
| [가-힣] | 가 부터 힣 사이의 문자 구간에 일치 |
| [^abc] | a 또는 b 또는 c가 아닌 나머지 문자에 일치(부정) |
| \ | 역슬래시(\) 다음에 일반 문자가 나오면 이스케이프 문자로 해석, 특수 문자가 나오면 일반 문자로 해석 |
| \d | 숫자를 검색 => /[0-9]/와 같음. |
| \D | 숫자가 아닌 문자를 검색 => /[^0-9]/와 같음 |
| \w | 언더스코어(_)를 포함한 영문자 및 숫자를 검색 => /[A-Za-z0-9_]/와 같음 |
| \W | 언더스코어(_), 영문자, 숫자가 아닌 문자를 검색 => /[^A-Za-z0-9_]/와 같음 |
| \s | 띄어쓰기, 탭, 줄 바꿈 문자 등의 공백 문자를 검색 |
| \S | 띄어쓰기, 탭, 줄 바꿈 문자 등의 공백 문자가 아닌 문자를 검색 |
| \b | 단어의 맨 앞이나 맨 뒤가 패턴과 일치하는지를 검색 |
| \xhh | 16진수 hh에 해당하는 유니코드 문자를 검색 |
| \uhhhh | 16진수 hhhh에 해당하는 유니코드 문자를 검색 |
정규표현식 주요 메서드 정리
| 메서드 | 설명 |
| exec("문자열") | 대응되는 문자열을 찾아 배열을 반환하고 찾지 못했다면 null을 반환 |
| test("문자열") | 대응되는 문자열이 있는지 검사. true 나 false를 반환 |
| match(/정규표현식/플래그) | 대응되는 문자열을 찾는 String 메소드 정보를 가지고 있는 배열을 반환, 대응되는 문자열을 찾지 못했다면 null을 반환 |
| search(/정규표현식/플래그) | 대응되는 문자열이 있는지 검사하는 String 메소드 대응된 부분의 인덱스를 반환, 찾지 못했다면 -1을 반환 |
| replace(/정규표현식/, "대체문자열") | 대응되는 문자열을 찾아 다른 문자열로 치환하는 String 메소드 |
| split(정규표현식) | 정규식 혹은 문자열로 대상 문자열을 나누어 배열로 반환하는 String 메소드 |
문자열 내부에 패턴과 대응되는 부분이 있는지 알고 싶다면, test() 나 search() 사용!!
더 많은 정보를 원하면 exec() 나 match() 사용! (대신 실행이 느림)
exec() 나 match() 메서드를 사용했는데 대응되는 부분이 있다면,
이 메서드는 배열을 반환하고 정규식 객체의 속성을 업데이트해야 함!
만약 대응되는 부분이 없다면, exec() 메서드는 null을 반환! (즉, false와 같은 의미로 사용될 수 있습니다.)
관련자료 및 참고 사이트
✌현재 모집 중인 과정🤞
스마트인재개발원 본점 남구 CGI센터
스마트인재개발원 분점 동구 아트센터
스마트인재개발원이 궁금하다면 아래 링크!
스마트인재개발원
4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관
www.smhrd.or.kr
'스마트인재개발원' 카테고리의 다른 글
| 스마트인재개발원 국비지원무료교육 지능형 빅데이터 IoT융합 SW전문가과정 (0) | 2022.02.19 |
|---|---|
| 스마트인재개발원 국비지원무료교육 아두이노란? (0) | 2022.02.13 |
| 스마트인재개발원 국비지원무료교육 JSP (0) | 2022.02.05 |
| 스마트인재개발원 미니프로젝트_국비지원무료교육 (0) | 2022.01.20 |
| 스마트인재개발원 국비지원 무료교육 (0) | 2022.01.14 |
