Frontend — 관련 콘텐츠 74건

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 공식 문서.

CSS module not found, .module.css, 대소문자 | 맥에서는 되고 리눅스 CI만 실패하면?

맥에서 되고 리눅스 통합 환경만 CSS 모듈을 못 찾으면 import 경로와 파일명 대소문자가 다른 상태다. git ls-files로 실제 이름을 보고 git mv로 맞춘다. Next.js .module.css, webpack Module not found, 깃 core.ignoreCase, 깃허브 액션, 프론트엔드, 개발자 기준. 2026년 9월 Next.js·webpack·깃 공식 문서.

Failed to load chunk, 동적 import, CDN 캐시 | 배포 직후만 흰 화면이면?

Failed to load chunk는 열어 둔 탭이 옛 빌드 자바스크립트 주소를 요청한 상태다. 네트워크에서 청크 404를 보고, HTML은 짧게 캐시하고, ChunkLoadError에서 한 번만 새로고침한다. 넥스트 동적 import, 웹팩 청크, 버셀 스큐, 씨디엔, 프론트엔드, 개발자 기준. 2026년 9월 webpack·Next.js·Vercel 공식 문서.

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

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

React invalid hook call, 훅 규칙, 중복 리액트 | 패키지가 리액트를 두 개 들고 있으면?

Invalid hook call이 패키지 쪽에서 나면 앱과 react-dom이 서로 다른 리액트 파일을 읽고 있는 상태다. npm ls react로 트리를 보고, npm link·별칭·overrides로 한 복사본에 맞춘다. 훅을 조건 안에 넣은 줄과 자리를 나눈다. React, Next.js, webpack, 피어 의존성, 프론트엔드, 개발자 기준. 2026년 9월 리액트·npm 공식 문서.

Invalid src prop, next/image, remotePatterns | 외부 이미지가 깨지면 설정은 어디인가?

넥스트 이미지가 Invalid src를 내면 외부 주소 호스트가 remotePatterns에 없는 상태다. next.config.js의 images 칸에 프로토콜·호스트·경로를 맞추고 개발 서버를 다시 켠다. unoptimized는 최적화만 끈다. Next.js, 이미지 최적화, 카카오 CDN, 슈퍼베이스 스토리지, 버셀, 프론트엔드, 개발자 기준. 2026년 9월 Next.js 공식 문서.

하이드레이션 미스매치, Hydration failed, 서버 클라이언트 불일치 | 콘솔에 빨간 줄이 뜨면 뭐부터 볼까?

Hydration failed는 코드가 틀린 게 아니라 서버가 그려 보낸 HTML과 브라우저 첫 렌더가 달라 리액트가 그 부분을 버리고 다시 그리는 것이다. new Date·Math.random·window·localStorage를 화면 그릴 때 읽거나, p 안의 div 같은 잘못된 HTML 중첩이 흔한 원인이다. 리액트 19 diff와 onRecoverableError로 범인을 찾고, useEffect 두 번 그리기·isClient 상태·dynamic ssr false·suppressHydrationWarning으로 안전하게 고치는 법까지. 개발자, Next.js, 리액트, 프론트엔드, SSR 기준. 2026년 8월 Next.js·React 공식 문서.

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월 공식 문서.

플레이라이트, Next.js, CI | E2E 테스트를 로컬에서 깔고 깃허브 액션에 붙이는 순서

2026년 E2E 테스트 선택 기준부터 Playwright 설치, playwright.config.ts webServer 설정, 첫 테스트 작성, 깃허브 액션 브라우저 캐시 연결까지 Next.js 기준으로 정리한다. 불안정한 테스트가 나오는 waitForTimeout 남용·전역 상태 공유·외부 API 의존 패턴도 포함.

테일윈드 v4, Next.js, CSS 변수, 플러그인 | 기존 프로젝트를 v4로 올릴 때 어디서 막히나?

Tailwind CSS v4의 핵심 변화인 tailwind.config.js 삭제·@theme 블록·CSS 변수 기반 테마 정의를 Next.js 프로젝트 기준으로 정리한다. 업그레이드 도구 실행 순서, 플러그인 호환 문제, 임의 값 문법 변화, v4 전환 여부 판단 기준까지 포함.

캐시 컨트롤, s-maxage, 스테일 리밸리데이트, CDN | 배포 직후 옛 페이지가 남는 이유는?

배포 직후 옛 HTML이 남으면 브라우저 max-age부터 본다. 캐시 컨트롤, s-maxage, 스테일 리밸리데이트, public과 private, no-cache와 no-store, Vary, 해시 파일, 버셀 CDN을 프론트엔드, Next.js, 개발자, API, 클라우드 기준으로 같은 표에 둔다. 넥스트 fetch 재검증 글과 쿠키 글과 자리를 섞지 않는다.

쿠키 SameSite, CSRF, 사파리, 서드파티 | 로그인이 한 브라우저에서만 풀리는 이유는?

사파리에서만 로그인이 풀리면 SameSite와 도메인부터 본다. Lax, Strict, None, HttpOnly, Secure, 파티션 쿠키, CSRF 토큰, 오리진 검사, 카카오 콜백, 프론트와 API 분리를 프론트엔드, 보안, API, Next.js, 개발자, 브라우저 기준으로 같은 표에 둔다. CSP 헤더 글과 서버 액션 글과 각을 섞지 않는다.

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·테스트 자동화 실습 가이드.

성능 예산, 번들 사이즈, Lighthouse CI, 서드파티 | PR에서 어떻게 막을까?

프론트엔드 성능 예산(performance budget)을 초기 JS 킬로바이트, LCP·INP·CLS, 이미지·폰트, 서드파티 스크립트 상한과 Lighthouse CI 게이트로 정리한다. 라우트별 번들 표, PR 체크리스트, 2주 도입 순서, web.dev·LHCI 출처와 Core Web Vitals·Vite·Next.js 내부링크. 개발자·React·번들러·API 연동 화면 성능 실무 가이드.

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

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

TanStack Query v5 실전 가이드 | React Query 마이그레이션·무한 스크롤·SSR 패턴

TanStack Query v5(구 React Query)는 useQuery 시그니처 단일 객체 통합, cacheTime→gcTime 변경, onSuccess/onError 제거 등 v4 대비 조용한 변경이 많다. 기본 설정부터 낙관적 업데이트·useInfiniteQuery·Next.js App Router SSR 연동까지 실전 코드로 정리하고, v4→v5 마이그레이션 체크리스트를 제공한다.

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

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