내가 보려고 만든 개발 공부 일지

어느 기술 인터뷰에서 리플로우와 리페인트에 대해 설명해 달라는 질문을 받은적이 있었다. 아는대로 설명을 하긴 했지만 언제 어떻게 발생되고 성능적으로 어떻게 개선할 수 있을지에 대해서는 자세하게 대답하지 못했었다. 그래서 이번 포스팅에서는 리플로우와 리페인트가 무엇이고 개발할때 어떤 부분을 신경써야 하는지 정리해보려 한다. 브라우저 렌더링 과정 브라우저의 역할은 사용자가 보고자 하는 웹페이지를 서버에 요청하고 서버에서 보내준 응답을 받아 브라우저 화면에 그려주는 것이다. 보통 서버는 응답으로 html 파일을 보내준다. 브라우저의 렌더링 엔진은 이 html 파일을 해석하여 DOM 트리와 CSSOM 트리를 만들고, 이 둘을 결합하여 렌더 트리를 만든다. 이렇게 만들어진 렌더 트리를 기반으로 UI가 그려지게 된..

자바스크립트에는 8가지의 자료형이 존재한다. 그 종류로는 number, string, BigInt, boolean, null, undefined, Symbol, 마지막으로 객체가 존재한다. 이 중 객체를 제외한 나머지들은 딱 하나의 값만 가질 수 있는데, 이런 자료형을 원시타입(primitive type)이라 하고, 객체는 여러 값들을 포함할 수 있는 하나의 덩어리이며 참조타입(reference type) 이라 부른다. 객체가 포함할 수 있는 값들에 제한은 없으며 어떤 자료형이든 객체의 내부 값으로 할당할 수 있다. 프로퍼티는 키-값 쌍으로 구성되는데 키는 값을 나타내는 이름이라 생각하면 되고, 이 키로 해당 프로퍼티 값에 접근할 수 있다. let obj = { name: 'sunny' // 키(name..

자바스크립트로 개발을 하다보면 this를 다룰일이 많이 있다. 자바스크립트에서 this는 현재 코드가 실행되는 상황에 따라 할당되는 값이 달라지는데, 언제 어떤 값이 this에 할당되는지 제대로 이해하지 않고 대충 얼버무리고 넘어간다면 어디가서 JS좀 한다 같은 소리는 고이 접어두자. "this 바인딩 이 정도면 다 이해한듯?" 그 당시엔 이렇게 생각이 들었어도, 시간이 흐르고 this로 복잡한 작업을 하다보면 금세 또 헷갈리고 인터넷을 찾게된다. 그래서 이번엔 this에 대해 최대한 정리해 보려한다. 엄격모드 - "use strict" this에 대해 살펴보기 전에 우선 엄격모드에 대해 알아볼 필요가 있다. 이 엄격모드에 따라 this가 가리키는 값이 상황에따라 달라지기 때문이다. 엄격모드란? 자바스크..

이전에 실행 컨택스트에 대한 내용을 포스팅 한 적이 있다. 복습겸 짧게 요약하면, 실행 컨택스트는 현재 실행중인 코드의 환경 정보를 가진 데이터 구조이고, 함수가 호출될 때 만들어져서 호출스택에 push 된다. 함수가 끝나면 (return 되면) 호출스택에서 pop 되고 메모리에서 제거된다. 실행 컨택스트 관리는 자바스크립트 엔진이 수행하는 가장 중요하면서도 기본적인 역할이고, 이 개념만 제대로 이해해도 대단한 일이다. 하지만 이것만 가지고는 브라우저의 작동 매커니즘을 모두 이해했다고 할 수 없다. 실제 브라우저에서는 DOM 이벤트, 네트워크 요청, 렌더링, 비동기 처리 등 수 많은 일들이 동시 다발적으로 발생한다. 무거운 작업을 수행할때도 브라우저가 버벅이거나 먹통이 되지 않도록 앱을 잘 설계하기 위해..