TIL

TIL - 20220912

오늘은 모던 JavaScript 튜토리얼에서 defer, async 스크립트에 대해 공부했다. 작성한 질문은 다음과 같다. 브라우저에서 HTML을 읽다가 스크립트를 만나면 DOM 생성을 중단하고 스크립트를 실행한다. 외부 스크립트 또한 마찬가지며 외부 스크립트를 모두 다운로드하고 난 후에야 남은 페이지를 처리할 수 있고 이러한 동작 방식은 두 가지 이슈가 일어날 수 있다. 스크립트 아래에 있는 DOM 요소에 접근할 수 없다. 페이지 상단에 용량이 큰 스크립트가 있는 경우 스크립트가 페이지를 막아버린다. 이를 해결할 수 있는 script 속성이 defer와 async이다. 브라우저에서 defer 속성이 있는 스크립트를 '백그라운드에서' 실행한다. 따라서 지연 스크립트를 하는 도중에도 HTML 파싱을 중단하..

TIL - 20220911

오늘은 모던 JavaScript 튜토리얼에서 DOMContentLoaded, load, beforeunload, unload 이벤트에 대해 공부했다. 작성한 질문은 다음과 같다. HTML 문서 생명주기의 세 가지 주요 이벤트는 다음과 같다. DomContentLoaded: 브라우저가 HTML을 전부 읽고 DOM 트리를 완성할 때, 발생한다. 이미지 파일이나 CSS 같은 기타 자원은 이 주기에서 기다리지 않는다. 이를 활용해 DOM이 준비되었을 때를 확인하고 나서 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 수 있다. load: 이미지, CSS 같은 외부 자원들도 모두 불러오는 것이 끝났을 때, 발생한다. 이를 활용해 이미지 사이즈, CSS 같은 외부 자원이 로드된 후이기 때문에 실제 ..

TIL - 20220910

오늘은 모던 JavaScript 튜토리얼에서 submit 이벤트와 메서드에 대해 공부했다. 작성한 질문은 다음과 같다. submit 이벤트는 폼을 제출할 때, 트리거 되며 폼을 제출하기 전에 검증하는 과정을 거치거나 폼 전송을 취소할 때 submit 이벤트를 주로 사용한다. 폼을 전송하는 방법으로는 두 가지 방법이 있다. input 필드에서 Enter 키 누르기 이나 클릭하기 이런 방식으로 폼을 전송하면 submit 이벤트가 트리거 되며 사용자가 설정한 이벤트 핸들러가 실행되고 이벤트 핸들러에 에러 검증 과정이 있으면 에러를 출력하고 event.preventDefault()를 호출한다. form.submit() 메서드는 순수 자바스크립트만으로 폼 전송을 하고 싶은 경우에 사용한다. submit() 메서드..

TIL - 20220909

오늘은 모던 JavaScript 튜토리얼에서 이벤트: change, input, cut, copy, paste에 대해 공부했다. 작성한 질문은 다음과 같다. change 이벤트는 input에서 요소가 변경이 끝날 때, 이벤트가 발생한다. 만약에 input의 type이 'text'인 경우에는 요소 변경이 끝날 때가 아닌, 포커스를 잃을 때 이벤트가 발생한다는 점에 유의해야 한다. input 이벤트는 사용자가 값을 수정할 때, 이벤트가 발생한다. 여기서 input 이벤트는 수단 방법을 가리지 않고 어떤 방법으로든 값이 변경된다면 이벤트는 무조건 발생한다. cut, copy, paste 이벤트는 값을 잘라내기, 복사하기, 붙여넣기 할 때, 이벤트가 발생한다.

TIL - 20220908

오늘은 모던 JavaScript 튜토리얼에서 focus와 blur에 대해 공부했다. 작성한 질문은 다음과 같다. focus와 blur 이벤트는 다음과 같은 경우에 발생한다. focus: 요소가 포커스를 받을 때, 이벤트가 발생한다. blur: 요소가 포커스를 잃을 때, 이벤트가 발생한다. 회원가입 상황을 가정하여 focus 되었을 때는 에러 메시지를 숨기고 blur 되었을 때 규칙에 맞는 입력을 했는지 확인하고 알맞게 입력하지 않았을 경우 에러 메시지를 출력한다. 사용자와 상호작용하는 요소인 , , , 들은 확실히 focus와 blur를 제공하지만 , , 요소들은 focus, blur 이벤트가 트리거되지 않는다. 하지만, tabIndex를 사용하면 포커스를 할 수 있다. tabIndex 속성이 있는 요소..

TIL - 20220907

오늘은 모던 JavaScript 튜토리얼에서 폼 프로퍼티와 메서드에 대해 공부했다. 작성한 질문은 다음과 같다. 요소에는 세 가지 중요 프로퍼티가 있다. select.options: 하위 요소를 담고 있는 컬렉션 select.value: 현재 선택된 값 select.selectedIndex: 현재 선택된 의 인덱스 Function, Event 생성자 함수로 Option도 만들 수 있다. option = new Option(text, value, defaultSelected, selected); text: option 내부의 텍스트 value: option의 값 selected: true면 해당 값이 선택된다. defaultSelected: true면 HTML 속성 selected가 생성된다.

TIL - 20220906

오늘은 모던 JavaScript 튜토리얼에서 드래그 앤 드롭과 마우스 이벤트에 대해 공부했다. 작성한 질문은 다음과 같다. 드래그 앤 드롭 알고리즘은 다음과 같은 순서로 진행된다. mousedown에는 움직일 요소를 준비한다. 이때, 기존 요소의 복사본을 만들거나 해당 요소의 클래스를 추가하는 등 원하는 형태로 작업할 수 있다. 이후 mousemove에서 position:absolute의 left, top을 변경한다. mouseup에서는 드래그 앤 드롭 완료와 관련된 모든 작업을 수행한다. 이러한 기반을 이용하여 날아가는 요소를 강조하거나 특정 영역이나 방향으로 드래그하는 것을 제한할 수도 있다.

TIL - 20220905

오늘은 모던 JavaScript 튜토리얼에서 마우스 이벤트에 대해 공부했다. 작성한 질문은 다음과 같다. 마우스 이벤트의 종류는 다음과 같다. mousedown: 마우스 왼쪽 버튼을 눌렀을 때 발생하는 이벤트 mouseup: 마우스 왼쪽 버튼을 눌렀을 때 mousedown 이벤트가 발생하고 뗄 때, mouseup 이벤트가 발생한다. mousemove: 마우스를 움직일 때 발생한다: click: 마우스 왼쪽 버튼을 사용하여 동일 요소에서 mousedown, mouseup 이벤트를 연달아 발생시킬 때, click 이벤트가 실행된다. 마우스 이벤트 순서는 마우스 왼쪽 버튼을 눌렀을 경우, mousedown - mouseup - click 순서로 진행된다. 마우스 이벤트 좌표의 종류로는 두 가지 종류가 있다. ..