230313(월)

🎄 성장일지 3.2

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌳 키워드 (1.0)
최대한 간단하게 정리, 추후에 보면서 스스로 설명
🍉 경험 위주로 (2.0)
단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성
❄️ 정해진 템플릿에 맞춰서 (3.0)
키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성
(3.1) 230102부터 시작되는 학습에 관한 내용 추가
(3.2) 230313부터 좀더 경험, 감정 위주의 내용도 담기!

🔑 오늘의 키워드

DOM api가 존재하는 이유

• DOM Tree를 탐색하기 위해 JS로 탐색 알고리즘을 구현하면 너무 힘고 번거롭다.
• 해서 브라우저에서 DOM Tree를 탐색하기 위한 다양한 DOM api를 제공한다.

textNode vs elementNode

• DOM의 노드들은 대부분 text 노드와 element 노드로 나누어진다.
• firstChild, nextSibling 등은 태그 사이의 공백인 textNode까지 인식한다.
• firstElementChild, firstElementChild 등은 textNode를 제외한 elementNode만 인식한다.
• 우리는 주로 textNode를 이용할 일이 없기 때문에, 주로 element가 들어간 api를 이용한다.

이벤트 위임

• 발생한 이벤트에 대한 리스너를 버블링(혹은 캡쳐링)을 이용해서 상위 태그에 달아서 이벤트에 따른 함수를 실행하는 방법
  • 버블링: 이벤트가 발생한 요소에서 상위 요소로 가는 단계
  • 캡쳐링: 상위 요소에서 이벤트가 발생한 요소로 가는 단계
  • 캡쳐링은 사용할 일이 거의 없고, 주로 버블링을 통한 이벤트 위임을 사용한다.

stopPropagation vs preventDefault

• stopPropagation: 특정 태그에서 이벤트의 전달을 막는 api
• preventDefault: 해당 태그가 가진 기본적인 기능을 막는 api

번들러 - Vite

• 브라우저에서 ESM(ES Modules)을 지원하기 전까지는, JS 모듈화를 네이티브 레벨에서 진행할 수 없었다.
• 해서 개발자들은 번들링(모듈화된 소스 코드를 브라우저에서 실행할 수 있는 파일로 묶어주는 작업)을 사용할 수 밖에 없었다.
• 이런 번들링을 도와주는 도구로 Webpack, Rollup, Parcel 등이 등장했다.
• 하지만 점차 애플리케이션이 발달함에 따라 모듈 갯수가 너무 많아지고 번들링 시간도 오래 걸리게 되었다.
• Vite는 이런 변화에 맞춰 빠르게 번들링하고 다양한 서비스를 지원하는 도구로 등장!!!

참고

• 이벤트 위임
• stopPropagation vs preventDefault
• Vite 가이드

📝 요약 및 하루 간단 회고

오늘은 미션 구현보다는 주로 DOM과 이벤트 위임 관련 공부를 하고 내용 정리를 했다. 사실 DOM과 이벤트는 어느정도 공부해서 익숙하다고 생각했는데, 한동안 안건드리니까 생각보다 생소했다. 특히 DOM에서 여러 api로 원하는 노드에 접근하는 방법이라든지, DOM api 중에서 textNode까지 선택하는 api와 elementNode만 선택하는 api의 차이, 이벤트 버블링과 캡쳐링의 개념 그리고 이를 활용한 위임 방식 등!!! 생각보다 다시 머릿속에 정립이 되어서 유익한 시간이었다.

아, 그리고 오늘 typescript 파일을 모듈화 하고 import하는데 ts는 import할 수 없기 때문에 계속 에러가 발생했다. 이 부분을 해결하기 위해 import path도 계속 수정해보고 공식문서 보면서 tsconfig에 여러 조건들도 변경해보고, 확장자명도 mts로 해보고… 여러 방법을 써봤지만 해결되지 않았다.(ㅠㅠ) 그러다 동료인 스눕이 ts를 모듈화할거면 번들러를 써야할 것 같다고 말해주어서 나름 익숙한 webpack을 쓰려했다! 그런데 스눕이 사용한 vite를 써보고싶어 그냥 무턱대고 바로 npm install하고 공식문서 보면서 헤매고 헤맨 끝에 번들링에 성공했다.(감격) 아직 구체적인 config를 만진건 아니지만 처음 웹펙을 썼을 때의 감동이 다시 한번 찾아온 기분이었다.(사람들은 참 어떻게 이런 번들러라는 걸 개발하고 만들었는지… 여러 라이브러리 중에 번들러가 제일 내부 코드를 까보고싶다.)

추가로 동료인 나니의 얽히고 얽힌 git을 1 ~ 2시간에 걸쳐서 해결한 것도 너무 재미있는 경험이었다!!(동료가 처한 다양한 문제들을 같이 해결하면 정말 배우는 게 많다 ㅋㅋㅋ)

오늘의 잘한 점

• 월요일 나름 공부 계획대로 한 점
• 새로운 번들러를 사용해본 점!!!(무턱대고 뛰어들어서 해낸 기분은 정말 최고로 좋다)
• 동료의 어려움을 같이 해결하고 거기서 나도 함께 배운 점

오늘의 아쉬운 점

• 최대한 시간관리를 한다고 하는데, 조금 더 아주 쪼금만 더 잘 관리하면 좋겠다.
• 커피..! 요즘 너무 많이 마셨다. 조금 줄이자!