Facts
- 자바스크립트 기초를 공부했다.(6시간)
- 비동기에 관해 공부했다.(3시간)
Feelings & Findings
자바스크립트 기초를 공부했다.
자바스크립트 말하다 책으로 공부를 했다. 첫 장부터 시작했고, 17장인 객체와 상속까지 공부를 했다. 끝까지 보려고 했는데 집중력도 떨어지고, 실제로 사용하지 않을 것 같은 내용이 자꾸 나와서 더 할 수가 없었다. 책 자체가 나에겐 조금 어렵다. 모던 자바스크립트 Deep Dive를 공부할 땐 즐겁게 했었는데, 이 책은 읽으면 읽을수록 미궁에 빠지는 느낌이다. 그래서 나에게 맞는 다른 책을 찾아보려고 한다. 재미가 없어서 그런지 시간은 많이 투자했고, 많은 내용을 읽었지만 기억에 남는 것이 없다. 시간을 낭비한 것 같다...
비동기에 관해 공부했다.
하브루타 스터디에서 질문이 들어왔다. 어제 비동기를 공부했기 때문에 답변할 수 있을 줄 알았지만 모르는 내용이 많았다. 어느 정도만 알고 있어서 설명을 못하는 정도였다. 특히 Promise.all이나 Promise.race와 같은 메서드를 실제로 언제 사용할 수 있는지에 대한 예시를 생각하는 것이 어려웠다. 결국 생각이 나지 않아서 구글링을 했다. 내일 다른 크루의 답변도 들어보고 정리해서 블로그에 작성하려고 한다.
그리고 예상치 못한 requestAnimationFrame에 대한 설명을 해달라는 질문이 들어왔다. 나도 이걸 왜 써야되는지 알지 못한 상태여서 난감했다. 그래서 열심히 정보를 찾아봤다.
requestAnimationFrame은 런타임 환경에서 존재하는 task인 animation frame queue이다. 이것은 다른 task queue나 microtask queue처럼 콜백 함수가 등록되어 있다고 해서 항상 이벤트 루프가 실행시키는 것이 아니다.
브라우저는 60fps로 사용자에게 보여지기 위해 노력하는데, 이를 위해 브라우저는 지속적으로 render을 한다. 즉 1ms마다 render을 하는 것이 아닌 약 16.6ms마다 render을 하고, 우리는 정확하게 이 시간을 알지 못한다. 그래서 raf에 콜백 함수를 등록해놓으면 브라우저가 render되어야 할 때마다 이벤트 루프가 raf에 접근해서 콜백 함수를 실행시켜준다. raf에 등록된 모든 콜백 함수를 실행시킨 후에 렌더 트리를 구성하고, layout과 paint, composite을 통해 브라우저를 render한다. 결국 성능 최적화를 위해서 어떤 animation이 실행되어야 할 때, raf에 등록을 해놓는 것이다. 이런 것들을 내부적으로 어떻게 구현한 것일까? 정말 대단한 것 같다.
이것 뿐만 아니라 제너레이터, async await, 에러 처리 등 많은 질문이 있었고, 가장 재미있었던 것은 제너레이터에 대한 질문이었다. 이전에 함수형 프로그래밍 강의를 들으면서 제너레이터를 한 번 경험해 봤었기 때문이다. 제너레이터의 next 메서드를 실행하면 딱 yield까지만 실행해서 결과를 출력하는 것이 너무 신기하다. 코드 자체가 신기한 것은 아니고 어떻게 이런 발상을 했는지가 신기하다. 덕분에 for...of문과 spread 구문을 잘 사용하고 있다!!
Plans
- 하브루타 스터디 참여
- 피드백 훑어보기
- css 공부하기
