Next.js 환경변수 적용 오류 해결: .env.local을 바꿨는데 값이 안 바뀔 때
Next.js 환경변수 적용 오류 해결: .env.local을 바꿨는데 값이 안 바뀔 때 상황에서 먼저 확인할 로그, 설정, 버전, 환경 차이를 실무 체크리스트로 정리합니다.
프론트엔드
프론트엔드 카테고리에서는 사용자 화면을 구현하는 데 필요한 핵심 기술과 실무 지식을 정리합니다. HTML, CSS, JavaScript를 비롯해 React, Next.js, UI 컴포넌트 설계, 상태 관리, API 연동, 성능 최적화, 반응형 웹까지 프론트엔드 개발 전반을 다룹니다.
총 87개의 글
Next.js Image remotePatterns 오류 해결: 외부 이미지 도메인 허용하기
Next.js Image remotePatterns 오류 해결 방법의 원인과 해결 기준을 실제 작업에서 확인할 순서에 맞춰 정리합니다.
Next.js Route Handler 405 오류 해결: GET/POST 파일 위치와 메서드 설정 확인
Next.js App Router Route Handler에서 405 Method Not Allowed가 날 때 route.ts 위치, export 메서드, 요청 URL, form/action 메서드를 점검하는 방법을 정리합니…
Next.js SEO 완전 가이드: App Router metadata부터 배포 확인까지
Next.js App Router metadata, generateMetadata, openGraph, canonical, sitemap, robots.txt, Vercel 배포 후 확인까지 한 흐름으로 점검합니다.
Playwright 테스트 실패 해결: locator가 요소를 찾지 못할 때 체크리스트
Playwright 테스트 실패 해결: locator가 요소를 찾지 못할 때 체크리스트 상황에서 확인할 원인과 해결 순서를 실무 기준으로 정리합니다.
Next.js useSearchParams Suspense 오류 해결: 빌드 실패 기준
Next.js useSearchParams Suspense 오류 해결: App Router 빌드가 실패할 때 상황에서 확인할 원인과 해결 순서를 실무 기준으로 정리합니다.
Next.js fetch 캐시 문제 해결: 데이터가 바뀌었는데 화면이 그대로일 때
Next.js fetch 캐시 문제 해결: 데이터가 바뀌었는데 화면이 그대로일 때 상황에서 확인할 원인과 해결 순서를 실무 기준으로 정리합니다.
Radix UI와 shadcn/ui 차이: 컴포넌트를 고를 때 헷갈리는 기준 정리
Radix UI와 shadcn/ui 차이: 컴포넌트를 고를 때 헷갈리는 기준 정리 상황에서 확인할 원인과 해결 순서를 실무 기준으로 정리합니다.
Next.js Server Actions + React Hook Form 검증 기준
Next.js Server Actions와 React Hook Form을 함께 쓸 때 form action, validation, 서버 검증 기준을 정리합니다.
shadcn/ui No import alias found 오류 해결: tsconfig 설정
shadcn/ui의 No import alias found 오류를 components.json, tsconfig paths, Vite resolve.alias 기준으로 해결합니다. Next.js·Vite·모노레포 점검 순서도…