테스트
test
블로그
읽고 만들며 배운 것을 정리해 둔다.
글 29편
Zod
TypeScript의 런타임 검증 한계를 해결하는 Zod의 사용 파이프라인(스키마·조건자·변경자·변형자)과 z.object·z.array·z.discriminatedUnion·.refine·.transform·.pipe 등 주요 API를 예시 중심으로 정리한다.
React Fiber
React 16의 Fiber가 렌더링을 중단·재개 가능하게 만든 작업 단위이자 컴포넌트 상태를 보관하는 객체임을, Stack Reconciler의 한계, return·child·sibling 포인터 순회, alternate 더블 버퍼링, lanes 우선순위, 훅 연결 리스트, 렌더·커밋 페이즈, 호스트/합성 컴포넌트, 엘리먼트와의 차이로 설명한다.
React Hook Form: register vs Controller
RHF register는 외부 트리거 시점에만 ref로 값을 꽂는 비제어, Controller는 매 렌더 value prop으로 다시 바인딩하는 제어 방식이라, 비동기로 옵션이 늦게 오는 select에서 기존 값이 표시되지 않는 이유를 제어/비제어 컴포넌트, defaultValues vs values, hydration 타임라인으로 설명한다.
병렬 라우트와 인터셉팅 라우트
Next.js App Router의 병렬 라우트(슬롯, default.tsx, useSelectedLayoutSegment)와 인터셉팅 라우트((.)/(..)/(...) 기호)로 한 화면에 여러 라우트를 독립적으로 띄우고 모달 overlay 패턴을 구현하는 방법.
하네스 엔지니어링
AI가 실수할 수 없는 환경을 설계하는 하네스 엔지니어링의 원칙과 docs·CLAUDE.md·Hooks·헤드리스 모드·지속적 개선 루프 등 구성 요소를 정리한다.
TypeScript 제네릭
TypeScript 제네릭이 타입을 함수 인자처럼 받아 실제 타입 결정을 호출 시점까지 미루는 장치임을 any·유니온과 비교해 설명하고, 타입 추론, 여러 타입 변수, 인터페이스 제네릭, extends 제약 조건, keyof와 인덱스 접근 타입까지 다룬다.
React 커스텀 훅
React 훅 규칙(최상위 호출·렌더링 컨텍스트)이 필요한 이유를 파이버 슬롯 구조와 ReactCurrentDispatcher로 설명하고, use 접두사가 런타임 차단이 아니라 ESLint rules-of-hooks용 표시인 이유, 커스텀 훅이 상태를 호출 컴포넌트의 파이버에 저장하는 동작 원리를 다룬다.
Docker
호스트 OS 커널을 공유하는 컨테이너 기반 플랫폼 Docker의 동작 원리. VM과의 차이, Namespace·cgroups·chroot·Union File System 격리, 이미지 레이어 구조와 pull, 컨테이너 생명주기, 포트 포워딩과 볼륨 마운트를 다룬다.
실패 없는 창업 전략
검증된 아이디어를 더 나은 UX로 개선하고 외부 투자 없이 부트스트랩으로 운영하는 창업 철학, MVP 정의부터 평생 할인·콘텐츠 마케팅까지의 실패 없는 창업 10단계
Route Handler
Next.js App Router의 Route Handler가 시크릿 키 보호·CORS 우회·웹훅 수신·스트리밍을 담당하는 BFF 계층 역할, 서버 컴포넌트·서버 액션과의 비교와 라우트 핸들러가 여전히 필요한 다섯 가지 경우
Next.js 서버 컴포넌트 패턴
서버 컴포넌트에서 fetch 메모이제이션과 cache()를 활용한 데이터 공유, server-only 패키지로 서버 전용 코드 보호, Provider 패턴으로 클라이언트 Context를 분리하는 방법을 정리한다.
ESLint
ESLint가 코드를 AST로 변환해 문법 오류와 스타일 위반을 검사하는 원리, React·TypeScript 플러그인과 실무 규칙, Prettier와의 역할 분리, AI 코드 생성 시대의 가드레일 역할
DNS (Domain Name System)
DNS의 계층 구조, 네임서버 위임, 레코드 종류(A, CNAME, MX, TXT), TTL 캐싱 전략과 전파 과정을 정리한다.
Playwright Assertions
Playwright의 expect() 기반 Assertion 종류와 사용법을 정리한다. Auto-retrying, Soft Assertions, expect.poll, toPass, 커스텀 매처까지 비동기 환경에서 안정적인 테스트를 작성하는 패턴을 다룬다.
Next.js Middleware
Next.js 미들웨어가 요청과 응답 사이에서 실행되는 방식과, Matcher 설정, NextResponse API를 통한 redirect/rewrite/next 제어, 그리고 axios interceptor와의 역할 차이를 정리한다.
Playwright Locator
Playwright의 Locator 개념과 권장 선택 방법을 정리한다. getByRole/getByLabel 등 접근성 기반 Locator 우선순위, filter를 이용한 요소 특정, and/or 조합 연산자, Strictness 규칙을 다룬다.
Next.js App Router에서 TanStack Query 사용하기
App Router 환경에서 QueryClient 초기화 전략, 서버 컴포넌트를 활용한 prefetch와 HydrationBoundary 연동, 그리고 pending 쿼리 dehydration을 통한 스트리밍 패턴을 정리한다.
Client Component
'use client' 선언이 서버-클라이언트 모듈 경계를 형성하는 원리와, 클라이언트 번들 크기를 최소화하는 컴포넌트 구조를 정리한다.
Server Component
RSC Payload를 중심으로 Next.js의 렌더링 흐름을 설명하고, Static·Dynamic·Streaming 세 가지 서버 렌더링 전략과 데이터 캐시의 독립적 관리 방식을 정리한다.
Next.js fetch와 캐싱
Next.js 서버 환경에서 fetch가 Data Cache에 응답을 저장하는 방식과, 시간 기반·온디맨드 재검증(revalidatePath, revalidateTag)의 동작 원리 및 라우트 세그먼트 캐시 설정을 정리한다.
data-active 속성 패턴
data-active 커스텀 데이터 속성으로 컴포넌트 상태를 DOM에 노출해 CSS 속성 선택자·디버깅·테스트가 같은 정보원을 공유하게 만드는 React 패턴. className 방식과의 비교, aria-* 속성과의 차이, 장단점을 정리한다.
Git HEAD
현재 작업 위치를 가리키는 포인터인 HEAD의 이중 참조 구조(HEAD → 브랜치 → 커밋), 커밋 시 HEAD가 브랜치를 따라 이동하는 방식, 그리고 브랜치에서 떨어져 나온 Detached HEAD 상태와 복구 방법을 정리한다.
git worktree
stash와 switch를 반복하던 브랜치 전환의 번거로움을 해결하기 위해 등장한 git worktree의 개념, add·list·remove·prune 명령어 사용법, 그리고 동일 브랜치 중복 체크아웃 제약 같은 운영 시 주의할 점을 정리한다.
GitHub Actions
GitHub Actions의 핵심 구성 요소(Workflow, Event, Job, Step, Action, Runner)와 실행 원리, Job 의존 관계, 시크릿 관리, 캐시 최적화까지 CI/CD 자동화의 기본 구조를 정리한다.
CI/CD
CI 단계에서 수행하는 의존성 설치, 린트, 테스트, 빌드 과정과 CD 단계의 패키징·레지스트리 업로드·배포 흐름, 그리고 브랜치별로 CI/CD를 분리해 적용하는 전략을 정리한다.
zshrc 는 무엇인가?
zsh 셸이 시작될 때마다 자동으로 읽는 설정 파일 .zshrc의 역할과 위치, PATH·alias·환경변수·pyenv 초기화 같은 대표 설정 예시, 그리고 source 명령으로 변경 사항을 즉시 반영하는 방법을 정리한다.
pyenv 설치하고 환경 변수 설정해야 하는 이유
그동안 노트북에 다양한 프로그램들을 설치할 때, 가끔 터미널을 켜서 환경 변수라는 것을 설정한 적이 있다. 이번 포스트에서 pyenv라는 프로그램을 설치하며 그 이유에 대해서 정리해보자.
NAS (Network Attached Storage)
DAS의 직접 연결 한계에서 출발해 NAS의 개념과 파일 공유·백업·원격 접속(포트 포워딩·DDNS·VPN) 활용법, 그리고 하드웨어 관리·보안 부담이 따르는 온프레미스 운영의 한계까지 정리한다.