TIL

TIL - 20220904

오늘은 모던 JavaScript 튜토리얼에서 커스텀 이벤트 디스패치에 대해 공부했다. 작성한 질문은 다음과 같다. Event 객체는 Function과 같은 생성자 함수로 만들 수 있다. let event = new Event(type[, options]); 여기서 type, options는 다음과 같다. type: 이벤트 타입을 뜻하며 click과 같은 내장 이벤트 혹은 커스텀 이벤트를 넣을 수 있다. options: 이벤트가 버블링 될지 설정하는 bubbles 프로퍼티와 브라우저의 기본 동작을 실행할지 설정하는 cancelable 프로퍼티가 있는 객체이며 이 객체는 선택이다. 설정하지 않을 경우 두 프로퍼티 모두 false가 된다. 이벤트 객체를 생성한 다음에 dispatchEvent를 호출해 요소에 ..

TIL - 20220903

오늘은 모던 JavaScript 튜토리얼에서 이벤트 위임에 대해 공부했다. 작성한 질문은 다음과 같다. 이벤트 위임은 여러 요소를 비슷한 방식으로 다뤄야 할 때 사용하면 좋고, 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고 요소들의 공통 조상에 이벤트 핸들러 단 하나만 할당해도 여러 요소를 한꺼번에 모두 다룰 수 있어서 코드가 간결해지고 초기화가 단순해지기에 메모리도 절약된다. 행동 패턴은 다음과 같은 두 부분으로 구성된다. 요소의 행동을 설명하는 커스텀 속성을 요소에 추가한다. 문서 전체를 감지하는 핸들러가 이벤트를 추적하게 한다. 1에서 추가한 속성이 있는 요소에서 이벤트가 발생하면 작업을 수행한다.

TIL - 20220902

오늘은 모던 JavaScript 튜토리얼에서 버블링과 캡처링에 대해 공부했다. 작성한 질문은 다음과 같다. 버블링의 원리는 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고 이 요소에 해당하는 부모 요소의 핸들러가 동작한다. 이러한 과정은 최상단의 요소를 만날 때까지 반복되며 요소 각각에 할당된 핸들러 모두가 동작한다. 표준 DOM 이벤트에서 정의한 이벤트 흐름에는 세 가지 단계가 있다. 캡처링 단계: 이벤트가 하위 요소로 전파되는 단계 타깃 단계: 이벤트가 실제 요소로 전달되는 단계 버블링 단계: 이벤트가 상위 요소로 전파되는 단계

TIL - 20220901

오늘은 모던 JavaScript 튜토리얼에서 브라우저 이벤트 소개에 대해 공부했다. 작성한 질문은 다음과 같다. 브라우저에서 이벤트란 무엇이 일어났다는 신호이며, 모든 DOM 노드들은 이러한 신호를 만들어내며 종류로는 다음과 같은 이벤트들이 있다. 마우스 이벤트: click 같은 이벤트부터 커서를 요소 위로 올렸을 때, 마우스를 움직일 때와 같은 마우스 이벤트들이 존재한다. 폼 요소 이벤트: 폼을 제출하거나 input과 같은 요소에 포커스 될 때 발생한다. 키보드 이벤트: 키를 누르거나 뗄 떼 발생한다. 문서 이벤트: DOM 생성이 완료됐을 때 발생한다. CSS 이벤트: CSS 애니메이션이 종료됐을 때 발생한다. 이벤트 핸들러란 이벤트가 발생했을 때, 실행되는 함수를 이벤트 핸들러라고 부르고 HTML 안..

TIL - 20220831

오늘은 모던 JavaScript 튜토리얼에서 좌표에 대해 공부했다. 작성한 질문은 다음과 같다. 자바스크립트 메서드는 다음 두 좌표 체계 중 하나를 이용한다. 창 기준: position: fixed와 비슷하게 창(window)의 좌측 최상단 모서리를 기준으로 좌표를 계산한다. 문서 기준: 문서(document) 최상단에서 position: absolute를 사용하는 것과 비슷하게 문서 좌측 최상단 모서리를 기준으로 좌표를 계산한다. 어떤 요소의 좌표를 얻기 위해 사용하는 자바스크립트 메서드로 getBoundingClientRect가 있다. getBoundingClientRect() 메서드는 요소를 감싸는 가장 작은 네모의 창 기준 좌표를 DOMRect 클래스의 객체 형태로 반환한다. DOMRect의 주요..

TIL - 20220830

오늘은 모던 JavaScript 튜토리얼에서 브라우저 창 사이즈와 스크롤에 대해 공부했다. 작성한 질문은 다음과 같다. window.innerWidth: 전체 창 너비 document.documentElement.clientWidth: 스크롤바가 차지하는 영역을 제외한 창 너비 창 사이즈가 필요한 경우는 스크롤바 안쪽에 무언가를 넣거나 그릴 때 사용한다. 그럴 때 documentElement의 clientWidth나 clientHeigh을 사용해야 한다. 을 사용해야 하는 이유는 을 명시하지 않았을 때, 기하 관련 프로퍼티를 사용하면 이상하게 동작할 수 있기 때문이다. scrollBy(x,y): 페이지의 스크롤 상태를 현재 포지션을 기준으로 상대적 조정한다. scrollTo(x,y): 절대 좌표를 기준으..

TIL - 20220829

오늘은 모던 JavaScript 튜토리얼에서 요소 사이즈와 스크롤에 대해 공부했다. 작성한 질문은 다음과 같다. 기하 프로퍼티 값은 숫자이며, 단위는 px(픽셀)이다. 패딩이 없는 경우에 clientHeight, clientWidth로 콘텐츠 영역 크기를 구할 수 있다. 만약, 패딩이 있어서 패딩을 포함하는 콘텐츠 영역 크기를 구하고 싶다면 offsetHeight, offsetWidth를 사용하면 된다. clientHeight와 scrollHeight의 차이점은 스크롤바에 감춰진 영역을 포함하냐의 차이다. 예를 들어 텍스트가 많아 세로로 스크롤바가 생겼다고 가정했을 때, clientHeight로 크기를 구하면 콘텐츠 영역 안쪽의 높이가 나오지만 scrollHeight로 크기를 구하면 세로 스크롤바에 가려..

TIL - 20220828

오늘은 모던 JavaScript 튜토리얼에서 스타일과 클래스에 대해 공부했다. 작성한 질문은 다음과 같다. 요소에 스타일을 적용하는 방법으론 두 가지 방법이 존재한다. CSS가 담긴 클래스를 만들고 처럼 클래스로 추가하기 처럼 프로퍼티를 style에 바로 써주기 보통 style보다 CSS가 담긴 클래스를 만들어 사용하는 것을 우선시 해야 한다. style은 클래스를 다룰 수 없을 때 사용해야 한다. 클래스를 관리할 수 있게 해주는 DOM 프로퍼티로는 다음이 있다. className: 클래스 전체를 문자열 형태로 반환해주는 프로퍼티 클래스로 클래스 전체를 관리할 때 유용하다. classList: 클래스 하나를 관리할 수 있게 도와주는 메서드이며 add/remove/toggle/contains가 구현된 객체..