JS 실행 컨텍스트 이해하기

JS 실행 컨텍스트 이해하기

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

자세히 보기
Git & Github 요약 정리
JS Generator Chaining 이해하기
HTML Semantic Web
CSS Position Schemes- Absolute Positioning
CSS Position Schemes- Float

CSS Position Schemes- Float

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

자세히 보기
CSS Position Schemes- Normal Flow

CSS Position Schemes- Normal Flow

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

자세히 보기
JS Function과 Arrow Function

JS Function과 Arrow Function

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

자세히 보기
JS Lexical Scope와 Closure

JS Lexical Scope와 Closure

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

자세히 보기
CSS Containing Block