[TIL] 2020.03.06 (금)

1. Vanilla JavaScript

1) form 관련 이벤트

   (1) submit: form의 정보를 서버로 전송하는 submit 시에 발생 

   (2) change: 폼 컨트롤의 값이 변경되었을 때 발생

   (3) focus: 엘리먼트에 포커스가 생겼을 때 발생 

   (4) blur: 엘리먼트에 포커스가 사라졌을 때 발생 

 

2) DOM 이벤트

https://www.w3schools.com/jsref/dom_obj_event.asp

 

3) blur vs focusout  

 - blur : 해당 엘리먼트에 포커스가 해제되었을 때 발생. 버블링(X)

   focusout : 해당 엘리먼트에 포커스가 해제되었을 때 발생. 버블링 (O) 

 - focusout과 blur 모두 엘리먼트에 포커스가 해제될 때 발생하는 이벤트인데, 둘의 차이점은 버블링 여부이다. 

 - 이벤트 버블링 : https://mygumi.tistory.com/315

 

4) 버블링(bubbling) vs 캡쳐링(capturing) 

 - 중첩된 요소에서 이벤트가 발생할 때, DOM API가 이벤트를 전파하는 방식(방향)에 따라 버블링과 캡쳐링 두 가지 방식으로 구분된다. 

 - 버블링 : 이벤트 전파 방향 : 이벤트가 발생한 객체 → window (하위 → 상위) 

   캡쳐링 : 이벤트 전파 방향 : window → 이벤트가 발생한 객체  (상위 → 하위) 

5) innerHTML vs style

 - innerHTML:  js로 값을 바꿀 때 

 - style : js로 스타일을 바꿀 때 

// Set width of stars-inner to percentage
document.querySelector(`.${rating} .stars-inner`).style.width = starPercentageRounded;

// Add number rating
document.querySelector(`.${rating} .number-rating`).innerHTML = ratings[rating];

 

6) DOMContentLoaded 

 - DOMContentLoaded : HTML이 완전히 로드되었을 때 발생. (스타일시트, 이미지, 서브프레임 로딩은 기다리지 X)

    https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

    onload :  스타일시트, 이미지와 같은 모든 의존적인 요소들을 포함하여 전체 페이지가 로드되었을 때 발생. 'load 이벤트'라고 부름.

    https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

 - jQuery의 ready와 비슷 

 - 이벤트를 한 번 싹 정리를 해야 하는데.... 

 

7) ES6 Arrow Function 

 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98

 

8) Class 제어 

 - 블로그에 글 써서 정리했음  https://webstudynote.tistory.com/95

 

9) Ajax

https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started

 

2. BootStrap 

 - 내가 왜 2차 프로젝트 셀렉트 메뉴를 CSS로 스타일링하겠다고 생각했을까? 회원가입 페이지 UI를 CSS로 직접 스타일링하다보니까 은연중에 셀렉트 메뉴도 내가 직접 스타일링해야 한다고 생각했나보다. 

 - 부트스트랩 써도 될 것 같다. 잘 들어가겠지..? 

 - https://getbootstrap.com/docs/4.4/components/forms/#select-menu