올해 초 회사 내 신입사원들이 진행하는 세미나에서 발표한 내용을 git blog에 옮겨보았다.
해당 발표에서는 execution context의 동작 방식과 js가 어떻게 execution context를 바탕으로 closure 환경을 제공하는지를 다루었다.

git과 github의 기본 개념을 정리했다

코드 스피츠 77 es6+ 기초편 강의에서는 generator로 chaining을 구성하는 예제를 다룬다. 해당 강의인 4번째 강의는 이 예제 외에도 중요한 다른 예제들을 다루지만 이번 글에서는 generator chaining의 동작을 살펴보면서 generator의 동작 방식을 이해해 보겠다.

이번 주제는 본래 웹의 기본적인 컨셉이기도 했지만 html5가 되면서 더 두드러진 html의 특징이 된 semantic web에 대해서 다루도록 하겠다. 이번 내용은 코드스피츠 76 CSS Rendering의 강의를 정리한 것이다.

이번 주제는 CSS Position Schemes의 세 번째 방식인 float이고 이번 주제의 마지막 편이다. 우선 offset에 대해 살펴본 후, parent offset에 따라서 absolute positioning이 어떻게 계산되는지 알아보도록 하겠다. 이번에 다루는 내용들은 코드스피츠 76 CSS Rendering의 강의를 정리한 것이다.

이번 주제는 CSS Position Schemes의 두 번째 방식인 float이다. float가 생성될 때 발생하는 4가지 일을 보면서 float가 box요소의 위치를 계산하는 방식을 이해해 보겠다. 원래 float가 overflow 속성을 가진 요소와 함께 그려질 때의 특이 사항도 다루어야 하지만 사정상(너무 길다…) 해당 내용은 다음에 다루도록 하겠다. 이번에 다루는 내용들은 코드스피츠 76 CSS Rendering의 강의를 정리한 것이다.

이번 주제는 CSS Position Schemes이다. 가장 기본적인 주제이지만 그렇다고 다루는 내용이 짧은 것은 아니기 때문에 3편에 나누어서 다루도록 하겠다. 이번 글에서는 normal flow에 해당하는 static, relative를 다루고 다음 글에서는 float를 마지막으로는 absolute와 fixed를 다루도록 하겠다. 이번에 다루는 내용들은 코드스피츠 76 CSS Rendering의 강의를 정리한 것이다.

앞의 글에서는 JS가 lexical scope을 사용하는 언어인데도 불구하고 왜 this가 함수 실행 때 binding되는지 문제제기 했다. 또한 lexical scope와 dynamic scope에 대해서, lexical scope임에도 동적으로 함수가 생성되는 특징 때문에 생겨나는 closure에 대해 다루었다. 이번 글에서는 function과 arrow function의 실행을 다루면서 왜 this가 실행 때 binding되는지와 closure를 사용함으로써 function과 arrow function의 this가 어떻게 달라지는 지 알아보도록 하겠다.

앞으로 2개의 주제를 다룰 예정인데, 2개의 주제는 모두 JS의 this를 이해하기 위한 내용들이다. this를 이해하는 것에 어려움을 겪으면서 헤메다가 JS의 다른 주제들을 공부하면서 드디어 this를 조금이나마 이해하게 되었다. 그리고 역시 mdn 문서가 짱이다… mdn arrow function 문서를 읽고 나서 this를 이해하는 데 어려움을 겪었던 부분을 많이 해소하게 되었다. 우선 처음에는 lexical scope와 closure를 다루도록 하겠고, 그 다음 JS function과 arrow function을 다루면서 this에 대해 설명해보겠다.

airbnb clone 수업 중에 발견한 문제를 해결하기 위해 첫번째로 공부하는 주제는 컨테이닝 블록이다.