📅 오늘 한 일
1. 모던 자바스크립트 튜토리얼 리딩
- DOM / BOM 복습 + 추가학습
- 이벤트 관련 학습
- 크롬 개발자 도구로 디버깅하는 방법
✏️ 무엇을 배웠나
1. DOM
- childeNodes가 배열인 줄 알고 있는데 유사 배열 객체였다.
- 그래서 Array.from을 썼구나. - innerHTML과 textContent의 차이
- innerHTML : 문자열이 HTML 형태로 저장
- 용도 : 페이지 덮어쓰기할 때 (리셋하고 다시 쓰는 거임)
- textContent : only 텍스트만 저장
- 용도 : 어딘가에 텍스트만 넣고 싶을 때 - createElement과 createTextNode
- 용도 : 페이지에 뭔가 새로 만들어 넣고 싶을 때
- 못생긴 alert창 말고 커스텀 창을 만들고 싶을 때 쓸 수 있을 듯. - classList와 className
- 용도 : 클래스 속성값을 바꿀 때
- 다크모드 기능 구현할 때 요긴할 듯 - currentTarget
- 히든카페 프로젝트할 때 그냥 썼던 건데 이번에 확실히 알게 됨
- 이벤트가 어디서 일어났는지 확인 가능 (요소 or 노드)
- 이걸로 console.log 찍어보면서 이벤트 추적했었다 - 이벤트 핸들링하는 3가지 방법
- HTML 속성을 이용
- 히든카페 프로젝트할 때 사용한 방법
- DOM 프로퍼티 이용
- 좋은데 문제는 이벤트랑 핸들러는 1:1 관계만 가능
- + DOM 로드가 미완일 때 못 쓸 수도 있음.
- addEventListener 이용
- DOM 프로퍼티의 문제를 해결해줌. 이벤트에 핸들러 여러개를 달 수 있어서 액션 콤보가 가능함
2. 크롬 개발자 디버깅
- 중단점 설정하거나 스크립트에 debugger 넣어서 코드 진단하는 걸 알게 됨.
- 빨리 프로젝트에서 써보고 싶다. 엄청 편리할 듯
- 다른 코드 공부할 때도 중단점 설정해서 하나씩 진행순서대로 들여다보면 도움이 될 것 같다.
- 실행 컨텍스트 배우면서 알게 된 내용이 여기 있어서 반가웠다. (call-stack)
🥵 무엇이 어려웠나
1. THIS가 아직도 낯설다
- 내일 다시 복습
🔎 더 알고 싶은 것 / 보완이 필요한 것
1. 급한 마음 추스리기
- 숨 좀 고르면서 공부하자. 머리에 정보 많이 담는 것 !=== 공부. 이걸 왜 배우는지 이걸 어디서 써먹을 수 있을지를 항상 의식하기.
🏷️ 오늘의 코멘트
날씨가 갑자기 춥다. 추워지니까 술이 너무 땡긴다.
⛰ 프론트엔드 개발 공부 블로그