저번에 브라우저의 렌더링 과정에 대하여 정리하였으니 오늘은 리플로우와 리페인트에 대해서 정리해 보려고 한다. 브라우저 렌더링과 Reflow, Repaint의 관계 Layout은 요소의 위치, 크기를 계산하여 화면에 그리는 과정이며 reflow와 관련 있다. paint는 배치된 요소의 스타일(색상, 굵기 등)을 적용하는 과정으로 repaint와 관련 있다. reflow는 말 그대로 flow 과정을 다시 하는 작업이다. flow 작업은 곧 layout이며, reflow가 된다는 건 요소의 위치, 크기 계산을 다시 한다는 말이 된다. repaint는 paint 작업을 다시 하는 작업이고 paint는 요소에 스타일을 적용하는 과정이므로, repaint는 요소의 스타일을 재적용하는 것을 말한다. 리플로우와 리페인..

HTML 파일은 어떻게 브라우저에 그려지는지에 대하여 명확하게 답을 하지 못하기에 오늘은 브라우저의 렌더링 과정에 대해서 공부하고 정리해보려고 한다. 모자딥다에 나와있는 브라우저의 렌더링 과정 1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 2. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱 하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다. 3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환하여 실행한다. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할..

이벤트 핸들러의 Event 객체 JavaScript에서 addEventListener() 메서드를 통해 DOM 요소에 이벤트 핸들러를 등록할 수 있다. 등록된 이벤트 핸들러는 호출될 때 자동적으로 Event 객체를 첫 번째 인자로 전달받는다. 이 이벤트 객체는 target, currentTarget과 같은 프로퍼티와 stopPropagation()과 같은 메서드 등을 갖고있다. 이벤트 버블링, 캡처링 부모 요소를 가지고 있는 요소에서 이벤트가 발생한 경우, 캡처링과 버블링이 차례대로 실행된다. 이벤트 버블링은 처음 이벤트가 발생한 요소부터 html 요소에 이르기까지 부모요소들을 타고 올라가 이벤트 핸들러가 있는지 검사하고, 있으면 그 이벤트 핸들러를 호출하는 것을 말한다. 이벤트 캡처링은 최상위 부모 요..

JavaScript는 객체와 배열이라는 강력한 자료구조를 제공한다. 하지만 현실 세계를 반영하기엔 이 두 자료구조 만으론 부족해서 맵(Map)과 셋(Set)이 등장하게 되었다. Map 키가 있는 데이터를 저장한다는 점에서 객체와 유사하다. 다만, 맵은 키에 다양한 자료형을 허용한다는 점에서 차이가 있다. (객체의 key는 항상 스트링형태로 저장) let map = new Map([ // 2차원 key, value 형태의 배열 ["a", 1], ["b", 2], ["c", 3], ]); // map 자료형 : {"a" => 1, "b" => 2, "c" => 3} new Map() 맵을 만듬 map.set(key, value) key를 이용해 value를 저장 map.get(key) key에 해당하는 값을..

async / await async/await는 프로미스를 기반으로 동작한다. async/await를 사용하면 then/catch/finally 후속 처리 메서드에 콜백 함수를 전달해서 비동기 처리 결과를 후속 처리할 필요 없이 마치 동기 처리처럼 프로미스를 사용할 수 있다. setTimeout, callback, Promise 모두 비동기 코드 동기식으로 작성하는 기법들이지만, 모두 약간의 문제점을 갖고 있다. async/await는 이런 문제점을 해결하고 사용법도 단순하다. async async 키워드를 사용해 정의하며 언제나 프로미스를 반환한다. async 함수가 명시적으로 프로미스를 반환하지 않더라도 async 함수는 암묵적으로 반환값을 resolve 하는 프로미스를 반환한다. async func..

Promise ES6에서 비동기 처리를 위한 또 다른 패턴으로 프로미스를 도입했다. 프로미스는 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. // 프로미스로 코드를 분리할 수 있다는 점이 콜백 패턴과의 가장 큰 차이점이 아닐까? 비동기 함수란 함수 내부에 비동기로 동작하는 코드를 포함한 함수를 말한다. 비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료된다. 즉, 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료된다. 따라서 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하거나 상위 스코프의 변수에 할당하면 기대한 대로 동작하지 않는다. Promise..

객체지향 프로그래밍에서 추상화(abstraction) 는 실체의 특징이나 성질을 나타내는 속성(sttribute / property) 을 프로그램에 필요한 속성만 간추려 내어 표현하는 것 이다. 이러한 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조를 객체라 한다. 주제랑 다른 글 아닌가요? 라고 생각할 수 있지만 프로토타입을 제대로 알기 위하서는 알아야 하는 내용이다. 원(Circle) 이라는 개념을 객체로 만들어보자. 원에는 반지름 속성이 있다. 이 반지름을 통해 원의 지름, 둘레, 넓이를 구할 수 있다. 이때 반지름은 원의 상태를 나타내는 데이터이며 원의 지름, 둘레, 넓이를 구하는 것은 동작이다. 이처럼 객체지향 프로그래밍은 객체의 상태(state) 를 나타내는 데이터와 상태 ..

클래스 클래스와 생성자 함수는 프로토타입 기반의 인스턴스를 생성하지만 동일하게 동작하지는 않는다. 클래스가 더 엄격하며 생성자 함수에서는 제공하지 않는 기능도 제공한다. 클래스를 new 연산자 없이 호출하면 에러 발생. 생성자 함수를 new 연산자 없이 호출하면 일반 함수로서 호출. 클래스는 상속을 지원하는 extends와 super 키워드를 제공한다. 생성자 함수는 지원하지 않는다. 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다. 하지만 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수표현식으로 정의한 생성자 함수는 변수 호이스팅이 발생한다. 클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행되며 해제할 수 없다. 생성자 함수는 암묵적으로 strict mode가 지..