관련글가상돔(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 기..
React 18에서 Strict Mode React Strict Mode란?개발 환경에서만 작동하며 잠재적인 버그나 비권장 사용으로 인해 사이드 이펙트를 조기에 감지하기 위해 동작하는 React의 개발 도구이다. React 18에서의 Strict Mode는 '더 엄격해졌다'React 18에서 Concurrent Features (비동기 렌더링, 자동 배치 등)이 도입되면서 Strict Mode 아래에서 일부 함수형 컴포넌트가 의도적으로 두번 호출된다. - (관련글, 가상돔(Virtual DOM)과 React Fiber 구조)즉, 개발자들이 혼란스러워 할 수 있는 '컴포넌트가 두 번 렌더링 되는 현상'이 여기에 포함된다.개발 모드 환경에서만 한정으로 의도적으로 추가적인 재실행을 발생시키는데,초기 ..
클라이언트에서 API 호출할때 사용하는 도구를 알아보자. (fetch, axios, TanStack Query, SWR) + graphql, firebase, supabase fetch브라우저 내장 API로 별도의 설치 없이 사용이 가능하다.Promise 기반으로 HTTP 요청을 보낸다.사용 시 JSON 파싱 등 부가 처리를 직접해야한다.내장 API로 가볍고 기본적인 기능을 제공하며, 별도의 의존성이 없다는 장점이 있다.단점으로는 요청/응답 처리 로직을 매번 수동으로 작성해줘야하며 인터셉터나 요청/응답 변환 기능이 없다.에러처리나 타임아웃, 리트라이 같은 부분도 직접 작성해줘야한다.const res = await fetch('/api/data');const data = await res.json(); ..