[프론트엔드스쿨] WIL 6주차

제로베이스 프론트엔트 스쿨 6주차 WIL

자바스크립트 스터디를 진행하면서 강의를 들으며 빠르게 지나쳤던 개념들을 다시 살펴보았다.

1. DOM

- 텍스트로 되어 있는 HTML 문서를 브라우저가 이해할 수 있는 자료 구조(트리구조)로 생성한 것.

2. 객체의 메서드와 this

- JS의 객체는 메서드라는 속성을 가진다. 이는 객체 프로퍼티에 할당된 함수로 객체가 행동할 수 있게 해준다.

JS토이프로젝트 강의를 들으면서 DOM 인터페이스 메서드들을 직접 다루게 되었다. 그 중 가장 많이 사용한 것을 우선 정리한다.

3. addEventListener

- EventTarget : 이벤트를 수신할 수 있고, 수신한 이벤트에 대한 수신기(listener)를 가질 수 있는 객체가 구현하는 인터페이스이다.

- EventTarget.addEventListener() : 지정한 유형의 메서드를 이벤트 대상이 수신할 때마다 호출할 함수를 설정한다.

- 장점: 다수의 수신기 부착 가능, 어떤 이벤트 전파 단계에 동작해야 하는지 조절 가능, HTML, SVG요소 외에도 이벤트 대상이라면 사용가능

- 구문

addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);

type

수신할 이벤트 유형을 나타내는 대소문자 구분 문자열

listener

지정한 이벤트(Event 인터페이스를 구현한 객체)를 수신할 객체입니다. handleEvent() 메서드를 포함하는 객체 또는 JavaScript 함수여야 한다.

(options 와 useCapture는 옵셔널 변수이다.)

- 과제: 과제1인 HTML/CSS 과제를 시작했다. 접근성 관련해서 신경쓸게 많았다. 추석까지 있어서 생각보다 많이 진행하지 못했다.

- 토이프로젝트로 하는 자바스크립트 실습 강의 진도가 참 안나간다...똑같이 따라했다고 생각했는데도 소소한 오타부터 시작해서 실수가 많아서 다시 확인하는데 오래 걸리는 것 같다. 이런 강의는 어떤식으로 진행하는게 학습에 도움이 가장 많이 될지가 항상 고민이다.

- 추석이라는 핑계를 대보지만 핑계는 어디까지나 핑계니깐....다음주에는 더 박차를 가해봐야겠다