전체 글
React v18 주요 변경점
Automatic Batching batching은 리액트 내부에서 더 나은 퍼포먼스를 위해, 다수의 상태값 업데이트가 이루어짐에도 불구하고 단 한번만 재렌더링이 이루어지도록 그룹화하여 일괄처리한다. 리액트 17버전까지는 event handler 함수 내부에서만 batching이 동작하고 있지만, 리액트 18버전부터는 프로미스 내부, setTimeout 등 batching이 이루어지지 않는 함수들에 default로 탑재가 된다. // v17 const [count, setCount] = useState(0); const [isChecked, setIsChecked] = useState(false); useEffect(() => { setTimeout(() => { setCount(prev => prev ..
NEXTSTEP 온보딩 계산기 미션 인사이트
NEXTSTEP의 온보딩 미션을 진행하면서, 리뷰받았던 내용들에 대해 간단히 정리해보고자 한다. isNaN, Number.isNaN isNaN의 경우, 주어진 인자의 값이 NaN인지 판별하여 true, false를 반환하는 전역 함수이다. 하지만 인자의 타입을 Number으로 강제 형변환 후에 판별하기 때문에, 엄격한 비교룰 위해서는 ES6에 추가된 Number.isNaN을 사용햐는 것이 적절하다. Number.isNaN은 기존에 존재하는 isNaN의 엄격한 버전으로서, 주어진 값의 유형이 Number이면서 주어진 인자의 값이 NaN인지 판별하여 true, false를 반환하는 함수이다. Number.isNaN(NaN); // true isNaN(isNaN) // true Number.isNaN(Numb..
[Record] | 이벤트 루프, 마이크로 태스크, 매크로 태스크
이벤트 루프 싱글 스레드 기반 언어인 자바스크립트는 이벤트 루프를 통해 비동기적으로 작업을 수행할 수 있다. 위 사진은 브라우저의 환경을 간단하게 나타낸 이미지이다. JS 엔진 Heap: 메모리 할당이 일어나는 영역(객체와 같은 참조 타입의 데이터가 저장되는 영역) CallStack: 함수가 호출될 때 생성되는 실행 컨텍스트가 구성하게 되는 stack WebAPIs 웹 브라우저에 구현된 API DOM event, AJAX, Timer 등의 비동기 처리 담당 API 존재 Event Loop 콜스택이 비었을 시, 이를 감지하고 태스크 큐에 있는 비동기 콜백 함수를 콜스택에 추가한다. Callback Queue (or Task Queue) 비동기적으로 실행될 콜백함수들이 임시로 대기하는 큐 형태의 배열이다. ..
[DeepDive] - 26장(ES6 함수의 추가기능) 필요 내용 정리
메서드 ES6 사양에서의 메서드는, 메서드 축약 표현으로 정의된 함수만을 의미한다. ES6 사양에서 정의한 메서드는 인스턴스를 생성할 수 없는 non-constructor이다. 따라서 생성자 함수로서 호출할 수 없다. 추가로 ES6의 메서드는 인스턴스가 없기 때문에 prototype 프로퍼티 및 프로토타입이 없다. const obj = { x:1, // foo는 메서드 foo(){ return this.x } , // bar는 메서드가 아닌, 일반함수 bar: function(){ return this.x; } } obj.foo() // 1 obj.bar() // 1 new obj.foo() // TypeError: obj.foo is not a constructor new obj.bar() // bar..
[DeepDive] - 25장(클래스) 필요 내용 정리
클래스 정의 클래스는 객체(인스턴스)를 생성하기 위한 템플릿이다. 클래스는 선언식과 표현식으로 정의가 가능하다. 표현식으로 정의할 수 있는 이유는, 클래스가 값처럼(데이터처럼) 자유롭게 사용될 수 있는 일급 객체라는 것을 의미한다. class Base {} const Base = class {}; const Base = class 클래스 몸체에 정의할 수 있는 메서드의 종류는 constructor(생성자), 프로토타입 메서드, 정적 메서드 3가지가 존재한다. class Person{ // 생성자 constructor(name, age, gender) { this.name = name; this.age = age; this.gender = age; } // 프로토타입 메서드 sayHi(){ return `..
[DeepDive] - 23장(실행 컨텍스트) 필요 내용 정리
실행 컨텍스트 소스 코드의 4가지 타입 소스 코드를 4가지로 구분하는 이유: 소스 코드 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리가 다르기 때문이다. 전역 코드: 전역에 존재하는 소스코드, 전역에 정의된 함수, 클래스 등의 내부 코드는 포함 X, 전역 실행 컨텍스트 생성 함수 코드: 함수 내부에 존재하는 소스코드, 함수 내부에 중첩된 함수, 클래스 등의 내부 코드 포함 X, 함수 실행 컨텍스트 생성 eval 코드: 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드, eval 실행 컨텍스트 생성 모듈 코드: 모듈 내부에 존재하는 소스코드, 모듈 내부의 함수, 클래스 등의 내부 코드는 포함 X, 모듈 실행 컨텍스트 생성 소스 코드의 평가, 실행 JS 엔진은 평가와 실행 단계를 거쳐..