20210318(목)

2021-03-18

1. 학습 날짜

• 2021-03-18

2. 학습 시간

• 12:00 ~ 16:00

3. 학습 범위 및 주제

• 자바스크립트의 이벤트

• 자바스크립트에서의 문과 식

4. 학습 목표

• 자바스크립트에서 이벤트를 이해한다. 버블링 문제를 해결하는 방법에 대해 알아본다.

• 자바스크립트에서의 문과 식에 대해 알아보고 정리해보자.

5. 학습 정리

• 자바스크립트의 이벤트

• 자바스크립트에서 문과 식

6. 상세 학습 내용

• 어제 자바스크립트의 이벤트를 학습하면서 계속 이해가가지 않았던게, 아주 깊속한 곳에서 click 이벤트가 발생하면 이 이벤트가 발생한 객체의 부모를 통하면서 계속 버블링이 되는데 부모에서는 이를 어떻게 끊을지에 대한 방법이었다.

  • 기본적인 방법으로 stopPropagation 메서드가 존재하지만, 이 메서드는 추천되지 않는 방법이라고 공식문서에서도 나와있었다.

  • 그렇다면 도대체 어떻게 해야할까?

  • 그 방법은 해당 객체마다 조건을 사용해서 만약 자식노드에서 발생한 이벤트와 같은 종류가 자신에게서 등록되어 있다면 해당 이밴트가 왔을 때 조건문을 사용해서 거르는 방법이 있었다.

  • 가장 쉬운 방법으로는 자신의 tag 와 event.target.tagName 이 같으면 이벤트를 실행하는 방법이 있다.

  • 이 방법의 문제는 자신의 자식에서 발생한 이벤트도 자신이 처리를 해야한다면, 문제가 생긴다. 왜냐면 해당 방법은 자신이 직접 눌러져야지만 발동되기 때문이다.

  • 이를 해결하기 위한 방법으로 몇 가지 방법이 더 있지만 여기서 정리하지는 않겠다.

• 자바스크립트의 문과 식

  • 얼마전에 모의 면접을 영상으로 볼 기회가 있었는데, 해당 질문이 나왔었다. 그리고 이 질문은 질문 자체를 이해하지 못했어가지고 한번 알아봐야겠다라고 생각을 했고 마침 시간이 붕떠서 잠깐 알아봤다.

  • 식은 모든게 값 으로 귀결된다.

  • 문은 인터프리터에게 전달될 명령문이다. 명령문이기 때문에 그 값으로는 존재할 수가 없게 된다. 따라서 아래와 같은 라인에서는 에러가 발생한다.

    let a = if (true) 3;

    • 실패하는 이유는 if 는 제어문 이기 때문에 어떤 값으로 존재할 수가 없게 된다.

7. 오늘 학습 내용에 대한 개인적인 총평

• 흠.. 오늘 하루는 놀았다.

8. 다음 학습 계획

• html, css 학습

• 자바스크립트의 문고 식 정리하기