개발 서적 기록

김창준 저자의 "함께 자라기"라는 책을 읽었습니다."애자일로 가는 길"이 부제로 적혀있는데, 막상 책의 내용은 성장 방법론, 일하는 방식 등의 내용이 주를 이루고 있습니다. 책의 핵심적인 내용은 "어떻게 다같이(함께) 성장(자라기)할 것인가?" 입니다.책의 목차는 다음과 같습니다.자라기함께애자일저는 1챕터인 "자라기" 챕터를 인상깊게 읽었습니다. 이 부분을 기록합니다.1. 자라기"자라기" 챕터는 어떻게 성장을 할 수 있는지, 성장에 대한 오해들을 깨는 것에 집중합니다.대표적인 오해인 "경력은 실력과 비례한다"는 주장을 반박하며 챕터를 시작합니다. 실제 업무 퍼포먼스를 통계적으로 나타냈을 때, 경력이 실력과 그리 비례하지 않으며 실력을 키우기 위해선 경력이 아닌 "의도적 수련"이 동반되어야 한다고 주장합니..

2.2 가상 DOM과 리액트 파이버DOM의 모든 변경 사항을 추적하는 것은 너무 수고스럽다.대부분의 경우 모든 DOM의 변경사항보다는 최종 DOM 결과물 하나만 알고 싶을 것이다.이를 위한 것이 가상 DOM이다. 가상 DOM은 웹페이지가 표시할 DOM을 메모리에 저장하고 리액트가 실제 변경에 대한 준비가 끝나면 브라우저 DOM에 반영한다.이런 방식으로 DOM 계산을 메모리에서 계산하는 과정을 거치면 여러 번 발생했을 렌더링 과정을 최소화한다.다만 리액트의 가상 DOM 방식이 일반적인 DOM을 관리하는 브라우저보다 빠르다는 것은 오해다.가상 DOM이 실제 DOM보다 빠르지도 않다면, 왜 사용하는건가?브라우저의 리플로우, 리페인트를 최적화한다. 즉, CPU 사용률, 메모리 사용량, 렌더링 성능을 최적화한다...

ES6에서 비동기 처리를 위한 패턴으로 프로미스를 도입한다.이는 전통적 콜백 패턴이 가진 단점을 보완, 비동기 처리 시점을 명확히 표현할 수 있다는 장점을 가진다.1. 비동기 처리를 위한 콜백 패턴의 단점전통적인 비동기 처리의 예시를 보자.const get = (url, successCallback, failureCallback) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { if (xhr.status === 200) { // todos = JSON.parse(xhr.response); successCallback(JSON.parse(xhr.response)); } els..

JS 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.또한 싱글 스레드 방식으로 동작하기에, 처리에 시간이 걸리는 작업을 수행하는 경우 블로킹 현상이 발생한다.비동기 처리를 수행하는 비동기 함수는 전통적으로 콜백 패턴을 사용한다.비동기 처리를 위한 콜백 패턴은 콜백 헬을 발생시켜 가독성을 저하시키고, 비동기 처리 중 발생한 예외가 곤란하며,여러 비동기를 한 번에 처리하는 데 한계가 있다. 이런 것들에 대해선 프로미스에서 살펴보자.1. 이벤트 루프와 태스크 큐JS의 동시성을 지원하는 것이 이벤트 루프이다. 브라우저 내장 기능 중 하나이다.구글 V8 엔진을 비롯한 대부분의 JS 엔진은 2개의 영역으로 구분 가능하다.콜 스택: 소스코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료구조인 실행..

타이머 함수는 ECMAScript에 정의된 빌트인 함수가 아니지만, 브라우저 환경과 Node.js 환경 모두 전역 객체의 메서드로서 타이머 함수를 제공한다. 즉, 타이머 함수는 호스트 객체이다.JS 엔진은 단 하나의 실행 컨텍스트를 가지며, JS 엔진은 싱글 스레드로 동작한다.이런 이유로 타이머 setTimeout과 setInterval은 비동기 방식으로 동작한다.const timerId = setTimeout(() => console.log('Hey'), 1000);clearTimeout(timerId);const timeoutId = setInterval(() => { console.log(count); if (count++ === 5) clearInterval(timeoutId);}, 1000);s..

1. 이벤트 객체이벤트 발생 시 이벤트 객체가 생성된다.생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.이는 브라우저가 이벤트 핸들러를 호출할 때 이벤트 객체를 인수로 전달하기 때문에, 전달받을 매개변수를 명시적으로 선언해야 하기 때문이다.이벤트가 발생하면 암묵적으로 생성되는 이벤트 객체 또한 생성자 함수에 의해 생성된다.이는 프로토타입 체인의 일원이 된다.Event.prototype에 정의된 이벤트 프로퍼티는 모든 파생 객체에 상속된다.더보기공통 프로퍼티설명타입type이벤트 타입stringtarget이벤트를 발생시킨 DOM 요소DOM 요소 노드currentTarget이벤트 핸들러가 바인딩된 DOM 요소DOM 요소 노드eventPhase이벤트 전파 단계0: 이벤트 없음, 1: 캡처링, 2:..

간단하게 보아서, 브라우저는 다음과 같은 과정으로 렌더링을 수행한다.브라우저가 렌더링에 필요한 리소스를 서버로 요청, 응답을 받는다.브라우저 렌더링 엔진이 응답받은 HTML과 CSS를 파싱해 DOM, CSSOM을 생성하고 이들을 결합해 렌더 트리를 생성한다.브라우저 JS 엔진은 응답된 JS를 파싱해 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환해 실행한다. 이때 JS는 DOM API로 DOM, CSSOM을 변경할 수 있다. 변경된 이들은 다시 렌더 트리로 결합된다.최종 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산해 브라우저 화면에 HTML 요소를 페인팅한다.1. 요청과 응답브라우저는 서버에 렌더링에 필요한 요소들을 요청하고 응답받는다.브라우저의 렌더링 엔진은 HTML..

배열이란 여러 개의 값을 순차적으로 나열한 자료구조다. JS에는 배열 타입이 없으며, 배열은 객체 타입이다.1. JS 배열은 배열이 아니다.일반적인 자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조이다.하나의 데이터 타입으로 통일되어 있으며, 이런 배열을 밀집(dense) 배열이라 한다.JS의 배열은 각각 동일한 메모리 공간을 가지지 않아도 되며, 연속적으로 이어져 있지 않을 수 있다.이러한 배열 요소가 연속적으로 이어져 있지 않은 배열을 희소(sparse) 배열이라 한다. (기본적으로 해시테이블이다.)밀집 배열은 인덱스로 요소에 O(1)로 접근이 가능하나, 삽입 삭제가 효율적이지 않다.대부분 모던 JS 엔진은 좀 더 배열처럼 동작하도록 최적화하여 구현했다. 배열..