Next.js window is not defined 오류 해결
Next.js에서는 같은 React 코드라도 서버에서 먼저 실행될 수 있습니다. 브라우저에만 존재하는 window, document, localStorage를 서버에서 읽으면 window is not defined 오류가 발생…
프론트엔드
HTML·CSS부터 JavaScript, React와 상태관리까지, 화면을 만들고 데이터를 다루는 기술을 배웁니다.
총 177개의 글
React 리스트 key 경고 해결 기준 index key를 피해야 하는 이유
React에서 배열을 map으로 렌더링하면 각 항목에 key가 필요합니다. key는 단순히 경고를 없애기 위한 값이 아니라, 이전 렌더와 다음 렌더 사이에서 “이 항목이 같은 항목인가?”를 React가 판단하는 기준입니다.
React useEffect 두 번 실행되는 이유 StrictMode API 중복 해결
개발 중 console.log나 API 요청이 두 번 실행되는 것처럼 보여 “useEffect가 두 번 실행된다”는 문제를 자주 만납니다. React StrictMode는 개발 환경에서 컴포넌트와 Effect의 문제를 더 빨리…
Next.js hydration failed 오류 해결
Hydration은 서버에서 만든 HTML에 React가 브라우저 이벤트와 상태를 연결하는 과정입니다. 서버 HTML과 클라이언트의 첫 렌더 결과가 다르면 hydration failed 경고가 발생할 수 있습니다.
Next.js metadata 적용 오류 해결
metadata 코드를 작성했는데 title이나 OG 정보가 적용되지 않는다면 브라우저 캐시만 의심하지 말고 파일 위치와 실행 경계를 먼저 확인합니다.
Zustand 리렌더링 원리와 selector 최적화 방법
Zustand 리렌더링 원리, selector 구독 구조, shallow 비교와 최적화 기준을 설명하는 개념형 글입니다.
Zustand 학습 로드맵: store·action·selector·persist 순서
Zustand를 적용할 때 로컬·전역 상태 경계부터 create store, action, selector, useShallow, persist와 Next.js hydration까지 순서대로 정리합니다.
Next.js 환경변수 env local 적용 오류 해결
.env.local을 수정했는데 값이 바뀌지 않거나 브라우저에서 undefined가 나오는 문제는 환경변수의 노출 범위와 로딩 시점을 이해하면 해결하기 쉽습니다.
Next.js Image remotePatterns 오류 해결
next/image로 외부 이미지를 표시하려면 허용할 원격 URL 패턴을 설정해야 합니다. 무작정 모든 호스트를 허용하기보다 실제 필요한 protocol, hostname, pathname 범위를 지정합니다.
Next.js Route Handler 405 오류 해결
App Router에서는 app/api 아래의 route.ts 파일로 HTTP endpoint를 만들 수 있습니다. 요청 메서드가 구현되지 않았거나 파일 위치와 URL이 맞지 않으면 405 오류를 만날 수 있습니다.