고민하는 먼지

최신글

• 카테고리 없음 빌드 타임 vs 런타임의 이해와 Next.js 아키텍처 Next.js 앱이 사용자에게 전달되기까지는 크게 두 번의 중요한 시간표를 거칩니다. 개발자가 npm run build를 치는 순간(Build Time)과, 사용자가 브라우저에서 접속하는 순간(Runtime)입니다.1. 빌드 타임 (Build Time): 코드의 이산가족 상봉... 아니 이별 💔개발을 마치고 배포를 위해 빌드를 돌리면, Next.js 컴파일러는 코드베이스를 두 갈래로 찢어버립니다.① Server Components (RSC)의 운명조건: 파일 최상단에 'use client'가 없는 모든 파일.결과: 이 코드들은 브라우저가 읽을 수 있는 JS 번들(Chunk)에 절대 포함되지 않습니다.위치: 서버(Node.js) 디스크에 실행 가능한 로직으로 남아, 요청이 올 때마다 실행될 준비를 합니다..

• 프론트엔드 📘 연결의 핵심: Fiber와 프로토콜 (The Bridge) Next.js App Router 환경에서는 두 개의 리액트 트리(Fiber Tree)가 존재합니다. 하나는 서버(Node.js)에, 하나는 브라우저에 있죠. 이 둘을 실시간으로 동기화하는 기술이 바로 React Flight Protocol입니다.1. 두 개의 두뇌: Server Fiber vs Client Fiber 🧠리액트의 핵심 엔진인 Fiber(가상 DOM의 작업 단위)가 물리적으로 나뉘어 동작합니다.① Server Fiber (The Producer)위치: Node.js 메모리 (V8 Heap).역할: 컴포넌트 트리를 순회하며 렌더링합니다.특징:DB 접근 등 백엔드 로직을 수행합니다.Client Component를 만나면? 렌더링을 멈추고 "여기는 클라이언트가 처리할 구역(Module Refe..

• 네트워크 데이터의 여행: 네트워크와 CDN 우리가 브라우저 주소창에 엔터를 치는 순간, 데이터는 "택배 시스템"을 통해 지구 반대편으로 여행을 떠납니다. 이 여행은 기본 경로(인터넷 라우팅)와 지름길(CDN)로 나뉩니다.1. 통신의 주체와 방법 (Who & How)데이터를 실제로 옮기는 건 우리가 짠 코드가 아니라, 운영체제(OS) 하드웨어입니다.① 주체 (Who)OS (포장 전문가): "이 데이터(편지)를 IP 주소(집)와 포트 번호(방)로 보내줘"라는 요청을 받으면, 데이터를 패킷(Packet)이라는 택배 상자로 포장합니다.NIC/랜카드 (배송 트럭): OS가 넘겨준 디지털 데이터(0과 1)를 전기 신호나 전파로 바꿔서 케이블 밖으로 쏘아 보냅니다.② 통신 방법 (How): 캡슐화 (Encapsulation)데이터는 안전한 배송을 위해 여러 ..

• 프론트엔드 RSC와 서버 액션, 그리고 직렬화 (What & Why) React 18과 Next.js App Router의 도입은 단순한 기능 추가가 아니라, "서버와 클라이언트의 역할이 완전히 재설계된 것"입니다. 핵심은 데이터의 흐름과 렌더링 위치의 변화입니다.1. 핵심 개념 정의 (The Core Trinity)① RSC (React Server Components) - "주방의 요리사" 👨‍🍳정의: 브라우저(Client)가 아닌 서버(Node.js) 환경에서만 실행되는 컴포넌트입니다.역할: 데이터베이스(DB)나 파일 시스템에 직접 접근하여 데이터를 가져옵니다.특징: 로직이 서버에서 돌기 때문에, 결과물은 JavaScript 코드가 아니라 **직렬화된 데이터(JSON 형태의 UI 트리)**로 변환되어 브라우저로 전송됩니다.이점: 무거운 라이브러리(Date form..

• 프론트엔드 React Fiber와 useTransition의 동작 원리 1. useTransition이란?정의: UI를 차단하지 않고 상태를 업데이트할 수 있게 해주는 훅입니다. 급하지 않은 업데이트를 **"전환(Transition)"**으로 표시하여, 무거운 작업이 있더라도 사용자 입력(클릭, 타이핑) 같은 중요한 작업이 끊기지 않게 합니다.핵심: "지금 보여주는 화면을 유지하면서, 뒤에서 몰래 다음 화면을 준비해 줘."2. 통합 예제 코드이 코드는 Fiber(아키텍처), Suspense(비동기 제어), useTransition(우선순위) 예제입니다.import { useState, useTransition, Suspense } from 'react';// 1. 데이터를 읽다가 없으면 throw Promise 하는 함수 (가상)// 이 함수는 렌더링 중에 호출되면 실행을 ..

• 프론트엔드 React Fiber 파이버 알아보기 Fiber는 React 16에서 도입된 새로운 재조정(Reconciliation) 엔진의 핵심 알고리즘이자 구조입니다.1. Fiber의 정의와 목적어원: 'Fiber'는 섬유처럼 가닥가닥 쪼갤 수 있다는 의미를 가집니다.목적: 방대한 렌더링 작업을 작은 단위로 나누어 처리함으로써 효율성을 극대화하고, 내부 로직의 흐름을 개선합니다.구조적 특징: Fiber는 DOM 노드와 1:1로 매핑되는 자바스크립트 객체입니다.2. Fiber의 아키텍처: Double Buffering (이중 버퍼링)React는 메모리상에 두 개의 트리(Tree)를 유지하며 화면을 갱신합니다.Current Tree (현재 트리):현재 화면(Browser DOM)에 렌더링 된 상태를 그대로 담고 있는 트리입니다.마운트가 끝난 후의 기준점이..

• 프론트엔드 React Architecture 톺아보기 React는 크게 4가지 주요 패키지(Core, Scheduler, Reconciler, Renderer)로 구성되어 작동합니다.1. 주요 패키지 구성Core (react 패키지)컴포넌트 정의, useState, useEffect 같은 훅(Hook) 등 개발자가 사용하는 API를 정의합니다.특징: 구체적인 비즈니스 로직(어떻게 렌더링할지)은 포함하지 않습니다. 단지 정의만 하고, 실제 구현체(Reconciler/Renderer)가 이를 처리하도록 의존성을 주입하는 역할만 합니다. 덕분에 React는 웹(DOM), 앱(Native), VR 등 다양한 환경에서 공통된 API로 사용될 수 있습니다.Scheduler (스케줄러)역할: "누가 먼저 실행될지" 우선순위를 정하고 시간을 관리하는 교통정리 담당자입니다..

• 프론트엔드 React Conf 2025와 React Compiler 1. React Conf 2025 주요 발표핵심 테마: 자동화와 통합 (Automation & Unification)React Compiler v1.0 (Stable):가장 큰 기술적 이변.useMemo, useCallback 없이 빌드 타임에 자동으로 메모이제이션 처리.이제 새로운 React 앱의 "기본(Default)" 설정으로 권장됨.새로운 API:: 컴포넌트의 상태를 유지하면서 화면에서만 숨기는(Offscreen) 기능. (탭 전환 등 성능 최적화)Server Components & Actions 강화.생태계 변화:React Foundation: Meta 주도에서 벗어나 중립적인 거버넌스로 이관.React Native: "React Strict DOM"을 통해 웹과 네이티브 간 코드 공유 강화.2..