글

전체 41개

Daily

학습 노트의 구조 — 개념 / 절차 / 함정을 분리해서 쓰는 이유

학습 노트가 일기처럼 시간 순서로 흘러가지 않게, 개념/절차/함정 세 영역으로 분리해서 쓰는 이유와 작성 패턴. 다시 볼 때 검색이 빨라집니다.

2026.07.13· 2분· 5· 0· 0

#learning#notes#knowledge-management

Frontend

View Transitions API — 페이지 전환 애니메이션의 새 표준

브라우저 표준 트랜지션 API. startViewTransition 호출만으로 cross-fade, view-transition-name으로 morphing, MPA 자동 전환까지 라이브러리 없이.

2026.07.09· 1분· 4· 0· 0

#view-transitions#animation#spa#mpa

React

useId — SSR hydration mismatch를 방지하는 표준 패턴

폼 라벨, aria 연결에 unique id가 필요할 때 SSR-안전한 표준 훅. 한 번 호출해 suffix로 다중 id 만들기, Tabs 같은 다중 컨트롤 패턴까지.

2026.07.06· 1분· 3· 0· 0

#react#useId#accessibility#ssr

React

Server Component의 경계 — use client를 어디에 붙여야 하는가

기본은 Server, 인터랙션 필요한 잎에만 use client. children 패턴, Server Actions 폼, 직렬화 가능한 prop 규칙과 자주 헷갈리는 케이스 정리.

2026.07.02· 1분· 4· 0· 0

#react#nextjs#server-components#use-client

React

useTransition vs useDeferredValue — 둘이 정확히 무엇이 다른가

두 훅의 핵심 차이는 받는 것이 함수냐 값이냐. 탭 전환·검색 결과·라우트 이동 등 시나리오별 선택 기준과 같이 쓰는 패턴까지.

2026.06.29· 1분· 4· 0· 0

#react#concurrent#useTransition#useDeferredValue

Tools

Playwright test.describe.configure — 테스트 격리 · 재시도 · 병렬 제어

그룹 단위로 모드(serial/parallel)·재시도·타임아웃을 제어. 결제 같은 의존적 흐름과 읽기 전용 병렬 테스트, 로그인 세션 재사용 패턴까지.

2026.06.25· 1분· 8· 0· 0

#playwright#testing#e2e#test-config

Tools

Bun을 패키지 매니저로만 쓸 때의 현실적 주의점

Bun을 런타임이 아니라 패키지 매니저로만 도입할 때의 실용 가이드. lockfile 형식, postinstall 함정, monorepo 한계, 점진 도입 전략.

2026.06.22· 1분· 4· 0· 0

#bun#package-manager#monorepo#ci

Tools

Vite의 esbuild + Rollup 이중 구조 — 개발과 빌드가 다른 이유

Vite가 dev에는 esbuild, build에는 Rollup을 쓰는 이유. 같은 코드가 두 단계에서 다르게 동작하는 흔한 케이스와 디버깅 팁.

2026.06.18· 1분· 8· 1· 0

#vite#esbuild#rollup#build

글

전체 41개

Daily

학습 노트의 구조 — 개념 / 절차 / 함정을 분리해서 쓰는 이유

학습 노트가 일기처럼 시간 순서로 흘러가지 않게, 개념/절차/함정 세 영역으로 분리해서 쓰는 이유와 작성 패턴. 다시 볼 때 검색이 빨라집니다.

2026.07.13· 2분· 5· 0· 0

#learning#notes#knowledge-management

Frontend

View Transitions API — 페이지 전환 애니메이션의 새 표준

브라우저 표준 트랜지션 API. startViewTransition 호출만으로 cross-fade, view-transition-name으로 morphing, MPA 자동 전환까지 라이브러리 없이.

2026.07.09· 1분· 4· 0· 0

#view-transitions#animation#spa#mpa

React

useId — SSR hydration mismatch를 방지하는 표준 패턴

폼 라벨, aria 연결에 unique id가 필요할 때 SSR-안전한 표준 훅. 한 번 호출해 suffix로 다중 id 만들기, Tabs 같은 다중 컨트롤 패턴까지.

2026.07.06· 1분· 3· 0· 0

#react#useId#accessibility#ssr

React

Server Component의 경계 — use client를 어디에 붙여야 하는가

기본은 Server, 인터랙션 필요한 잎에만 use client. children 패턴, Server Actions 폼, 직렬화 가능한 prop 규칙과 자주 헷갈리는 케이스 정리.

2026.07.02· 1분· 4· 0· 0

#react#nextjs#server-components#use-client

React

useTransition vs useDeferredValue — 둘이 정확히 무엇이 다른가

두 훅의 핵심 차이는 받는 것이 함수냐 값이냐. 탭 전환·검색 결과·라우트 이동 등 시나리오별 선택 기준과 같이 쓰는 패턴까지.

2026.06.29· 1분· 4· 0· 0

#react#concurrent#useTransition#useDeferredValue

Tools

Playwright test.describe.configure — 테스트 격리 · 재시도 · 병렬 제어

그룹 단위로 모드(serial/parallel)·재시도·타임아웃을 제어. 결제 같은 의존적 흐름과 읽기 전용 병렬 테스트, 로그인 세션 재사용 패턴까지.

2026.06.25· 1분· 8· 0· 0

#playwright#testing#e2e#test-config

Tools

Bun을 패키지 매니저로만 쓸 때의 현실적 주의점

Bun을 런타임이 아니라 패키지 매니저로만 도입할 때의 실용 가이드. lockfile 형식, postinstall 함정, monorepo 한계, 점진 도입 전략.

2026.06.22· 1분· 4· 0· 0

#bun#package-manager#monorepo#ci

Tools

Vite의 esbuild + Rollup 이중 구조 — 개발과 빌드가 다른 이유

Vite가 dev에는 esbuild, build에는 Rollup을 쓰는 이유. 같은 코드가 두 단계에서 다르게 동작하는 흔한 케이스와 디버깅 팁.

2026.06.18· 1분· 8· 1· 0

#vite#esbuild#rollup#build