현업 실무에서 직접 검증하고 적용한 AI 엔지니어링 & 풀스택 개발 아카이브

최근 업데이트

• AI 도구 연동과 MCP · 2026-11-13

  MCP로 프론트엔드 워크플로우 연결하기: GitHub·Figma·Playwright·Chrome DevTools 조합

  GitHub, Figma, Playwright, Chrome DevTools MCP 서버를 디자인 확인부터 브라우저 검증, PR까지 한 루프로 묶는 구성을 정리했다. 2026-07-28 스펙 변화, .mcp.json 예시, 아카이브된 참조 서버 구분법도 다룬다.

• AI 코딩 어시스턴트 · 2026-11-12

  Cursor Voice Chat·Build Live Apps·Agent SDK 사용법: 2026년 11월 신기능 실습

  Cursor가 공개한 Voice Chat with Agents, Build Live Apps, Agent SDK의 동작 방식을 공식 변경 로그 기준으로 정리하고, 음성 지시로 Next.js 페이지를 고친 뒤 공유 링크를 만드는 절차와 요금제 구성을 다룬다.

• 프론트엔드·풀스택 개발 · 2026-11-11

  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 사용 여부로 판별하고, 업그레이드부터 락파일 정리, 배포 후 캐시 비우기까지 적용 순서를 정리했다.

• 개발 생산성 워크플로우 · 2026-11-10

  Vitest로 테스트 전환: 설정과 모킹 전략

  기존 테스트 러너를 Vitest로 전환할 때 실행 환경 설정과 모듈 모킹 전략을 단계별로 정리했다. jsdom·Node 환경 분리, vi.mock 호이스팅 주의점, vi.spyOn과 가짜 타이머를 활용한 비동기 테스트 검증 절차를 다룬다.

• 프론트엔드·풀스택 개발 · 2026-11-09

  Vite와 Turbopack 빌드 성능 비교와 전환 판단

  개발 서버 콜드 스타트와 HMR 반응 속도, 프로덕션 번들링에서 Vite와 Turbopack이 보이는 아키텍처 차이를 비교했다. 동일 조건 성능 측정 지표, 플러그인·소스맵 호환성 점검, 빌드 도구 전환 판단 기준을 정리했다.

• 프론트엔드·풀스택 개발 · 2026-11-08

  tRPC vs REST: 타입 안전한 API 계층 선택

  TypeScript 풀스택 환경에서 tRPC와 REST(OpenAPI) 중 어떤 API 계약 방식을 선택할지 비교했다. 타입 추론과 스키마 코드 생성의 장단점, 다언어 클라이언트 지원, HTTP 캐싱과 외부 공개 경계 기준을 다룬다.

• 프론트엔드·풀스택 개발 · 2026-11-07

  TanStack Query로 서버 상태 다루기: 캐시·재시도·에러 처리

  서버에서 패칭한 비동기 데이터를 클라이언트 전역 상태와 분리해 TanStack Query로 관리하는 기준을 정리했다. 계층형 쿼리 키 설계, setQueryData와 invalidateQueries 무효화, 재시도·폴링 정책을 다룬다.

• 개발 생산성 워크플로우 · 2026-11-06

  Storybook으로 컴포넌트 문서화와 시각 회귀 테스트

  UI 컴포넌트를 상태별로 문서화하고 시각적 회귀를 자동으로 검출하는 Storybook 구축 방법을 정리했다. 기본·변형·예외 스토리 설계, play 함수 상호작용 테스트, 스냅샷 비교 노이즈 제거와 접근성 검사를 다룬다.

주제별로 전체 글 보기 →