관련글가상돔(Virtual DOM)과 React Fiber 구조 React의 동시성 기능 (Concurrent Features)기존 렌더링 방식보다 부드럽고 반응성 높은 사용자 경험을 제공하기 위해 도입된 새로운 렌더링 아키텍처이다.리액트 18 이후부터는 기본적으로 일부 기능이 내장되어있다. 핵심은 느린 컴포넌트 때문에 전체 앱이 버벅이는 현상을 줄이기 위함이고, 그렇기 때문에 리액트가 렌더링을 중단하고 나중에 이어서 재개할 수 있는 기능들을 제공하게되었다.주요 기능으로는 startTransition, useDeferredValue, Suspense, streaming SSR등이 있다. 기존 렌더링과의 차이기존에는 렌더링이 동기적으로 한번에 진행되었다. 따라서 무거운 업데이트가 렌더링되어야할때 UI가 멈..
React의 예측 가능한(predictable) UI를 위한 설계 철학 리액트는 '어떤 상태가 주어지면, 항상 그에 대응하는 동일한 UI를 만들어야 한다'는 원칙을 따르고 있다.이것이 바로 예측 가능(predictable)한 UI를 말한다.// 상태가 같으면const isLoggedIn = true;// 언제나 같은 UI를 출력해야 함return isLoggedIn ? : ; 예측 가능한 UI는 왜 중요할까?입력값(state)을 고정하면 결과(UI)를 예측할 수 있어 테스트가 쉬우며, 상태만 보면 어떤 UI가 나올 지 알 수 있기 때문에 디버깅이 쉽다.컴포넌트는 side effect 없이 상태에 따라 렌더링되어 유지보수가 쉬우며, 선언형 프로그래밍이므로 명령형보다 DOM 조작이 직관적이다. 예시비예..
자바스크립트 힙 (Heap)자바스크립트에서 동적 메모리 할당이 필요한 값들이 저장되는 메모리 영역으로 객체, 배열, 함수등이 여기에 저장된다.즉, 개발자가 직접 만들거나 생성한 데이터들이 저장되는 큰 저장 공간이다.크기가 커질 수 있고, 위치가 정해져 있지 않다. 느리지만 유연한 점이 특징이다. 스택(Stack)과 힙(Heap)구분StackHeap위치고정적, 작음동적, 큼용도함수 호출, 지역 변수객체, 배열, 함수 등 참조값속도빠름느림관리컴파일러가 자동 관리JS 엔진(GC)이 자동 관리 (Garbage Collection) function test() { const a = 1; // 스택 (고정 크기, 기본 타입) const b = { value: 2 }; ..
주요 시간 관련 용어 정리UTC (Coordinated Universal Time)세계 표준 시간이며 한국(KST)보다 9시간 느리다.자바스크립트에서 new Date().toISOString()시 항상 UTC 기준이다. KST (Korea Standard Time)한국 표준시이며 자바스크립트에서 new Date()시 브라우저 기준으로 기본적으로 로컬 타임존(KST)을 반영한다. ISO 8601 String시간의 표준 표현 포맷으로 기계나 인간이나 모두 이해하기 좋다.2025-04-20T10:00:00.000Z → UTC 기준 (Z는 Zulu time = UTC)2025-04-20T19:00:00+09:00 → KST 기준 자바스크립트로 new Date().toISOString()시, 항상 UTC 기..