코린이의 개발 일지

Observer pattern 객체의 상태 변화를 관찰하는 옵저버들의 목록을 객체에 등록하여, 상태 변화가 있을 때마다 notify를 통해 객체가 직접 목록의 각 옵저버에게 통지하도록하는 디자인 패턴 구현 예시 기본적인 인터페이스는 아래와 같다. Subject class Subject { #state; constructor() { this._observers = new Set(); } subscribe(observer) { this._observers.add(observer); } unsubscribe(observer) { this._observers.delete(observer); } notify() { this._observers.forEach((observer) => observer.update(t..

실행 컨텍스트란? 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다. 실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고, 코드의 실행 결과를 실제로 관리하는 영역이다. 실행 컨텍스트의 정확한 정의를 이해하기 위해 먼저 소스코드의 평가와 실행에 대해 이해할 필요가 있다. 소스코드 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 나눈다. 전역 코드: 전역에 존재하는 소스코드 함수 코드: 함수 내부에 존재하는 소스코드 eval 코드: 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드 eval 함수란? ex) eval(’2+2’); eval() - JavaScript | MDN 문자열로 표현된 자바스크립트 코드를 실행하는 함수 module 코드: 모듈 내부에 존재하는..

이벤트 루프란? 자바스크립트 자체는 싱글 스레드로 동작한다. 하지만 브라우저가 동작하는 것을 살펴보면 여러 태스크가 동시에 처리된다. 이처럼 자바스크립트의 동시성을 지원하는 것이 바로 이벤트 루프이다. 이벤트 루프는 브라우저에 내장되어 있는 기능 중 하나이다. (Node.js도 이벤트 루프 기반으로 동작한다) 브라우저 환경에서 동작 과정 그림을 보면 자바스크립트 엔진은 크게 두개로 나뉘어져 있다. 콜스택: 소스코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 힙: 객체가 저장되는 메모리 공간. 콜 스택의 요소인 실행 컨텍스트는 힙에 저장된 객체를 참조한다. 자바스크립트 엔진은 단순하게 태스크가 요청되면 콜스택을 통해 요청 받은 작업을 순차적으로 실행한다. 즉, 비동기 처리에서 소스코드 평..

설치 yarn add react-query React-Query가 주장하는 Global State 개념 Global State라는 말을 쓰지 말자: 전역 state는 Client와 Server로 분류할 수 있고, 이 두 State는 다른 방식으로 다뤄져야 효율적인 앱을 만들 수 있다. Server State 세션간 지속되는 데이터 비동기적 세션을 진행하는 클라이언트만 소유하는게 아니고 공유되는 데이터도 존재하며 여러 클라이언트에 의해 수정될 수 있음. 클라이언트에서는 서버 데이터의 스냅샷만을 사용하기 때문에 클라이언트에서 보이는 서버 데이터는 항상 최신임을 보장할 수 없다. ex) 비동기 요청으로 받아올 수 있는, 백엔드 DB에 저장되어 있는 데이터 Client State 세션간 지속적이지 않은 데이터 ..