프론트엔드 — 관련 콘텐츠 59건

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

npm ERESOLVE, 피어 의존성 충돌, legacy-peer-deps, overrides | 설치가 멈추면 뭐부터 볼까?

npm ERESOLVE unable to resolve dependency tree는 코드가 아니라 어떤 패키지가 요구하는 피어 버전과 설치된 버전이 어긋나서 난다. npm 7부터 피어 의존성을 설치 시점에 엄격 검사하기 때문이다. npm explain·npm ls로 충돌 출처를 찾고, 버전 맞추기와 package-lock 재생성, npm 8.3 overrides로 전이 의존성 고정, --legacy-peer-deps와 --force의 차이와 위험까지. 개발자, Next.js, 리액트, 프론트엔드, npm, 오픈소스 기준. 2026년 8월 npm 공식 문서.

CORS 에러, 프리플라이트, Access-Control-Allow-Origin | 로컬은 되는데 배포하면 막히면?

CORS 에러는 코드가 틀려서가 아니라 서버가 응답에 허용 헤더를 안 붙여서 브라우저가 읽기를 막는 것이다. 프로토콜·도메인·포트가 하나라도 다르면 교차 출처가 되고, JSON 본문이나 Authorization 헤더가 붙으면 OPTIONS 프리플라이트가 먼저 날아간다. Access-Control-Allow-Origin·Methods·Headers, 쿠키를 쓸 때 와일드카드 금지와 정확한 출처 반사, Vary Origin, Next.js rewrites 회피까지. 개발자, Next.js, 프론트엔드, 백엔드, API, 보안 기준. 2026년 8월 MDN·Fetch 표준.

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

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

lefthook, husky, git 훅, pre-commit | 커밋은 됐는데 린트가 안 돌면?

허스키를 깔아도 커밋이 그냥 나가면 훅 파일이 저장소에 없는 것이다. 허스키는 준비 스크립트가 훅 자리를 만들고, 레프트훅은 설정 파일과 설치 한 줄이다. 피엔피엠은 빌트 의존에 없으면 설치 후 스크립트를 건너뛴다. 개발자, 오픈소스, 깃허브, Next.js, 프론트엔드, 린트, API, 데브옵스 기준으로 로컬 훅 칸만 보고 시크릿 글, 액션 동시성 글과 자리를 섞지 않는다. 2026년 8월 공식 문서.

프록시, matcher, 서버 액션, 관리자 경로 | 화면만 잠그면 저장이 열릴까?

관리 화면이 로그인으로 튕겨도 서버 액션 POST는 남을 수 있다. 넥스트 16 프록시는 미들웨어 자리이고, matcher가 api나 그 경로를 빼면 그 칸의 액션은 안 탄다. 페이지 권한은 화면만 가리고, 액션 안에서 세션을 다시 본다. 개발자, Next.js, 보안, API, 백엔드, 프론트엔드, 서버 액션 기준으로 matcher와 액션 칸만 보고 세임사이트 글, 폼 훅 글과 자리를 섞지 않는다. 2026년 8월 공식 문서.

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

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

파일 업로드, 매직 바이트, 확장자, 용량 | 문의 첨부가 서버를 깨면?

문의 첨부는 확장자가 아니라 앞 바이트로 받습니다. 피엔지 서명과 제이펙 서명만 통과하고, 에스브이지는 스크립트가 돌아 거절합니다. 버셀 함수는 요청 본문 4.5메가에서 413입니다. 개발자, Next.js, 보안, API, 백엔드, 프론트엔드, 버셀 기준으로 이름과 용량 칸만 보고 턴스타일, 에스에스알에프 글과 자리를 섞지 않습니다. 2026년 8월 공식 문서.

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

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

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

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

Bun, 노드, pnpm | 패키지 설치가 5배 빠르면 실제로 바꿔야 하나?

2026년 기준 Bun이 npm·pnpm보다 빠른 이유(JavaScriptCore·하드링크 캐시)와 실제 속도 비교 수치, Next.js 프로젝트 설치 방법, 네이티브 바인딩 패키지·Vercel 배포·Windows 호환 문제까지 1인 개발자 관점으로 정리한다. TypeScript 스크립트 직접 실행 사례 포함.

캐시 컨트롤, 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 헤더 글과 서버 액션 글과 각을 섞지 않는다.

인앱결제, 앱마켓 제재, 구글 애플 | 결제 경로를 어떻게 나눠 둘까?

방미통위 2026년 8월 12일 전체회의에서 구글·애플 인앱결제 강제, 앱 심사 지연, 수수료 차별 안건은 심의됐지만 과징금은 미확정이다. 2023년 예고 구글 약 475억·애플 약 205억, 전기통신사업법, 스토어·제3자·웹 결제 영수증과 부가세 10%, 프론트엔드·API·보안 헤더 점검 목록. 앱 개발자 결제 경로 실무 가이드.

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

구글 앱 월간 활성, 네이버 추월, 제미나이 AI 모드, AI탭 | 제품 팀이 먼저 볼 숫자는?

2026년 7월 구글 앱 MAU 약 4702만·네이버 약 4685만으로 앱 이용자 첫 역전 보도를 정리한다. 검색 점유율과 MAU 차이, AI 모드·제미나이 인 크롬·네이버 AI탭, 제품·콘텐츠 팀이 2주에 끝낼 체크리스트와 Search Console 분리 측정. LLM·API·개발자·프론트엔드·백엔드 유입 전략과 인용용 FAQ·표 구조 가이드.