🔶 JavaScript

• 요소 노드의 텍스트를 조작해야 하는 경우 어떤 프로퍼티를 사용해야 하는가?

: nodeValue보다 textContent 프로퍼티 사용해야 함
: 중첩된 요소의 모든 텍스트를 모두 취득하거나 변경할 수 있기 때문

• innetText 프로퍼티의 사용을 권장하지 않는 이유는 무엇인가?

: innerText 프로퍼티는 CSS에 종속적이므로 textContent보다 느리고, CSS에 의해 비표시로 지정된 요소 노드의 텍스트는 반환하지 않음

• DOM 요소를 추가하는 방법에는 무엇이 있는가?

: 문자열을 추가하여 파싱하는 innerHTML, innerAdjacentHTML 프로퍼티 방식
: 요소 노드와 텍스트 노드를 생성해서 기존 DOM 요소에 추가하는 createElement, createTextNode 메서드 방식

• innerHTML, innerAdjacentHTML의 단점은 무엇인가?

: XSS(크로스 사이트 스크립팅 공격)에 취약함

• innerHTML, innerAdjacentHTML의 차이점은 무엇인가?

: innerHTML은 기존 DOM 요소를 제거하고 새로 추가하는 방식이기 때문에 상대적으로 느리지만, innerAdjacentHTML은 기존 DOM 요소를 건드리지 않고 요소를 추가하므로 상대적으로 빠름
: 또한 innerHTML은 위치를 지정하여 DOM 요소를 추가할 수 없지만, innerAdjacentHTML은 위치를 지정하여 DOM 요소를 추가할 수 있다는 장점이 있음

• 여러 개의 노드를 추가할 때 어떻게 리플로우를 최소화할 수 있는가?

: 컨테이너 노드(div)를 생성한 후 생성한 컨테이너 노드에 복수의 노드를 appendChild로 추가하여 기존 DOM 요소에 추가한다면 리플로우가 한 번만 발생하지만, 이 경우 필요없는 div가 생성된다는 단점이 있음
: createDocumentFragment 메서드를 사용하여 DocumentFragment 노드에 복수의 노드를 추가한 후 기존 DOM 요소에 추가하면 컨테이너 노드의 생성 없이도 복수의 노드를 쉽게 추가할 수 있음

• 클래스를 조작해야 하는 경우 className과 classList의 차이는 무엇이고, 무엇을 사용하는 것이 바람직한가?

: className은 클래스의 목록을 문자열로 참조할 수 있고, classList는 클래스의 목록을 유사 배열 객체로 참조할 수 있음
: 문자열을 조작하는 것보다 유사 배열 객체를 배열로 변환하여 조작하는 것이 더 간편하기 때문에 classList를 사용하는 것이 바람직함

• 이벤트란 무엇인가?

: 브라우저가 처리해야 할 특정 사건을 감지하여 발생시키는 것

• 이벤트 핸들러란 무엇인가?

: 이벤트가 발생했을 때 호출될 함수

• 이벤트 핸들러 등록이란 무엇인가?

: 이벤트 핸들러의 호출을 브라우저에게 위임하는 것

• 이벤트 드리븐 프로그래밍이란 무엇인가?

: 프로그램의 흐름을 이벤트 중심으로 제어하는 것

• 이벤트 핸들러를 등록하는 방식에는 무엇이 있는가?

: 이벤트 핸들러 어트리뷰트, 이벤트 핸들러 프로퍼티, addEventListener 메서드

• 이벤트 객체란 무엇이고, 어떻게 접근할 수 있는가?

: 이벤트가 발생했을 때 동적으로 생성되는 객체이고, 이벤트 타입에 따라 상이한 프로퍼티를 가지고 있음
: 이벤트 핸들러를 등록할 때 매개변수로서 암묵적으로 이벤트 객체가 전달되지만, 이를 명시적으로 접근하고 조작하기 위해서는 매개변수를 따로 지정해주어야 함

• 어트리뷰트 방식으로 이벤트 핸들러를 등록하는 경우의 특징과 주의할 점은 무엇인가?

: 인수를 전달하기 위해 함수 호출문 형태의 문자열을 어트리뷰트의 값으로 할당해야 함
: 이벤트 객체를 접근 및 조작하기 위해서는 무조건 event라는 매개변수명을 사용해야 함

• 프로퍼티 방식으로 이벤트 핸들러를 등록하는 경우의 특징은 무엇인가?

: DOM 노드 객체가 가진 프로퍼티의 값으로 호출할 함수를 할당하는 방식
: 프로퍼티의 이름은 ‘접두사 on + 이벤트 타입’으로 이루어져 있음
: 하나의 이벤트 핸들러만 등록할 수 있음

• addEventListener 방식으로 이벤트 핸들러를 등록하는 경우의 특징은 무엇인가?

: 매개변수로 이벤트 타입, 이벤트 핸들러, 이벤트 전파 방식을 전달하는 방식
: 하나 이상의 이벤트 핸들러를 등록할 수 있음

• 이벤트 핸들러는 어떻게 제거할 수 있는가?

: 프로퍼티 방식의 경우 null을 값으로 할당하여 제거 가능
: addEventListener의 경우 removeEventListener 메서드를 사용하여 제거 가능
: 무명함수를 이벤트 핸들러에 등록한 경우에는 removeEventListener를 사용하여 제거할 수 없음

• 이벤트 객체의 target과 currentTarget 프로퍼티는 각각 무엇을 값으로 가지는가?

: target은 이벤트를 발생시킨 요소
: currentTarget은 이벤트 핸들러가 바인딩된 요소

• 이벤트 전파란 무엇인가?

: DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트가 DOM 트리를 통해 전파되는 것

• 이벤트 전파에는 어떤 단계가 있는가?

: window 객체부터 타고 내려가는 이벤트 캡처링 단계, 이벤트 target에 도달하는 타깃 단계, 이벤트 target에서 window 객체까지 다시 올라가는 이벤트 버블링 단계

• 이벤트 위임이란 무엇인가?

: 여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 것

• 이벤트 위임을 구현할 때 유의해야 할 점은 무엇인가?

: 상위 요소에 이벤트 핸들러를 등록하는 경우 모든 하위 요소에 이벤트가 전파되므로, 이벤트를 전파시키고 싶지 않은 요소에만 조건문으로 따로 조치를 취해야 함

• DOM 요소의 기본 동작은 무엇이고, 이를 어떻게 중단할 수 있는가?

: a 요소를 클릭하면 페이지 이동이 되는 것처럼 DOM 요소 자체가 가지고 있는 기본 동작
: DOM 요소의 기본 동작을 중단하기 위해서는 preventDefault 사용해야 함

• 이벤트 위임의 문제점을 해결하기 위해 이벤트 전파를 중지시키려면 어떻게 해야 하는가?

: stopPropagation 메서드를 사용하면 메서드를 사용한 DOM 요소를 기점으로 이벤트의 전파가 중지됨
: 단 캡처링 단계에 캐치하는지, 버블링 단계에 캐치하는지에 따라 이벤트 전파를 중지하는 시점이 달라짐

• 이벤트 핸들러 내부의 this는 무엇을 가리키는가?

: 어트리뷰트 방식에서 인수로 전달한 this는 이벤트 핸들러가 바인딩된 DOM 요소를 가리킴
: 프로퍼티 방식과 addEventListener 메서드 방식 내부에서의 this는 이벤트 핸들러가 바인딩된 DOM 요소를 가리킴

• 이벤트 핸들러 내부에서의 this 사용은 바람직한가?

: 변칙적인 경우가 많아서 에러가 발생할 수도 있고, 가독성이 좋지 않기 때문에 this를 사용하지 않는 것이 바람직함
: this 사용 대신 바인딩된 DOM 요소를 직접적으로 참조하는 것이 더 좋음

• 커스텀 이벤트로 생성한 이벤트 객체의 특징은 무엇인가?

: preventDefault 메서드로 기본 동작을 취소할 수 없고 버블링되지 않음, 즉 bubbles와 cancelable의 기본 값이 false로 설정됨
: dispatchEvnet 메서드를 사용하여 동기적으로 이벤트 핸들러를 호출해야 함
: 노드 객체에 커스텀 이벤트 객체의 프로퍼티가 존재하지 않기 때문에 어트리뷰트 방식과 프로퍼티 방식으로 이벤트 핸들러를 등록할 수 없고, addEventListener 메서드 방식으로 이벤트 핸들러를 등록해야 함