프론트엔드·풀스택 개발
프론트엔드 개발 실무와 백엔드를 아우르는 풀스택 개발 경험을 다룹니다. 특정 프레임워크 사용법 나열보다는 실제 프로젝트에서 마주한 문제와 해결 과정을 중심으로 정리합니다. AI 코딩 도구를 함께 활용했을 때 개발 흐름이 어떻게 달라지는지도 함께 살펴봅니다.
글 33편 최근 업데이트순
Next.js 16.4.5·React 19.3.1 보안 릴리즈 대응: use cache 취약점과 패치 순서
2026년 11월 3일 배포된 Next.js 16.4.5·15.5.29와 React 19.3.1 보안 패치의 영향 범위를 use cache 사용 여부로 판별하고, 업그레이드부터 락파일 정리, 배포 후 캐시 비우기까지 적용 순서를 정리했다.
Vite와 Turbopack 빌드 성능 비교와 전환 판단
개발 서버 콜드 스타트와 HMR 반응 속도, 프로덕션 번들링에서 Vite와 Turbopack이 보이는 아키텍처 차이를 비교했다. 동일 조건 성능 측정 지표, 플러그인·소스맵 호환성 점검, 빌드 도구 전환 판단 기준을 정리했다.
tRPC vs REST: 타입 안전한 API 계층 선택
TypeScript 풀스택 환경에서 tRPC와 REST(OpenAPI) 중 어떤 API 계약 방식을 선택할지 비교했다. 타입 추론과 스키마 코드 생성의 장단점, 다언어 클라이언트 지원, HTTP 캐싱과 외부 공개 경계 기준을 다룬다.
TanStack Query로 서버 상태 다루기: 캐시·재시도·에러 처리
서버에서 패칭한 비동기 데이터를 클라이언트 전역 상태와 분리해 TanStack Query로 관리하는 기준을 정리했다. 계층형 쿼리 키 설계, setQueryData와 invalidateQueries 무효화, 재시도·폴링 정책을 다룬다.
shadcn/ui와 디자인 시스템: 컴포넌트 소유권 관리
코드를 프로젝트에 직접 복사해 소유하는 shadcn/ui 컴포넌트를 사내 디자인 시스템으로 확장할 때 필요한 관리 규칙을 정리했다. 원본과 로컬 변형 분리, CLI diff 기반 업스트림 변경 반영, 디자인 토큰 계층화를 다룬다.
React 19 폼 액션과 useOptimistic으로 낙관적 UI 만들기
React 19의 폼 액션(useActionState)과 useOptimistic 훅을 조합해 서버 응답을 기다리지 않고 UI를 즉시 갱신하는 낙관적 업데이트 패턴을 정리했다. 롤백 처리, 중복 제출 방지, 스크린 리더 접근성까지 다룬다.
2026 프론트엔드 상태관리 선택: Zustand vs Redux vs Jotai
서버 상태 라이브러리가 보편화된 뒤에도 남는 클라이언트 전역 상태를 어떤 도구로 관리할지 비교했다. Zustand, Redux Toolkit, 원자 단위 접근의 차이와 프로젝트 규모·팀 역량에 따른 선택 기준을 정리했다.
PHP2Shell(CVE-2026-109618·109619) 대응: 서버별 PHP 버전 확인, 패치 반영 검증, php.ini 임시 완화 설정
PHP 원격 코드 실행 취약점 PHP2Shell에 대응해 서버·컨테이너의 실제 PHP 버전과 배포판 패키지의 CVE 반영 여부를 확인하고, 업데이트 전까지 FPM·Apache·nginx에 둘 임시 완화 설정, 적용 확인, 로그 점검 순서를 정리했다.
React Native 0.87 Strict TypeScript 기본값 대응과 마이그레이션 실무
React Native 0.87의 Strict TypeScript API 기본 채택과 Metro 0.87 번들러 변화에 맞추어, 기존 네이티브 모듈 타입 깨짐 문제를 해결하고 안정적으로 업그레이드하는 실무 마이그레이션 절차를 정리했습니다.
TypeScript 7.0 네이티브 컴파일러 전환 분석: 빌드 10배 가속과 마이그레이션 점검표
TypeScript 7.0의 Go 언어 기반 네이티브 컴파일러 도입이 가져온 빌드 성능 개선 실측치와 tsconfig 설정 변경 사항, 그리고 CI 파이프라인 마이그레이션 시 주의해야 할 호환성 점검표를 상세히 정리했습니다.
pgvector vs Pinecone vs Milvus: 아키텍처 비교와 상황별 벡터 데이터베이스 선택 가이드
RAG 애플리케이션 구축 시 고려하는 pgvector, Pinecone, Milvus의 아키텍처 차이와 인덱싱 알고리즘(HNSW), 비용 구조, 메타데이터 필터링 쿼리를 실무 비교표와 함께 상세히 분석하고 정리했다.
웹 개발자를 위한 AI 풀스택 엔지니어 12개월 실무 전환 로드맵
기존 웹 프론트엔드와 백엔드 개발 경력을 살려 AI 모델을 프로덕션 웹 서비스에 안전하게 통합하는 AI 풀스택 엔지니어로 성장하기 위한 12개월 4단계 로드맵과 구체적인 스트리밍 API 구현 예제를 상세히 정리했다.
음성 AI 에이전트가 고객 말을 끊지 않게: VAD 침묵 기준과 턴 감지 모델을 함께 쓰는 구성법
음성 상담 AI가 고객이 머뭇거릴 때 말을 끊거나 응답이 늦어지는 문제를 VAD와 턴 감지 모델을 겹쳐 푸는 방법을 정리했다. LiveKit 오디오 턴 감지기 설정, Silero VAD와 Smart Turn 직접 연결, 통화 로그 지표로 대기 시간 조정까지 다룬다.
Next.js 16.4 업그레이드: ensureStatic으로 정적 보장, navigation()으로 프리페치 범위 줄이기
Next.js 16.4로 올린 뒤 ensureStatic 단계로 정적 라우트를 빌드에서 지키고, navigation()·prefetch()로 프리페치 비용을 줄이는 방법을 정리했다. next upgrade --agent 정책과 실험 플래그 선택 기준도 다룬다.
AI로 국제화(i18n) 작업 줄이기: next-intl 메시지 구조, 초벌 번역 검수, 키 검사 자동화
next-intl 기준으로 메시지 키를 설계하고, AI 초벌 번역 뒤 사람이 검수하는 흐름과 로케일 파일 간 누락 키·플레이스홀더 불일치를 잡는 검사 스크립트를 정리했다. Intl.PluralRules로 언어별 복수형 분류가 어떻게 다른지 실제 실행 결과로 확인한다.
OpenAPI 문서와 실제 응답 어긋남 잡기: 스펙 기준 응답 검사와 AI 문서 보강 순서
API 문서가 구현과 어긋나는 원인을 정리하고, OpenAPI 3.1 스펙의 응답 스키마로 실제 응답을 검사하는 스크립트를 예시 서버에 실행해 문서에 없는 필드, 다른 에러 형식, 바뀐 타입 6건을 찾아낸 결과를 다룬다. AI로 설명과 예제를 보강할 때 지킬 규칙도 함께 정리했다.
AI로 접근성 점검하고 고치기: WCAG 2.2 기준 자동 검사와 수동 확인 나누기
WCAG 2.2에서 추가된 성공 기준과 대비 기준을 정리하고, 색 대비와 마크업처럼 기계로 판별할 수 있는 항목을 점검하는 스크립트를 이 사이트에 실행한 결과를 다룬다. 실행 중 발견한 제목 단계 건너뜀을 고친 과정과 사람이 확인할 항목도 함께 정리했다.
AI로 프로젝트 보일러플레이트 만들기: 고정 템플릿과 생성 범위 나누기, 설치 전 의존성 점검
AI 코딩 도구로 새 프로젝트를 만들 때 고정할 부분과 생성시킬 부분을 나누고, 생성된 package.json을 설치 전에 점검하는 스크립트를 정리했다. 없는 패키지, 5년간 배포가 없는 패키지, peer 의존성 충돌, min-release-age 설정의 실제 실행 결과를 다룬다.
Next.js Core Web Vitals 개선: LCP·INP·CLS 원인별 점검 순서
Next.js 사이트의 Core Web Vitals를 지표별로 진단하는 순서를 정리했다. LCP·INP·CLS 기준과 75백분위, useReportWebVitals 수집, next/image 우선 로딩, 레이아웃 이동과 긴 작업 원인을 다룬다.
Tailwind CSS v4 마이그레이션: 업그레이드 도구와 바뀐 설정·유틸리티 정리
Tailwind CSS v3 프로젝트를 v4로 옮기는 과정을 공식 업그레이드 가이드 기준으로 정리했다. 업그레이드 도구 실행, 브라우저 지원 범위, @import와 @theme 설정, 패키지 변경, 이름이 바뀐 유틸리티와 테두리·링 기본값 변화, 수동 점검 항목을 다룬다.
Stripe 웹훅 서명 검증과 중복 처리로 결제 이벤트를 안전하게 받기
Stripe 웹훅을 안전하게 처리하는 방법을 공식 문서 기준으로 정리했다. Stripe-Signature와 원본 본문 서명 검증, 재전송 공격 허용 시간, 이벤트 ID로 중복 처리 막기, 빠른 2xx 응답과 비동기 처리, 순서 비보장 대응, Stripe CLI 로컬 테스트를 다룬다.
PostgreSQL 무중단 스키마 변경: expand-contract 순서와 잠금 주의점
AI가 만든 마이그레이션을 운영 PostgreSQL에 안전하게 적용하는 방법을 정리했다. ALTER TABLE 잠금 수준, 기본값 컬럼 추가, CREATE INDEX CONCURRENTLY, NOT VALID와 VALIDATE, expand-contract 순서를 다룬다.
Vercel AI SDK로 스트리밍 채팅 UI 만들기: 상태·중단·오류 처리
Vercel AI SDK의 useChat으로 스트리밍 채팅 UI를 만드는 방법을 정리했다. Route Handler 스트리밍 응답, parts 기반 메시지 렌더링, 상태별 UI, 중단과 재시도, 업데이트 빈도 조절을 공식 문서 기준으로 다룬다.
Supabase RLS 정책 작성과 검증: 배포 전에 확인할 정책 패턴
Supabase 행 수준 보안(RLS) 정책 작성과 검증을 공식 문서 기준으로 정리했다. RLS 활성화와 기본 권한 회수, auth.uid() 정책, USING과 WITH CHECK, 성능 팁, service_role 키 관리, pgTAP 테스트를 다룬다.
Next.js App Router 인증 구조: Proxy 1차 확인과 데이터 접근 계층(DAL)
Next.js 16 App Router에서 인증과 권한 확인을 어디에 둘지 공식 가이드 기준으로 정리했다. 세션 쿠키 옵션, proxy.ts의 낙관적 확인과 한계, 데이터 접근 계층의 verifySession, DTO로 반환 필드 줄이기, 레이아웃 검사가 위험한 이유를 다룬다.
Next.js 16 캐싱 정리: use cache, cacheTag, updateTag, revalidateTag 적용 순서
Next.js 16 Cache Components 모델의 캐싱 적용 순서를 정리했다. cacheComponents 활성화, use cache와 cacheLife, Suspense 처리, 데이터 변경 후 updateTag와 revalidateTag 선택 기준을 다룬다.
Next.js Route Handlers vs Server Actions: 폼·웹훅·업로드별 선택 기준
Next.js 16에서 Server Actions와 Route Handlers 중 무엇을 쓸지 판단하는 기준을 공식 문서로 정리했다. 순차 실행, 1MB 본문 제한, CSRF 검사, 웹훅의 원본 본문 처리, 외부 클라이언트 호출, 파일 업로드 상황별 선택과 공통 보안 원칙을 다룬다.
Server Components와 Client Components 경계 설계: 'use client' 위치를 정하는 기준
Next.js App Router에서 'use client' 경계를 어디에 둘지 정하는 기준을 공식 문서로 정리했다. 경계가 모듈 그래프에 미치는 영향, 상호작용 부분만 분리하는 방법, children 슬롯 패턴, 직렬화 제약, server-only로 비밀값을 지키는 방법을 다룬다.
Next.js App Router 서버 액션 에러 핸들링: 결과 객체, Zod 검증, useActionState 패턴
Next.js 16.3 공식 문서 기준으로 서버 액션의 예상된 에러와 처리되지 않은 예외를 구분하고, 결과 유니온 타입 정의, Zod 서버 검증, useActionState 폼 연결, try 밖 redirect, error.tsx 경계와 확인 순서를 코드와 함께 정리했다.
Docker로 AI 애플리케이션 개발·배포 환경 만들기: GPU 설정부터 이미지 분리까지
AI 애플리케이션을 Docker로 다룰 때 필요한 호스트 GPU 준비(NVIDIA Container Toolkit), 코드를 마운트하는 개발용 Compose 구성, Python을 직접 설치하는 배포용 CUDA 이미지, 이미지 크기 관리와 자주 나는 오류를 순서대로 정리했다.
Next.js 16.3 Instant Navigations 적용기: 앱처럼 느껴지는 라우팅 만들기
Next.js 16.3의 Instant Navigations 기능이 무엇이고 어떤 원리로 동작하는지 정리했다. 체감 지연이 큰 라우트부터 점진적으로 적용하는 마이그레이션 순서와, 캐시 설계·회귀 테스트에서 실전에 주의할 점을 함께 다룬다.
AI 개발에 필요한 파이썬 데이터 전처리 기초: Pandas와 NumPy 활용법
AI 모델의 성능은 결국 입력되는 데이터 품질에서 갈린다. Pandas와 NumPy로 결측치·중복·인코딩·스케일링을 처리하는 기본기와, 학습·테스트 분할 순서를 지켜 데이터 누수를 피하는 방법을 실제 코드 예시와 함께 정리했다.
FastAPI로 만드는 AI 서비스 백엔드: 비동기 API 설계 기초
AI 서비스 백엔드에서 외부 API 호출처럼 시간이 걸리는 작업을 비동기로 처리해야 하는 이유와, FastAPI로 실제 엔드포인트를 설계하는 방법을 정리했다. CPU 연산이 오래 걸리는 작업을 스레드 풀로 분리하는 방법과 자주 하는 실수도 함께 다룬다.