#react
노트 65개
Frontend
브라우저와 모바일 화면에서 사용자가 직접 만나는 UI를 만드는 분야의 지식 모음.
Frontend › Architecture
가독성을 높이는 전략읽기 좋은 코드는 한 번에 고려할 맥락이 적고, 위에서 아래로 읽히고, 시각적 배치와 의미적 묶음이 일치한다. 같이 실행되지 않는 코드 분리, 구현 상세 추상화, 로직 종류별 함수 쪼개기로 맥락을 줄이고, 복잡한 조건·매직 넘버에 이름을 붙이고, 시점 이동과 중첩 삼항을 줄이고, 게슈탈트 법칙(근접성·공통 영역·유사성·연속성·폐쇄성)으로 빈 줄·주석·배치·이름을 점검한다.
Frontend › Architecture
결합도를 낮추는 전략결합도는 코드를 고쳤을 때 영향이 미치는 범위다. 모듈 결합도의 고전적 6단계 분류(자료~내용)와 높은 결합의 신호를 정리하고, 페이지 전체 쿼리 파라미터를 한 훅에 몰지 않고 책임별로 쪼개고, 앞으로 갈라질 수 있는 코드는 중복을 허용하고, Props Drilling은 조합(children) 패턴으로 먼저 풀고 마지막에 Context를 쓴다. 앱 규모에서는 기능 모듈이 서로를 부르지 않고 퍼사드(샌드박스)와 중재자(앱 코어)를 거치게 한다.
Frontend › Architecture
응집도를 높이는 전략응집도는 함께 수정돼야 할 코드가 항상 함께 수정되는지다. 모듈 응집도의 고전적 7단계 분류(기능적~우연적)와 낮은 응집의 신호를 정리하고, 함께 바뀌는 파일을 도메인 디렉토리에 모으고, 매직 넘버를 상수로 묶어 한쪽만 바뀌는 일을 막고, 폼은 변경 단위에 따라 필드 단위 검증과 스키마 기반 폼 전체 검증 중 하나를 고른다.
Frontend › Architecture
컴포넌트를 분리하는 기준과 방법컴포넌트를 나누는 이유는 재사용, 복잡성, 렌더링 범위 세 가지다. 재사용할 컴포넌트는 주변 HTML 문맥에 기대지 않을 만큼 일반적이어야 하고, 쓰는 곳마다 조건문이 붙는다면 중복이 아니므로 고유한 부분은 props로 넘긴다. 복잡한 컴포넌트는 책임과 변경 빈도(UI vs 비즈니스 로직)를 기준으로 나누고, 서로 무관한 상태는 각자의 컴포넌트로 내린다.
Frontend › Architecture
프론트엔드 폴더 구조의 진화역할 기반 폴더(components·hooks·services)에서 출발해 순수 UI와 도메인 컴포넌트를 나누고, 페이지를 독립시키고, 다시 엔티티(데이터)·위젯(화면)·기능(행동) 중심으로 응집해 가는 과정을 따라가며, 좋은 폴더 구조는 팀의 멘탈 모델과 일치하는 구조라는 결론을 정리한다. FSD를 규칙이 아니라 렌즈로 쓰는 법.
Frontend › Architecture
프론트엔드에서 의존성 관리하기의존성은 곧 변경에 노출되는 관계다. 변수는 스코프를 좁히고 값을 바꾸는 길을 하나로 만들고, 여러 곳이 쓰는 함수는 의존성 역전으로 계약에 기대게 하고, 타입은 API 응답이 아니라 잘 바뀌지 않는 도메인 타입에 기대게 한다.
Frontend › Architecture
프론트엔드와 SOLID 원칙객체 지향 설계 원칙 SOLID(SRP·OCP·LSP·ISP·DIP)를 React 컴포넌트와 함수 위주 JS·TS 코드에 옮겨 본다. 책임은 요구 사항 단위로 나누고, 분기 대신 확장으로 기능을 늘리고, props는 필요한 만큼만 받고, 데이터 소스는 추상화 뒤에 숨긴다.
Frontend › Architecture
Atomic Design과 컴포넌트 폴더 구조Brad Frost의 Atomic Design(원자 → 분자 → 유기체 → 템플릿 → 페이지)은 디자인 시스템을 이해하기 위한 멘탈 모델이지 폴더 구조 규칙이 아니다. 그대로 폴더로 쓰면 분자·유기체 경계가 흐려지고 계층 하나로는 분류가 안 된다. 기획·디자인이 부르는 이름으로 먼저 나누고, 이름이 더 없는 곳부터 계층 구조를 쓰는 절충안을 정리한다.
Frontend › Architecture
Feature-Sliced Design프론트엔드 코드를 레이어 → 슬라이스 → 세그먼트 3단계로 나누고, 위 레이어만 아래 레이어를 쓰게 하며, 슬라이스는 Public API로만 드나들게 하는 아키텍처 방법론. 구조, 규칙, 다른 구조와의 비교, Next.js와 함께 쓸 때의 충돌, 그리고 레이어 경계를 정하고 점진적으로 도입하는 법을 정리한다.
Frontend › Architecture
UI 변경 감지: 상태가 바뀌면 화면은 어떻게 따라 바뀌나UI 프레임워크의 핵심 문제는 상태를 화면으로 투영하고, 상태가 바뀌었을 때 최소한의 DOM만 고치는 것이다. 전부 새로 그리기, 수동 재렌더, 데이터 바인딩(관찰 가능한 모델·Proxy), 더티 체킹(AngularJS digest·zone.js), 가상 DOM 비교, 불변 데이터로 비교 건너뛰기, 시그널, 컴파일러까지 변경을 '언제·어떻게 아는가'로 나눠 비교하고, React Fiber가 렌더링을 쪼개 우선순위를 매기는 방식을 정리한다.
Frontend › CSS
CSS-in-JS와 CSS Modules대규모 CSS의 일곱 가지 문제(전역 이름 공간, 의존성, 죽은 코드, 압축, 상수 공유, 비결정적 우선순위, 격리 깨짐)와 이를 빌드 도구로 푼 CSS Modules, JS로 푼 CSS-in-JS를 비교한다. 런타임 방식에서 빌드 타임(zero-runtime) 방식으로 옮겨 간 이유와 서버 컴포넌트 시대의 선택지까지 정리한다.
Frontend › JavaScript
문(Statement)과 식(Expression)식은 값을 만들어 내는 코드이고, 문은 무언가를 하라는 명령이다. 문에는 식을 끼우는 자리가 있고, 식은 늘 어떤 문 안에 있다. 블록 문과 그룹 연산자, 세미콜론과 자동 세미콜론 삽입(ASI) 규칙과 함정. 함수 인자, 화살표 함수의 간결한 본문, JSX의 중괄호는 식만 받는 자리라서 if·for 대신 삼항 연산자·map을 쓴다.
Frontend › Mobile
React Native 기초와 스타일링React 코드를 네이티브 UI로 바꿔 주는 React Native의 동작 원리(브리지에서 New Architecture로), Expo로 시작하기, 코어 컴포넌트, StyleSheet와 Flexbox 레이아웃, onPress·onChangeText 이벤트와 ScrollView·FlatList 목록.
Frontend
Next.jsReact 위에 라우팅·렌더링 전략·캐싱을 얹은 프레임워크. 왜 쓰는지, App Router가 데이터를 어떻게 가져오는지, 서버·클라이언트 컴포넌트를 어떻게 섞는지 정리한 노트 모음.
Frontend › Next.js
서버 컴포넌트와 클라이언트 컴포넌트 조합 규칙React Server Components에서 서버·클라이언트 컴포넌트를 어떻게 섞을 수 있는지 한 장으로 정리한다. 클라이언트는 서버 안에 넣을 수 있지만 서버를 클라이언트에서 import할 수는 없고, 대신 children·props로 넘길 수 있다. 클라이언트에서 서버 코드를 부르는 Server Function과 그 주의점까지 Next.js 16 문서 기준으로 확인했다.
Frontend › Next.js
Next.js App Router의 내비게이션과 데이터 가져오기App Router는 서버가 라우팅하고 클라이언트가 내비게이션한다. Link·useRouter, prefetch와 클라이언트 캐시, 서버 컴포넌트의 병렬·순차 fetch, 요청 중복 제거, React cache()와 preload 패턴을 정리한다.
Frontend › Next.js
Next.js App Router의 파일 규칙과 라우팅App Router는 폴더가 URL 세그먼트, 특수 파일이 그 세그먼트의 역할이 된다. page·layout·template·loading·error·not-found·route·default의 렌더링 계층, 동적 세그먼트([id]·[...slug]·[[...slug]])와 Promise인 params, URL에 안 나오는 라우트 그룹과 프라이빗 폴더, 병렬 라우트(@slot)와 가로채는 라우트((.)·(..))로 만드는 URL 있는 모달, Route Handler, Metadata 병합과 title 템플릿까지 Next.js 16 기준으로 정리한다.
Frontend › Next.js
Next.js를 쓰는 이유SSR·SSG·파일 기반 라우팅·자동 코드 스플리팅을 제공해 React 앱의 초기 로딩과 SEO를 개선하는 프레임워크. App Router의 fetch 캐싱과 재검증, Next.js 16의 'use cache'까지.
Frontend › Next.js
React Server Components의 동작 원리서버가 컴포넌트 트리를 렌더링해 HTML이 아니라 직렬화된 React 트리(RSC Payload)를 스트리밍하고, 브라우저가 클라이언트 컴포넌트 참조를 실제 코드로 바꿔 트리를 재구성하는 과정을 정리한다. SSR과의 차이, 요청 왕복을 줄이려고 나온 배경과 서버 컴포넌트 모델(XHP)에서 출발한 역사, 다시 렌더링되지 않는다는 성질과 클라이언트 경계, 갱신 방식, 제약까지.
Frontend
React상태가 바뀌면 필요한 부분만 다시 그리는, 컴포넌트 기반 UI 라이브러리.
Frontend › React
동시성 렌더링: useTransition과 useDeferredValueReact는 업데이트를 급한 것(입력)과 급하지 않은 것(전환)으로 나눠, 급하지 않은 렌더링은 중간에 끊고 급한 것을 먼저 처리한다. useTransition·startTransition은 상태 업데이트를 전환으로 표시하고(React 19부터 async 함수도 받아 Actions의 바탕이 된다), useDeferredValue는 값의 반영을 늦춘다. Suspense와 use는 기다리는 동안의 화면을 맡는다.
Frontend › React
로직 재사용 패턴: HOC, Render Props, 커스텀 훅여러 컴포넌트가 같은 상태 로직(구독, 마우스 위치, 마운트 여부)을 나눠 쓰는 세 가지 방법. 컴포넌트를 받아 감싼 컴포넌트를 돌려주는 고차 컴포넌트(HOC), 무엇을 그릴지 함수로 받는 render props, 훅 안에 로직만 담는 커스텀 훅을 비교하고, 컨테이너 컴포넌트와 커스텀 훅 중 무엇을 재사용할지 고르는 기준을 정리한다.
Frontend › React
리렌더링 원인과 추적리렌더링을 일으키는 원인, React.memo가 효과 없는 경우, useQuery가 최소 두 번 렌더링하는 이유, DevTools로 추적하고 줄이는 순서.
Frontend › React
리스트 가상화(Windowing)항목이 수천 개인 목록에서 화면에 보이는 항목만 DOM에 그리고 나머지는 높이만 차지하게 하는 기법. 원리(전체 높이 + 보이는 구간 계산 + 절대 위치), TanStack Virtual·react-window 사용법, 가변 높이·접근성·찾기 기능 같은 한계와 content-visibility 대안을 정리한다.
Frontend › React
리스트와 Key배열을 map으로 엘리먼트 목록으로 바꿔 렌더링하는 방법과, 각 항목을 식별하는 key의 역할. key 값(없음·랜덤·인덱스·id)에 따라 리렌더링과 리마운트가 어떻게 달라지는지, 인덱스 key가 오히려 빠른 경우까지 다룬다.
Frontend › React
리액트 상태 관리의 흐름과 고르는 기준상태를 종류(로컬·서버·URL·폼·전역 클라이언트)로 먼저 나누고, 전역 상태 라이브러리는 읽기·쓰기·리렌더링 최적화·메모리 네 가지 문제를 어떻게 푸는지로 비교한다. Flux·Redux에서 Context, 서버 상태 라이브러리, atom·proxy 기반 라이브러리로 이어진 흐름까지.
Frontend › React
실시간 채팅 앱의 데이터 흐름: REST와 WebSocket 역할 나누기채팅 앱은 상태 조회·변경은 REST로, 새로 생기는 이벤트 전달은 WebSocket으로 나눈다. 리소스 계층이 드러나는 URL 설계, 소켓 연결의 수명 관리, optimistic UI와 중복 방지, 긴 메시지 목록의 렌더링 최적화 포인트를 정리한다.
Frontend › React
재사용 컴포넌트를 위한 리액트 패턴 5가지Compound Components, Control Props, Custom Hook, Props Getters, State Reducer를 제어 역전(IoC) 정도와 구현 복잡도로 비교한다. 제어권을 많이 넘길수록 유연해지지만 쓰기 어려워지므로, 필요한 만큼만 고르는 것이 핵심이다.
Frontend › React
재조정(Reconciliation)과 state 보존React가 리렌더링 때 이전 엘리먼트 트리와 새 트리를 비교해 DOM 변경을 최소로 계산하는 과정. render 단계와 commit 단계, 타입이 다르면 하위 트리를 통째로 리마운트하고 같으면 속성만 고치는 비교 규칙, state가 트리의 '위치'에 묶여 보존·초기화되는 원리와 key로 초기화하는 법을 정리한다.
Frontend › React
조건부 렌더링조건에 따라 서로 다른 컴포넌트를 그리거나 아예 그리지 않는 React의 렌더링 패턴.
Frontend › React
컴포넌트 생명주기컴포넌트가 화면에 나타나고(마운트) 바뀌고(업데이트) 사라지는(언마운트) 흐름. 함수 컴포넌트에서는 useEffect의 의존성 배열과 cleanup으로 다루고, 클래스 생명주기 메서드는 기존 코드를 읽기 위한 대응표로 정리한다.
Frontend › React
컴포넌트와 PropsUI를 재사용 가능한 조각으로 나누는 컴포넌트와, 부모가 자식에게 값을 넘기는 읽기 전용 입력값 props. 타입은 TypeScript로 정하고, React 19부터 ref도 일반 prop으로 받는다.
Frontend › React
포털: createPortal로 다른 DOM에 그리기createPortal(children, domNode)은 컴포넌트 트리의 위치는 그대로 두고 DOM만 다른 곳(보통 document.body)에 그린다. 모달·툴팁·토스트가 부모의 overflow·z-index에 갇히지 않게 할 때 쓰며, 이벤트 버블링과 Context는 DOM이 아니라 React 트리를 따른다.
Frontend › React
폼과 제어 컴포넌트입력값을 React state로 관리하는 제어 컴포넌트, 여러 입력 다루기, 파생 값 계산, 그리고 React 19의 폼 액션(useActionState·useFormStatus).
Frontend › React
프런트엔드 에러 핸들링: 분류와 선언적 처리에러를 '예상 가능한가'와 '사용자가 해결할 수 있는가'로 나눠 대응(가이드·격리·모니터링)을 정하고, React에서는 Suspense·ErrorBoundary로 로딩·에러를 선언적으로 처리한다. 이벤트 핸들러 에러를 경계로 넘기는 법과 예상치 못한 에러의 전역 처리까지.
Frontend › React
합성: 상속 대신 Compositionchildren과 props로 컴포넌트를 조합해 재사용하는 React의 방식. children, 이름 있는 슬롯 props, 특수화, as prop, 합성으로 props drilling 줄이기를 언제 쓰는지 정리하고, 상속을 권장하지 않는 이유를 덧붙인다.
Frontend › React
Context와 전역 상태props를 일일이 내려주지 않고 컴포넌트 트리 전체에 값을 공유하는 Context API와, Context로 부족할 때 고르는 전역 상태 라이브러리(Redux Toolkit, Zustand, Jotai).
Frontend › React
JSX와 엘리먼트 렌더링JavaScript 안에서 HTML처럼 UI를 선언하는 JSX 문법과, 그 결과물인 불변 React 엘리먼트의 렌더링.
Frontend › React
MUI Dialog로 삭제 확인 창 만들기되돌릴 수 없는 동작 전에 한 번 더 묻는 확인 다이얼로그를 MUI Dialog로 재사용 가능하게 만들고, 위험한 버튼을 덜 눈에 띄게 디자인하는 방법.
Frontend › React
React 버전 변천사: 16부터 19.3까지React가 메이저 버전마다 무엇을 바꿨는지 한 장으로 본다. 16의 Fiber와 Hooks, 17의 새 JSX 변환과 루트 이벤트 위임, 18의 createRoot·자동 배칭·동시성 기능·스트리밍 SSR, 19의 Actions·use·ref as prop·서버 컴포넌트와 제거된 레거시 API, 19.2의 Activity·useEffectEvent, 19.3의 ViewTransition·Fragment ref, 그리고 React Compiler까지 버전별 변경점과 개념 노트를 잇는다.
Frontend › React
React 빌드 환경 직접 구성하기: webpack·Babel·TypeScriptReact 코드가 브라우저에서 돌기까지 Babel(문법 변환)과 webpack(번들링)이 무엇을 하는지, CDN 한 줄 실습부터 webpack+Babel+TypeScript 직접 구성, 라우팅·코드 스플리팅, 도구별 클라이언트 환경 변수 규칙까지 정리한다. CRA는 지원이 끝났다.
Frontend › React
React 스타일링: Sass, CSS Modules, styled-componentsReact 컴포넌트에 스타일을 입히는 방법들. Sass와 clsx로 옵션이 많은 재사용 컴포넌트 만들기, CSS Modules의 고유 클래스 이름과 :global, CSS-in-JS 라이브러리 styled-components·emotion의 css 헬퍼·테마·transient props·퇴장 애니메이션까지.
Frontend › React
React 이벤트 처리JSX 속성으로 핸들러 함수를 넘기는 React의 이벤트 처리 방식과 DOM 이벤트와의 차이.
Frontend › React
React Hooks함수 컴포넌트에서 state·생명주기·메모이제이션을 쓰게 해 주는 API와 그 규칙, 커스텀 훅. useEffect를 생명주기가 아니라 동기화로 보는 관점, deps를 줄이는 법, 요청 경쟁 상태 처리까지.
Frontend › React
React Router: 라우팅 기초와 레이아웃·BreadcrumbsSPA에서 URL마다 다른 컴포넌트를 그리는 React Router의 기초(Routes·Route·Outlet, Link·NavLink, useParams·useSearchParams, useNavigate, 중첩 라우트)와, 일관된 URL 규칙 위에서 레이아웃이 경로별 버튼과 Breadcrumbs를 그리는 패턴. v5 시절 API(Switch, exact, withRouter, history)와의 대응표 포함.
Frontend › React
react-hook-form과 MUI Selectreact-hook-form의 Controller로 MUI Select 같은 외부 UI 컴포넌트를 연결하고, 빈 값·placeholder·수정 폼 초기값을 다루는 방법.
Frontend › React
React에서 음성 녹음하고 파일로 보내기getUserMedia로 마이크 권한을 얻고 MediaRecorder로 녹음해 Blob을 만든 뒤, 다운로드 링크로 저장하거나 FormData(multipart/form-data)로 서버에 보내는 흐름. react-media-recorder로 간단히 쓰는 방법까지.
Frontend › React
React와 TypeScriptReact 코드에 타입을 붙이는 자리별 방법. 컴포넌트는 props 타입을 매개변수에 붙인 평범한 함수로 쓰고, children은 ReactNode, HTML 요소 감싸기는 ComponentProps<'button'>, ref는 React 19부터 Ref<T> prop으로 받는다. props 조합은 판별 유니언·never·오버로드로 제한하고, 제네릭 컴포넌트로 목록 항목 타입을 이어 준다. 이벤트·훅(useState·useRef·useReducer·useActionState·useOptimistic)·Context·클래스·Redux의 타입까지.
Frontend › React
Redux 미들웨어와 비동기 처리미들웨어는 dispatch와 reducer 사이에 끼어 액션을 기록·변형·무시하거나 다른 액션을 일으키는 함수 체인(store => next => action)이다. 비동기 처리는 thunk가 기본이고, 지금은 데이터 요청에 RTK Query나 createAsyncThunk, 액션에 반응하는 흐름에 listener middleware를 쓴다. redux-saga는 취소·디바운스가 얽힌 복잡한 흐름에만 남았다.
Frontend › React
Redux와 react-redux앱 전체가 공유하는 state를 store 한 곳에 두고, reducer에 정의한 방식대로 dispatch로만 바꾸게 하는 상태 관리 라이브러리. 지금은 Redux Toolkit의 createSlice·configureStore로 쓰고, react-redux의 Provider·useSelector·useDispatch로 컴포넌트와 연결한다.
Frontend › React
State와 useState컴포넌트가 스스로 관리하는 변하는 데이터인 state, useState와 함수형 업데이트, 배열·객체를 불변으로 바꾸는 방법(ES2023 복사 메서드, Immer), 공통 부모로 state 끌어올리기.
Frontend › React
SWR로 서버 데이터 가져오기캐시를 먼저 보여 주고 백그라운드에서 재검증하는 데이터 패칭 훅 SWR의 사용 패턴. mutate 옵션 객체와 optimisticData로 캐시를 갱신하고, SWR 캐시로 로그인 상태를 판단해 보호된 페이지를 만든다.
Frontend › React
TanStack Query(React Query)서버에서 가져온 데이터의 캐싱·재요청·로딩/에러 상태를 훅 하나로 다루게 해 주는 서버 상태 라이브러리. QueryClientProvider 설정, query key 설계, 캐시의 fresh·stale·inactive 생명 주기와 isPending·isFetching, 다시 가져오는 시점(mount·focus·reconnect·interval), select·enabled·의존 쿼리·useQueries, 페이지네이션과 useInfiniteQuery, useMutation 뒤 무효화·setQueryData·낙관적 업데이트, SSR(dehydrate·HydrationBoundary)까지.
Frontend › React
use 훅과 리액트 비동기 처리use는 컴포넌트가 Promise나 Context의 값을 직접 읽게 해 주는 React 19 API다. 조건문·반복문 안에서도 부를 수 있지만 컴포넌트·훅 밖과 try-catch 안에서는 안 되고, 클라이언트에서는 캐시된 Promise만 넘겨야 한다. 서버 컴포넌트에서 만든 Promise를 내려받아 읽는 것이 기본 패턴이다.
Frontend › Testing
의존성이 있는 컴포넌트 테스트하기fetch로 데이터를 받고, 자식 컴포넌트를 가져오고, Context에서 콜백을 받는 컴포넌트를 Vitest와 Testing Library로 테스트하는 세 가지 기법: 전역 fetch 바꿔 끼우기(vi.stubGlobal), 모듈 목(vi.mock), Provider로 테스트용 값 주입. 각 기법의 정리 방법과 한계, 그리고 MSW와 테스트하기 쉬운 설계로 넘어갈 시점을 정리한다.
Frontend › Testing
접근성 기반 UI 테스트 자동화UI 테스트가 xpath·CSS 선택자 때문에 쉽게 깨지던 문제를 WAI-ARIA의 role과 접근 가능한 이름(accessible name)으로 요소를 찾는 방식으로 푸는 법. getByRole 쿼리, aria-label·aria-labelledby·aria-current·aria-expanded 활용, 헤드리스 컴포넌트, 인수·회귀 테스트로서의 효과, 접근성 트리를 LLM·AI 에이전트의 입력으로 쓰는 법을 정리한다.
Frontend › Testing
프론트엔드에서의 TDD실패하는 테스트를 먼저 쓰고 통과시킨 뒤 리팩터링하는 TDD를 프론트엔드에 적용하는 방법. 목표와 사이클, 이점과 오해, BDD와의 차이(Given-When-Then, 이중 루프), 테스트하기 좋은 코드, Testing Library 예제, 현실적인 도입 순서.
Frontend › Testing
Storybook: 컴포넌트를 상태별로 떼어 보는 도구컴포넌트를 앱에서 떼어 내 상태별 '스토리'로 등록하고 보고·조작·테스트하는 UI 작업장. CSF3 스토리 객체와 args·argTypes, meta·스토리·전역 3단계 설정, decorators, 사이드바 계층, Storybook 9부터 코어에 들어간 Controls·Actions·Viewport 같은 도구, TypeScript의 Meta·StoryObj와 satisfies, 스토리를 그대로 테스트로 쓰는 흐름까지 정리한다.
Frontend › UI Design
제품 언어로서의 디자인 시스템: 토큰, 기능과 형태, 컴포넌트 API디자인 시스템을 범용 UI 라이브러리가 아니라 회사의 디자인 결정을 관리하는 제품 언어로 보는 관점을 정리한다. 결정을 값·의도·맥락으로 인코딩하는 디자인 토큰과 섣부른 시맨틱 토큰의 함정, 아토믹 단위가 하나로 정해지지 않는 이유와 컴포넌트를 기능(구조·상태·상호작용·맥락)과 형태(구조·시각 옵션·상태 옵션·디자인 결정)로 해부하기, 상태 압축, 공통 인터페이스로 디자인-개발의 순환 참조 끊기, 사전 조합 컴포넌트와 조합 가능한 패키지를 나눠 일관성과 유연성을 함께 주는 API를 다룬다.
Frontend › Web
스트리밍 SSRHTML을 한 번에 다 만들어 보내지 않고 Suspense 경계 단위로 나눠 흘려보내는 SSR. React 18에서 도입됐고, 지금은 React 19의 부분 사전 렌더링과 Next.js Cache Components의 기반이 되어 기본 동작으로 자리 잡았다.
Frontend › Web
프론트엔드 성능 최적화: 언제, 무엇을최적화는 측정한 뒤에, 최악의 사용자(p95·p99)를 기준으로, 무엇을 희생하는지 알고 한다. 느림은 초기 로딩(대역폭·지연 시간·JS 실행)과 런타임(실제 성능과 체감 성능)으로 나눠 본다. 캐싱·프리패치·코드 분할, 긴 작업 줄이기와 쪼개기, 파생 상태와 리렌더링 범위 좁히기를 각 원인에 맞춰 고른다.
Frontend
React와 Vue 비교같은 범주(컴포넌트 기반 선언형 UI, 가상 DOM)에 속하는 React와 Vue의 차이를 정리한다. JSX와 템플릿, 불변 상태와 반응형 상태, 단방향 흐름과 v-model, 라이브러리와 공식 생태계의 범위를 비교하고, 흔한 오해와 고르는 기준을 다룬다.
Frontend
UI 엔지니어링의 열두 가지 문제UI 엔지니어링의 실력은 라이브러리가 아니라 문제를 아는 데서 나온다. 일관성·반응성·지연·내비게이션·낡은 캐시·엔트로피·우선순위·접근성·국제화·전달·복원력·추상화라는 열두 문제는 툴팁부터 대형 SNS까지 어느 규모에서나 나타나며, 각 문제에 오늘날 쓰는 도구와 함께 정리한다.
Tools › Code Review
코드 리뷰에서 자주 나온 지적코드 리뷰에서 자주 반복되는 JavaScript·React 코드 지적(const, else, 기본값, 불리언 이름, 빈 문자열 비교, 비동기 에러, 불변 업데이트, props 설계 등)을 고친 코드와 함께 정리.