바닐라코딩 prep 6주차 정리

바닐라코딩의 prep 과정을 수강한 내용을 정리한 포스팅입니다.

---

강의

이번주 강의는 프로토타입에 대해서 공부하는 파트였습니다. 
강의와 함께 모던 자바스크립트 deep dive 의 프로토타입 파트를 다시 읽어보는 것이 큰 도움이 되었습니다. 

프로토타입 중요내용

- 개인적으로 프로토타입을 학습하며 프로토타입은자바스크립트에서 상속을 구현하는 독자적인 방법이라고 느껴졌습니다.
- 자바스크립트에서는 함수를 생성하면 자동으로 prototype 프로퍼티가 할당되며 해당 프로퍼티에는 prototype 객체가 할당됩니다.
- 함수별로 prototype은 고유한 객체입니다. 
- 자바스크립트에서 인스턴스는 해당 프로토타입체인 내부에서 존재하는 모든 속성을 사용가능합니다. 
- 인스턴스에 이미 동일 이름으로 프로퍼티가 존재할경우 인스턴스 프로퍼티가 우선합니다. 
- 객체 리터럴로 객체를 만들어도 메서드를 사용가능한 이유는 실제로는 obj = new Object()와 같은 형태로 생성되어 Object의 프로토타입에 존재하는 모든 메서드가 사용 가능한 것입니다. 
- 프로토타입 체인의 종점은 Object.prototype 입니다. (Object.prototype.__proto__ 가 null 인 이유입니다.)
- 던더 프로토(__proto__)는 인스턴스가 자신을 만든 생성자 함수의 프로토타입 객체를 접근하게 해주는 프로퍼티입니다만 코드 구현시 사용지말것을 당부받았습니다. (인위적으로 프로토타입 체이닝을 건드는 것이 좋지 않은 것 같습니다.)

---

과제

이번주 과제는 전자시계를 구현하는 내용이었습니다. 
call, apply, bind를 사용하여 해결했어야 합니다. (3가지 함수의 차이점을 억해둡시다.)
바닐라코딩의 정책상 이번 과제는 블로그 포스팅으로 공개시 내용이 너무 유출되어 자세히 적기가 어렵습니다. 

지금까지 특정 DOM 엘리먼트를 appendchild등으로 실제 트리에 추가전에 style이나 이벤트리스터를 미리 달아두어야 성능상 이점이 있다는 점을 알게되었습니다. (관련하여 reflow와 repaint에 대하여 공부할만한 아티클을 소개 받았습니다.)
https://medium.com/swlh/what-the-heck-is-repaint-and-reflow-in-the-browser-b2d0fb980c08

Understanding Repaint and Reflow in JavaScript

---

부족하다고 느낀점