Intro
5일차가 되는 금요일에 첫 구현 과제를 받은뒤, 주말동안 열심히 피드백 받느라고 주말을 주말답게 보내지 못하고 바로 월요일을 맞이하게 되었다. 제대로 쉬지 못했다는 아쉬움이 있긴 하지만, 누군가에게 피드백을 받고, 누군가의 코드를 피드백 해주면서 나의 코드 읽기, 쓰기 능력이 향상되었다는 느낌을 받았기에 그나마 위안이 되는 주말이었다.
암튼 각설하고, 오늘은 DOM, Iterator(+Generator)를 학습하였다. 프론트엔드에 처음 입문하면서 DOM이라는 용어를 드문드문 들어본적 있었지만 제대로 알고 이해하게 된 날이었다. 뭔가 용어가 투박하면서 어려울 것 같은 느낌으로 가득했는데 막상 보니 내가 js를 처음 다룰때부터 쓰고 있던 개념이었다. 쉽게 말하면 js에서 쓸수 있게 html의 element를 객체화한 것이다.
이후 다음 주요 개념으로는 Iterator가 나왔다. js에 대한 기초 하나없이 react로 프로젝트를 하던 시절, 나의 피를 빨아먹는(?) 듯한 느낌을 선사했던 iterable과 연관이 깊다. 또한 js의 고차함수는 해당 개념과 상당히 관련이 있다. 오늘 해당 개념을 뿌리부터 다룬 덕에 과거의 삽질에 의미를 더할 수 있는 알찬 하루였다.
오늘 학습한 내용
- DOM(Document Object Model): 문서객체 모델
- DOM 선택
- DOM 탐색
- DOM 조작
- Virtual DOM
- Virtual DOM의 오해
- 평가
- 일급
- 고차함수
- 이터러블( 아티클(예정) )
- 이터러블/이터레이터 프로토콜
- 제너레이터와 이터레이터
정리노트: 노션
하루를 마무리 하며
오늘 전체 강의 내용중 절반을 할애한 개념이 iterable/iterator protocol과 iterator & generator이다. 그만큼 깊이도 깊었고, js의 깊이 있고, 논리적인 문법에 감탄한 날이었다. java, python에서 봤던 개념들이랑 연결지어가며 별 대수롭게 여기지 않았던 개념이었는데 es6의 핵심개념이라 할 수 있다.
표면적인 내용만 정리해보자면, Map객체를 for(let i=0;i<map.length;i++) log(map[i]);를 하면 안되고 for(let m of map) log(m);를 하면 되는 이유는 결국 객체 안에 [Symbol.iterator]가 들어 있기 때문이다. 해당 객체를 실행해보면 [Symbol.iterator]()는 [Function[Symbol.entries]를 리턴한다. entries()를 리턴받기에 {key:value}를 활용할 수 있었던 것이었다.
자세한 설명은 첨부한 노션에 상세하게 다뤄져 있으며, 추후에 좀더 다듬고 깊이 학습하여 '아티클'로 포스팅할 예정이다.
