React — 관련 콘텐츠 28건

async await, 클라이언트 컴포넌트, use | 로그인 버튼에서 유저를 기다렸는데 빨간 줄이면?

use client 파일에서 컴포넌트를 async로 선언하면 async/await is not yet supported in Client Components가 납니다. 카카오 닉네임은 서버에서 await 한 뒤 문자열만 내리고, 화면을 먼저 띄우려면 프로미스를 use로 풉니다. 클릭 핸들러의 await는 됩니다. 넥스트, 리액트, 앱 라우터, 프론트엔드, 1인 개발자 기준. 2026년 9월 Next.js, React 공식 문서.

useSearchParams, Suspense, 정적 빌드 | 로컬은 되는데 빌드만 멈추면?

정적 페이지에서 useSearchParams를 쓰면 가장 가까운 서스펜스 경계까지가 클라이언트에서만 그려집니다. 개발 서버는 통과하고 next build만 missing suspense로 멈춥니다. 훅 자식만 감싸거나 카카오 code는 서버 searchParams로 읽습니다. 넥스트, 리액트, 프론트엔드, 앱 라우터, 1인 개발자 기준. 2026년 9월 Next.js 공식 문서.

Objects are not valid as a React child, 객체, Promise | 카카오 유저를 화면에 넣었는데 빨간 줄이면?

Objects are not valid as a React child는 일반 객체, Date, Promise를 JSX 자식으로 넣었을 때 납니다. 카카오 유저는 닉네임 필드를, 목록은 map을, 프로미스는 await나 use로 바꿉니다. 리액트 31번, 넥스트, JSON.stringify, 프론트엔드, 1인 개발자 기준. 2026년 9월 리액트·넥스트 공식 문서.

window is not defined, document, 브라우저 API | use client를 붙였는데도 빌드가 죽으면?

use client를 붙여도 window is not defined가 나면, 클라이언트 컴포넌트가 서버에서 한 번 그려진 겁니다. 렌더와 파일 맨 위가 아니라 useEffect나 ssr false로 옮깁니다. 넥스트, 리액트, document, 카카오 지도, 다음 주소, 프론트엔드, 1인 개발자 기준. 2026년 9월 Next.js, React 공식 문서.

useState, use client, 서버 컴포넌트 | 훅을 넣었는데 빨간 줄이면?

앱 라우터에서 useState가 막히면 그 파일은 아직 서버 컴포넌트입니다. 훅을 쓰는 파일 맨 위에 use client를 붙이거나 버튼만 쪼갭니다. Invalid hook call, 하이드레이션과 자리를 나눕니다. 넥스트, 리액트, 서버 컴포넌트, 카카오 로그인, 프론트엔드, 1인 개발자 기준. 2026년 9월 Next.js, React 공식 문서.

Text content did not match, 날짜, toLocaleString | 한국 시간이 서버와 어긋나면?

Text content did not match에서 서버와 브라우저 날짜 글자가 다르면 toLocaleString이 시간대와 로케일을 환경 기본값으로 쓴 상태다. Asia/Seoul을 박거나 첫 렌더는 고정하고 마운트 뒤에 바꾼다. 하이드레이션 일반 원인, DB 타임스탬프츠와 자리를 나눈다. Next.js, React, Intl, 버셀, 프론트엔드, 개발자 기준. 2026년 9월 Next.js·MDN 공식 문서.

error.tsx, not-found, global-error, digest | 없는 글인데 500이 뜨면?

없는 글인데 500이 뜨면 행이 없을 때 throw 한 것이다. notFound는 없음 칸을 열고, 에러 파일은 예기치 않은 예외만 받는다. 같은 폴더 레이아웃은 에러 파일이 안 감싸고, 프로덕션은 digest로 서버 로그와 맞춘다. 개발자, Next.js, 프론트엔드, React, API, 버셀 기준으로 404와 500 칸만 보고 폼 훅 글, 프록시 글과 자리를 섞지 않는다. 2026년 8월 공식 문서.

after, waitUntil, 응답 후 작업, 페이지뷰 | 문의 저장이 끝났는데 버튼이 안 풀리면?

문의 저장이 끝났는데 버튼이 안 풀리면 액션이 메일을 기다린 겁니다. Next.js after는 응답을 보낸 뒤에 로그와 페이지뷰를 돌리고, 버셀은 15.1부터 대기 유틸 대신 이 함수를 권합니다. 정적 페이지에서는 빌드 때 돕니다. 프론트엔드, React, 서버 액션, API, 개발자, 백엔드, 넥스트 기준으로 응답 뒤 칸만 보고 폼 훅 글, 캐시 헤더 글과 자리를 섞지 않습니다. 2026년 8월 넥스트, 버셀 공식 문서.

useFormStatus, useActionState, 이중 제출, 서버 액션 | 문의 버튼이 두 번 눌리면?

문의 폼 버튼이 두 번 눌리면 자식에서 폼 상태 훅의 대기로 잠근다. 액션 상태 훅은 서버가 돌려준 에러를 남기고, 같은 컴포넌트의 폼은 대기가 안 뜬다. React, Next.js, 서버 액션, 프론트엔드, 개발자, API, 폼데이터 기준으로 제출 중 칸만 보고 서버 액션 보안 글과 자리를 섞지 않는다. 2026년 8월 공식 문서.

MSW, API 모킹, 브라우저 핸들러, Vitest | 컴포넌트 테스트 전에 어떻게 붙이나?

MSW(Mock Service Worker)로 REST API를 브라우저·Vitest Node에서 모킹하는 단계별 튜토리얼. 설치·handlers·setupWorker·setupServer, server.use 오버라이드로 500·401·빈 목록 UI 검증, delay·쿼리·Authorization 조건, Next.js·Playwright·CI 경계와 프로덕션 가드. 프론트엔드·개발자·API·TypeScript·테스트 자동화 실습 가이드.

Vitest, Jest, 단위 테스트, Vite 마이그레이션 | 기존 설정을 언제 옮길까?

Vitest와 Jest를 속도·설정 공유·API 호환·CI·레거시 조건으로 비교한다. Vite 앱은 vite.config 통합이 유리하고, Webpack·커스텀 러너·수천 스냅샷 레거시는 Jest 유지가 합리적이다. 이전 체크리스트, 시나리오별 선택, FAQ와 공식 문서 링크를 정리한 프론트엔드 단위 테스트·TypeScript·React 개발자 가이드.

TanStack Query v5 실전 심층 분석 | 캐시·staleTime·무효화·Next.js

탠스택 쿼리(TanStack Query) v5로 서버 상태를 다루는 실전 심층 가이드. queryKey 설계, staleTime·gcTime·refetch 정책, useMutation 캐시 무효화, 무한 스크롤, 에러 재시도, Next.js 앱 라우터 경계, 주스탄트와의 역할 분리를 표·코드로 정리. 개발자·프론트엔드·React·TypeScript·API 캐시 실무용 FAQ 포함.

Next.js Server Actions 실전 심층 분석 | 폼, 캐시 무효화, 보안 체크

Next.js 서버 액션을 폼 제출·뮤테이션에 쓸 위치, 라우트 핸들러와 비교 표, FormData 검증, revalidatePath·revalidateTag 캐시 무효화, 세션·소유권 보안, 에러·로딩 UX, 배포 전 체크리스트를 심층 정리. 개발자·프론트엔드·앱 라우터·React 서버 컴포넌트·API 설계 실무 가이드.

Zod vs Valibot vs Yup 2026 — TypeScript 스키마 검증 라이브러리 실전 비교

조드(Zod) vs 발리봇(Valibot) vs 얍(Yup) TypeScript 스키마 검증 비교. 타입 추론·번들·엣지 런타임·React Hook Form·tRPC 연동·마이그레이션 비용을 표로 정리한다. 신규 Next.js·API·폼 검증 표준을 고르는 개발자용 vs-comparison 가이드. 런타임 타입 안전성·서버 액션·클라이언트 번들 예산 기준으로 선택한다.

Next.js App Router 프로덕션 체크리스트 2026 — 라우팅·캐싱·보안·SEO·성능 45항목

Next.js App Router 프로덕션 배포 전 점검 체크리스트 45항목. 라우팅·레이아웃, fetch 캐싱·revalidate, 렌더링 모드, 보안 헤더·미들웨어, SEO 메타·구조화 데이터, next/image·폰트, 에러 관측, Core Web Vitals·배포 게이트까지 프론트엔드 실무 기준으로 정리한다. React 서버 컴포넌트 환경에서 출시 직전 놓치기 쉬운 항목을 팀 온보딩·릴리즈 문서에 바로 쓸 수 있게 구성했다.

바이브코딩 리팩터링 전략 심층 가이드 — AI가 만든 코드를 유지보수 가능한 구조로 전환하는 5단계

클로드 코드(Claude Code)·커서(Cursor)로 빠르게 만든 코드에는 중복 함수, any 타입 남용, 비대화된 컴포넌트가 쌓입니다. AI 생성 코드의 특성을 이해하고 체계적으로 리팩터링하는 5단계 전략을 다룹니다. 코드베이스 지도 그리기, 테스트 안전망, 중복 제거, TypeScript 타입 정비, 컴포넌트 경계 재설계까지 TanStack Query·Zod·Vitest 실전 코드와 함께 정리합니다.

React Native vs Flutter 모바일 앱 프레임워크 선택 가이드 (리액트 설치 포함)

인력 1명짜리 한국 1인 개발팀이라면 이미 React를 쓰고 있고 코드를 웹·앱에 나눠 쓰고 싶을 때는 리액트 네이티브(React Native), 처음부터 모바일 화면 품질과 빌드 안정성을 우선하고 싶을 때는 플러터(Flutter)가 맞습니다. 둘 다 무료 오픈소스라 비용 차이는 없고, 진짜 갈림길은 학습 비용·국내 채용 시장·혼자 유지보수 가능한 범위에서 갈립니다. 이 글은 제가 Next.js + 슈퍼베이스(Supabase) + 버셀(Vercel) 조합으로 12개 사이트를 직접 돌리는 1인…

HTTP 404 에러 원인과 해결 방법 — 웹 개발 케이스별 정리

한 줄 요약: HTTP 404는 "요청한 주소에 해당하는 파일이나 페이지가 서버에 없다"는 뜻이다. 브라우저가 보내는 에러가 아니라 서버가 돌려주는 응답 이라는 게 핵심이다. HTTP 상태 코드는 서버가 브라우저에게 "요청 결과가 어떻다"고 알려주는 숫자다. 404는 "Not Found", 즉 해당 주소에 있어야 할 것이 없다 는 뜻이다.

React 상태 관리 비교 2026 — Zustand vs Jotai vs Redux Toolkit vs Valtio

React 상태 관리 라이브러리는 Redux 독점 시대를 지나 Zustand, Jotai, Valtio, Recoil 등 경량 라이브러리가 주류가 됐다. 2026년 기준 npm 다운로드 수, 번들 크기, API 설계 철학, 실제 사용 패턴을 비교하고, 프로젝트 규모와 팀 상황별 선택 기준을 제시한다. React의 기본 상태 관리(useState, useContext)로 충분한 경우가 많다.

React Compiler 1.0 실전 마이그레이션 가이드 — useMemo·useCallback 없는 React 개발

React Compiler 1.0이 2025년 10월 정식 출시됐다. 빌드 타임에 컴포넌트를 분석해 자동으로 메모이제이션을 삽입하는 이 도구는 useMemo·useCallback을 직접 작성하던 패턴을 근본적으로 바꾸고 있다. React Compiler는 빌드 타임(ahead-of-time) 컴파일러 다. 소스 코드를 분석해 어떤 값이 렌더링 간에 변하지 않는지 추론하고, 필요한 위치에 메모이제이션을 자동 삽입한다.