(TIL) 2020-07-23 기록

오늘 한 일

• JS의 모듈 패턴에 대해서 배웠다. 모듈 패턴이라는 게 있다는 것 자체가 어떻게 보면 JS의 특징을 나타내는 것이라고 볼 수도 있겠는데 JS는 자체적으로 모듈 개념이 없어서 함수로 모듈을 흉내내거나 CommonJS 같은 걸 이용해서 모듈을 시뮬레이션 해야 한다.
• 그러나 ES 2015부터는 다른 언어들처럼 export, import 같은 모듈 전용 예약어들이 생겼고 다른 언어들처럼 모듈을 쓸 수 있게 됐다.
• ES 2015의 변경점에 대해서 배웠다. scope가 전역 아니면 함수 내밖에 없는 var보다는 블락 scope도 지원하는 let를 써서 변수를 선언하는 게 더 네임스페이스를 관리하기 좋겠더라. 그리고 for in 문 같은 경우에 객체를 순회할 경우 객체의 프로토타입에 선언된 멤버까지 모두 순회하는데 for of 문을 쓰면 딱 그 객체에 있는 멤버 혹은 원소만 순회하기 때문에 좀 더 다른 언어들과 비슷하게 쓸 수 있을 것 같다.
• 그 외에도 몇 가지 변경점이 더 있었지만 그건 차후에 react를 배우면서 프로젝트를 할 때 필요할 때마다 찾아서 쓰는 게 좋을 것 같다.
• 이 문서를 통해 Hoisting에 대해서 배웠다. JS는 특이하게 var로 변수를 선언 및 초기화를 하거나 함수를 선언하면 그 선언부가 스코프 내 최상단으로 끌어올려진다(hoisted). 함수 같은 경우에는 선언부 뿐만 아니라 그 body까지 모두 호이스팅된다. 그러나 let과 const를 쓰면 호이스팅 되지 않는 것처럼 보이는데 이 부분이 조금 복잡했다. TDZ이라는 개념이 등장하는데 어쨌든 간단히 말하자면 let과 const도 호이스팅이 일어나지만 TDZ에 의해 실제 선언된 부분이 나올 때까지는 액세스할 수 없기 때문에 미리 변수에 접근하려고 하면 ReferenceError를 뱉어낸다.
• 이 문서를 통해 Event Propagation과 Event Bubbling에 대해서 배웠다. DOM에서 event가 일어나면 이 event는 최상단 window부터 트리를 타고 쭉쭉 내려가면서 event를 전달한다. 이것을 Event Capturing이라고 한다. 만약 등록된 capturing event listener가 있다면 실행될 것이다. 다만 Event Capturing은 addEventListener()를 통해 등록된 listener에게만 적용되고 onClick 같은 방식으로 등록된 listener에게는 적용되지 않는다.
• 그 다음으로 Event Bubbling이 일어나는데 이제는 반대 방향으로 event가 DOM의 최상단으로 전파된다. 그래서 타겟 원소의 부모 노드들, 즉 전파 경로상에 있는 모든 노드들은 event를 전달받게 된다. 중간에 bubbling을 멈추고 싶다면 event listener 콜백에서 event.stopPropagation() 이런 식으로 전파를 멈추면 된다.
• 또 콜백에서 매개변수 event는 target이라는 멤버를 가지고 있는데 이것은 바로 event가 일어난 target element를 반환한다.

내일 할 일

• 지금 계속 웹 개발자를 위한 로드맵를 보며 따라가고 있다.
• 이에 따라 내일은 좀 더 어려운 개념인 프로토타입에 대해 배우고 Shadow DOM과 strict 모드에 대해서 배울 것이다.
• 내가 프로토타입에 대해 빨리 이해할 수 있다면 내일 git의 좀 더 고급 기법들에 대해서 공부하고 싶다.