1. 정규표현식?

• 특별한 문자를 조합하거나 확인할 때 사용하는 패턴이다.
• 주로 test, String, match, replace, search, split  메서드와 같이 쓰인다.

2. 정규표현식 만드는 법

• 따옴표를 ( " " )를 슬래쉬 ( / / )로 대신한다.
• 특수문자나 영어 알파벳 철자를 넣어서 패턴을 만든다.

const str = /hello world/;
const str = new RegExp("hello world"); // RegExp객체의 생성자 함수를 호출. 결과는 같다.

• 위의 두 가지 방법은 정규식이 계속 지속될 때는 첫 번째, 정규식의 패턴이 바뀌는 경우는 수정을 위해 함수를 사용하는 것이 좋다.

3. 어떻게 사용하는 것일까?

• 포인트는 \와 /의 쓰임이다. 정규표현식에서 특수기호를 사용할 때 사용한다. 일반적인 문자열로 읽지 못하도록 만드는 것이다.

1.  g : 전역 검색
2. i : 영어 대소문자 비교 없이 검색
3. m : g보다 넓게 줄이 바뀌어도 검색
4. y : lastIndex의 속성에 숫자를 지정해서 y로 검색을 하면 지정해준 숫자의 index의 문자만 검색
5. * : 반복되는 문자를 최대한 검색
6. *? : 반복되는 문자를 최소한으로 검색
7. a-z 혹은, A-Z 혹은,  ㄱ-ㅎ 혹은, 0-9 : 범위 지정
8. . : 그 줄의 모든 문자열
9. \d : 숫자
10. \D : 숫자가 아닌 모든것
11. \w : 영어와 숫자
12. \W  : 영어랑 숫자 빼고 전부 다
13. \s : 띄어쓰기
14. \S : 띄어쓰기 제외하고 전부 다
15. | : or
16. [찾을 문자] : 찾고 싶은 문자를 찾아줌
17. [^제외할 문자] : 제외할 문자를 빼고 모든 문자를 찾아줌. ( 대부분 ^ 는 부정 )
18. ^시작할 문자 : 시작할 문자로 시작한다.
19. 끝낼 문자$ : 끝낼 문자로 끝을 낸다.
20. () : 그룹 검색과 분류 ( 주로 match에 사용)
21. \b : 단어의 처음과 끝
22. \B : 단어의 처음과 끝 빼고 전부 다

4. 정규표현식 연습

https://regex101.com/

이렇게 보아서는 잘 이해가 안 되는 것이 정상이다. 필요한 부분에 찾아 사용하다 보면 적응이 쉽게 된다. 필요한 정규 표현식을 사용하여 문제 풀이 시간을 줄여보자!

1. input의 다양한 타입

• HTML의 input은 다양한 타입을 가지고 있다. 잘 사용하면 디자인적으로 혹은 기능적으로 매우 좋다.
  1. <input type="password"> : 비밀번호 창이다. 문자가 ●이나 *로 입력되기 때문에 무엇을 입력하는지 입력하는 사람 빼고는 모른다.
  2. <input type="submit"> : 입력된 창에 있는 데이터를 전송한다. 이때, 버튼은 자동으로 생긴다.
     •  
  3. <input type="radio"> " 라디오 버튼을 만든다.
     • 선택하세요.
     • 이것도 됩니다.
  4. <input type="checkbox"> : 체크박스를 만든다.
     
     • 체크할 수 있어요.
     • 여기도 역시 됩니다.
  5. <input type="date"> : 날짜를 선택해 표시할 수 있다.
  6. <input type="color"> : 색상 선택기가 표시된다.
     • 누르면 색상을 선택 할 수 있어요.
  7. <input type="range"> : 슬라이드 컨트롤이 표시된다.
     • 조절 할 수 있어요.
  8. <input type="month"> : 월과 연도를 선택할 수 있다.
     •   date와 다릅니다! 일은 선택할 수 없어요.
  9. <input type="week"> : 주와 연도를 선택할 수 있다.
     • 마찬가지로 date와 month와 달라요.
  10. <input type="time"> : 시간을 선택할 수 있다.
  11. <input type="email"> : 이메일을 적을 수 있다. 자동적으로 유효성 검사가 된다.
      • 보기에는 그냥 텍스트 박스이지만 이메일 형식을 맞춰야 해요.
  12. <input type="tel"> :  전화번호를 입력할 수 있다.
      • 이메일과 마찬가지입니다.
  13. <input type="url"> : url형식을 입력할 수 있다.
      • 또 이메일, 전화번호와 마찬가지예요.

2. Function Composition (함수의 조합)

• 함수를 합쳐서 다시 새로운 함수를 만든다.

function add5(num) {
	return num + 5;
}
function add3(num) {
	return num + 3;

add3(add5(0)); // 8

• 위처럼, 함수 두 개를 결합했다. 안쪽의 함수가 먼저 실행된다.
• 이처럼, 함수를 한 가지 기능만을 구연되게 해 놓으면 나중에 유지보수와 재활용에 매우 뛰어나다. 정확히 하나의 함수가 하나의 일을 하고 있고, 어떤 일을 하는지 찾기도 쉽기 때문이다.

3. 커링

• 함수를 사용할 때, 여러 개의 인자를 한번에 변수로 넣어서 호출하는것이 아니라,( Ex : function add (num1, num2, num3) ) 모든 인자를 분리하여 여러개의 함수로 만들어 사용하는 것이다. ( Ex : function add(num1)(num2)(num3) )

function sum(num1) {
	return function(num2) {
	return num1 + num2;
    }
}

sum(3)(5); // 8

let sum10 = sum(10);
sum10(20); // 30
sum10(40); // 50

• 위에서 보이듯이 num1의 값을 결정해 놓고, num2 만 바꿔줌으로써, 여러 가지 결과를 원하는 대로 얻을 수 있다.
• 클로저와 마찬가지로 재활용이 매우 용의 하다.

1. onsubmit

• 입력받은 정보들을 전송한다.
• 회원가입과 같은 기능에서 입력된 정보들을 전송할 수 있다.

2. onchange

• 데이터 변화를 감지한다.

3.  onmouse 이벤트

1. onmouseenter : 마우스 포인터가 요소안으로 들어왔을 때 발생하는 이벤트이다. ( CSS의  hover 같은 상황 ) 자식 요소도 모두 포함한다. 마우스가 요소 밖으로 나갔다가 다시 들어오지 않는 이상 이벤트는 발동하지 않는다.
2. onmouseover : onmouseenter의 반대의 경우. 영역을 벗어나지 않아도 가능.
3. onmouseout : 위와 반대로,  마우스 포인터가 밖으로 나왔을때 혹은, 자식 요소에 들어가면 발생하는 이벤트.
4.  onmousemove : 마우스 포인터가 요소 안에서 움직일때 발생하는 이벤트.

4. onkey 이벤트

1. onkeyup : 키보드가 올라 올때 발생하는 이벤트
2. onkeydown : 키보드가 눌려졌을때 발생하는 이벤트
3. onkeypress : 키보드가 눌려졌을때 발생하는 이벤트.
   • onkeydown과 달리 키보드가 계속 눌려진 상태에서도 이벤트가 계속 발생하는점이 다르다.

5. event.stopPropagation

• 이벤트 실행시 부모요소의 이밴트 전달을 중지하라는 의미.
• 이벤트는 실행될 시 부모 요소까지 이벤트를 전달한다. 이를 멈춰서 자신이 속한 요소의 이벤트만 실행시킨다.

6.  event.preventDefault

• 페이지를 이동하거나, 혹은 전송 ( 아까 onsubmit ) 등을 사용하였을 때, 페이지가 리로드 되는 것을 막아준다.
• 페이지 리로드를 막기 위하여, event.stopPropagation을 사용한다면, URL이동 자체도 되지 않을 것이다.
• 그래서 지금의 이벤트로 만들어진 상태를 '유지한다'는 의미를 가지고 있는 preventDefault를 사용한다.

1. DOM?

• HTML은 그저 구조를 흩뿌려 놓은 데이터이다.
• 그러므로, 컴퓨터는 데이터를 렌더링 할 뿐이지 어떤 데이터가 들어 있는지는 알 수 없다.
• 이것을 자바스크립트로 옮겨 컴퓨터가 데이터를 알게 해 주는 것이 Document Object Model, DOM이다.

2. 각 엘리먼트에 접근하기

•  HTML도 자바스크립트와 같이 '트리구조'로 이루어져 있다.
• 그래서 서로의 부모와 자식 요소에 접근이 가능하다.
• document.children [원하는 요소의 index]를 사용해서 자식 요소에 접근한다.
• document.children [원하는 요소의 index]. parentNode로 부모 요소에 접근한다.
• 변수로 각 요소의 주소를 할당할 수 있다. document 어쩌고 하면서 적는 것보다 빠르고 간단하다.
  
  • Ex) (콘솔 창에서) head = document.children [0]. children [0] =>  head만 입력해도 됨.
• 위의 예시를 이용해 다른 방법으로 요소에 접근할 수 있는 방법들을 더 알아보겠다.
  • head.firstElementChild => head의 첫 번째 자식 요소
  • head.lastElementChild => head의 마지막 자식 요소
  • head.nextElementSibling => head의 다음에 올 형재 요소
  • head.previousElementSibling => head의 이전에 올 형재 요소 ( 정상적 파일에서는 head 이전의 형재 요소는 없다. 뜻만 이해 하자. )

3. 요소 추가와 삭제

• 요소에 접근하여 수정하는 것은 물론 가능하고, 새로운 요소를 추가할 수도 있다.
• document.createElement('추가할 요소의 element 이름')
  • Ex) document.createElement('div') => 기존의 요소와 아무 상관(형재나 부모 자식 같은 관계가 없는) div요소를 하나 만든다.
• 위에서 만들어진 element를 기존의 element들과의 관계를 설정한다.
  • Ex) testDiv = document.createElement('div') => element를 새롭게 만들면서 변수에 할당해 놓는다. 
    document.body.append(testDiv) => body안에 만든 testDiv를 자식으로 넣어준다.
  • append를 appendChild로 바꿔도 똑같이 자식 요소로 넣어준다.
    • appendChild는 오직 Node객체만 받을 수 있고, 다중 문자를 넣을 수 없고, 리턴값이 있다는 점이 다르기는 하나 위의 예시에서는 같은 기능을 하고 있다.

4. 샐렉터를 선택해서 값을 변경하기

• 요소를 만들고 관계를 설정까지 할 수 있다면, 값을 넣어서 화면에 렌더링 시킬 수 도있다.
• 이때 우리는 querySelector과 querySelectorAll을 사용한다.
  • Ex) 파일에 class이름이 'user'인 요소가 있을 경우
    document.querySelector('. user') => class이름이 user인 가장 처음에 있는 HTML요소를 '유사 배열'로 가져온다.
  • Ex) 파일에 class이름이 'user'인 요소가 여러 개 있을 경우
    document.querySelectorAll('. user') => class이름이 user인 모든 HTML요소를 '유사 배열'로 가져온다.
• 선택된 요소를 변수로 담아서 계속 사용하는 것이 유리하다. ( 중요하다고 생각되어 한번 더 넣는다! )
  • Ex) firstUser = document.querySelector('. user')
    이후 div로 userInfo를 첫 번째 user에 만들어 넣고 싶을 경우
    => userInfo = document.createElement('div')
    => firstUser.append(userInfo)
• 선택된 요소에 textContent를 이용해 문자를 값으로 넣을 수 있다.
  Ex) userInfo.textContent = 'Name: Hendrix'
• 선택된 요소에 class를 추가할 수 있다.
  Ex) userInfo.classList.add('name')
  • class를 넣어 줌으로써, 앞의 요소들과 묶어 주어 원래 있던 CSS를 적용시킨다거나 하는 일들을 할 수 있다.
• 선택된 요소를 remove를 이용해 삭제할 수도 있다.
   Ex) userInfo.remove() => 이는 정확히 내가 지울 userInfo가 어디 있는지 알고 있을 때만 사용할 수 있다.
  • 여러 개의 자식 엘리먼트를 다 지우려고 할 경우
    Ex) document.querySelector('. user'). innerHTML = '';
  • 하지만 위의 방법의 경우 전달 내용이 빈 string인 원시 데이터 형태로 들어가기 때문에 보안 위험이 있다.
  • 그래서 반복문과 같은 원래 HTML에 포함된 메서드를 이용하는 것이 옳다.
    Ex) while(body.firstChild) {body.removeChild(body.firstChild);} => body의 첫 번째 자식 요소가 있다면, 그것을 제거한다.
    • 혹은, 반복문의 조건을 body.children.length > 1과 같이 조절하여 요소가 몇 개 남을 때까지(지금은 1개가 남을 때까지) 삭제를 할 수도 있다.
    • 혹은, 배열로 요소를 가져오는 것을 생각해 본다면, 고차 함수를 이용하거나, for... of 구문을 이용하여 삭제하길 원하는 클래스 이름을 가진 모든 요소를 삭제할 수 도 있다.