[20210616_TIL] 항해99_10일차 | dom 이벤트 버블링에 대하여

오늘 한 일:

1.알고리즘 문제풀기

2.스터디원과의 수다,,,

3.자바스크립트 공부 

4.함께 자라기 : 애자일로 가는길 독서

 

---

1.알고리즘 문제 풀기:

오늘은 스터디원들과 같이 문제를 풀었다. 한 문제를 정해놓고 같이 1시간동안 풀어본 후에, 만나서 각자 어떻게 풀었는지를 공부하는 방식으로 하루동안 진행했다. 그렇게해서 오늘하루동안 풀었던 문제는 총 5문제 정도 되는 것 같다 

 

오늘은 좀 알고리즘 문제풀기에 익숙해졌을까. 생각했었는데, 딱히 그렇게 익숙해지지는 않는 것 같다. 사실 오늘도 약간의 좌절감과 함께 하루를 마무리하는 느낌이다. 

 

2.스터디원들과의 수다,, :

어제부터 학원에서 짜준 스터디원들과 함께 공부를 시작하게 되었다. 그런데, 생각보다 대화가 잘 통하고 마음이 맞는 사람들과 함께 하게 된 것 같다. 그러다 보니, 중간중간에 이런저런 수다를 나누게 되었는데, 자칫 삭막해져버릴 뻔한 이 취준의 시간에 뭔가 사람들과 만나서 대화를 나누는 기분을 느낄 수 있어서 좋았다. 참 게더라는 앱이 신기한게, 현장감이 잘 느껴진다. 

 

---

3.자바스크립트 공부 : 

오늘도 자바스크립트 공부를 빼놓을 수 없다. 어쩌면 하루 중에 내가 가장 기다리는 시간일지도 모르겠다. 오늘도 때마침 굉장히 재미있는 개념을 배웠다. 바로 이벤트의 흐름에 대해서 이해하는 내용이었다.  아래 그림은 내가 직접 어도비 xd에서 그려본 그림이다. 

 

이벤트 흐름에는 3단계가 있다고 한다. 1)캡처링 단계 2)타겟팅 단계 3)버블링 단계. 

위의 그림에서 element1은 2의 부모이며, 3은4의 부모이다. 그리고 각각의 요소들에 이벤트를 넣어둔 상태이다. 이 상황에서 element2를 클릭을 하면, 최상위노드 window로부터 이벤트가 내려온다.(캡처링단계) 그렇게 target에 도착하여 해당 이벤트 리스너를 호출하는 타겟팅 단계에 진입한다. 그 후 다시 최상위노드로 올라가는 버블링 단계를 거치게 된다. 

 

아 그리고 부모 요소에도 만약 이벤트가 등록이 되어있다면, 자식 요소를 클릭했을 때, 똑같이 부모 요소의 이벤트도 발생하게된다. 그러니까 캡쳐링단계와 버블링 단계 모두 부모요소에서도 실행된다는 것이다. 그렇기 때문에 addEventlistner메서드에는 마지막 인자로 캡처링 단계의 호출 여부를 불리언 값으로 전달할 수 있다. (부모 요소를캡처링 단계에서 호출될 수 있도록 true의 값을 주면, 자식요소를 클릭했을 때에도 부모요소가 먼저 호출된다.) 

 

기본적으로 부모 노드들은 버블링 단계에서 호출되며, 타겟의 이벤트 리스너가 먼저 호출되고 나중에 부모 노드들의 이벤트 리스넉 호출이 된다. 

---

다음으로 공부했던  JS의 내용은 이벤트 전파를 제어하는 내용이었다. 이 내용에는 그렇게 특별할 것은 없었다. 앞에서 이야기했던 캡처링과 버블링의 개념을 기반으로 어떤 이벤트가 특정 상황에서 발생하지 않도록 해주는 메서드를 소개해주는 장이었다. 

event.stopPropagation(); 이 코드는 이벤트가 상위로 전파(버블링)되지 않도록 하는 메서드이다. 

event.preventDefault(); 이 코드는 브라우저에서 기본적으로 제공한기본 행위를 막는 메서드이다.

---

다음으로는 이벤트 위임처리에 대해서 배웠다. 그러니까 쉽게 말해서, 부모요소에 이벤트를 등록해두면, 해당 자식 요소를 클릭해도 이벤트가 발생하게 된다. 이럴 경우를 대비하여, 특정 자식요소에서는 클릭을 해도 이벤트가 발생하지 않도록 처리를 해줄 수가 있는 것이다. (if문을 활용하면 된다)

.querySelector("ul#todo-list")
        .addEventListener("click", function (event) {
          if (event.target.className.indexOf("remove-button") < 0) {
            return;
          }

특정 상황일때만 이벤트가 발생하도록 지정해줬다. 

 

또한 특정 요소를 클릭했을 때, 가장 가까운 요소를 선택할 수 있는 방법도 배웠다. 

const li = event.target.closest("li"); 
console.log(`${li.innerText}삭제`);
li.remove();

그러니까, 클릭한 요소에서, 가장 가까운 "li"요소를 찾아서, 상수에 저장한다. 그런 다음 제거를 했다. 

 

---

4.함께 자라기 : 애자일로 가는길 독서

 

이 책은 오시영 튜터님께서 갑자기 게더 채팅방에 띠용하고 올리신 책이었다. 나는 책 읽는걸 좋아한다. 안그래도 코딩하느라 책도 못읽고 있는 상황이었는데, 튜터님께서 책을 추천해주시니, 그것도 개발과 관련된 책이니, 얼른 사서 죄책감 없이 읽어야겠다는 생각이 들었다. 조금씩 읽으며 글을 남기고, 나중에 여유가 되면 독후감도 써봐야겠다. 

 

1) 더하기 보다는 곱하기를 하라 : 무슨 말인고 하니, 새로운 것을 계속 더하기만 하지 말고, 지금 내가 가지고 있는 것과 새로운 것을 어떻게 연결시킬 수 있을 것인지를 계속해서 생각해야 한다는 것이다. 단순히 새로운 것을 내 안에 채워나가기면 하면 2 + 2+ ... 밖에 되지 않겠지만, 내가 기존에 가지고 있는 것들과 어떻게 연결지어서 활용할 수 있을지 고민하면 그것이 바로 곱하기다. 이것이 훨씬더 생산적인 방식이다.  

 

2)학습하기 힘든 직업이 살아남는다 : 이제는 인공지능 시대가 도래했기 때문에, 컴퓨터가 대체할 수 없는 직업을 가지는 것이 중요하다. 만약 인간이 학습하기 좋은 조건이 있다면, 그것은 컴퓨터에게도 마찬가지이다. 그런 경우라면 연산속도가 인간에 비해 미치도록 빠른 컴퓨터가 인간을 이기는 것은 너무나 당연하다. 그렇기 때문에 우리는 컴퓨터가 학습하기 힘든 것을 학습할 수 있는 사람이 되어야 한다. 옥스퍼드의 연구에 따르면 컴퓨터가 병목현상을 일으키는 영역이 있다고 한다. 지각과 조각, 창의적 지능, 사회적 지능이 그것이다. 이런 내용은 사실 식상하다. 너무 많이 들어온 내용이다. 그 와중에 내 눈에 띄는 글이 있었는데, 컴퓨터 프로그래머와 소프트웨어 개발자의 차이이다. 

컴퓨터 프로그래머는 컴퓨터에게 대채될 확률이 48%이며, 소프트 웨어 개발자는 4%밖에 되지 않는다. 둘의 차이는 무엇일까? 컴퓨터 프로그래머는 다른 사람이 준 스펙대로 개발하는 것을 주 업무로 하는 것을 말한다. 별 다른 협상, 설득이 필요하지 않다. 반면에 소프트웨어 개발자는 뭘 만들지 스스로 고민하고 설계하는 부분이 포함되며, 그 과정에서 다른 이들과의 의사소통이 필요한 업무가 많다. 이런 점에서 봤을 때, 우리는 단순한 프로그래머가 될 것이 아니라, 스스로 고민하고 설계하고 다른 사람들과 협상하는 소프트웨어 개발자가 되어야 할 것이다. 

 

---

내일도 마찬가지로 알고리즘을 풀어내기 위한 하루를보내야한다. 너무 어렵게 느껴지지만, 그냥 부딪히는 수 밖에는 없다고 생각한다. 피할 수는 없는 노릇이다..