React 리스트 key 경고 해결 기준: index key를 피해야 하는 이유
React 리스트에서 key 경고가 나는 이유와 고치는 기준 React에서 리스트를 렌더링할 때 보이는 key 경고는 콘솔 문구를 지우는 문제로 끝나지 않습니다. React가 여러 항목을 비교할 때 어떤 항목이 같은 데이터인지 판단할 수 있도록 안정적인 …
더 읽기
hebi_admin
React useEffect API 중복 호출 원인과 해결 기준
useEffect에서 API가 두 번 호출될 때 먼저 볼 것 React 개발 중 useEffect 안의 API 요청이나 초기화 코드가 두 번 실행되는 것처럼 보일 때가 있습니다. 이때 바로 StrictMode를 끄기보다, 개발 환경의 의도된 재실행인지 실…
더 읽기
Next.js hydration failed 오류가 나는 이유와 해결 방법
Next.js hydration failed 오류가 나는 이유와 해결 방법에서 먼저 확인할 것 Next.js hydration failed 오류가 나는 이유와 해결 방법는 단순히 한 줄 코드를 바꾸는 문제로 끝나지 않습니다. 서버에서 만든 HTML과 클라이언트 첫 …
더 읽기
Next.js metadata가 적용되지 않을 때 확인할 7가지
이 글의 검색 의도: Next.js App Router에서 metadata를 작성했는데 title, description, OG 이미지가 적용되지 않을 때 확인하는 오류 해결 체크리스트입니다. Metadata API의 전체 개념은 Next.js App Router me…
더 읽기
Zustand Store 타입 지정: TypeScript로 state와 action 안전하게 관리하기
이 글에서 정리하는 내용 Zustand Store에 TypeScript 타입을 붙일 때는 상태 값만 보는 것으로 끝나지 않습니다. Store가 어떤 값을 가지고, 그 값을 어떤 action으로만 바꿀 수 있는지 하나의 계약으로 잡아야 합니다. 작은 카운터 Store에서…
더 읽기
Zustand 리렌더링 원리와 selector 최적화 방법
이 글의 목적 이 글은 개념형 글입니다. Zustand에서 리렌더링이 왜 발생하는지, React 렌더링 흐름과 selector 구독 구조를 연결해서 설명합니다. 상태 변경 후 화면이 안 바뀌는 개별 오류 해결보다 원리와 최적화 기준을 이해하는 데 초점을 둡니다. Zus…
더 읽기
Zustand 학습 순서: store, action, selector, persist까지
이 글에서 정리하는 내용 Zustand는 store를 만드는 코드가 짧아서 처음에는 쉽게 느껴집니다. 다만 실제로 헷갈리는 지점은 문법보다 상태를 어디에 둘지, 어떤 컴포넌트가 어떤 값을 구독하게 만들지, 새로고침 뒤에도 남길 값인지 판단하는 부분입니다.…
더 읽기
Next.js 환경변수 적용 오류 해결: .env.local을 바꿨는데 값이 안 바뀔 때
이 글은 프론트엔드 배포 오류 체크리스트: Vercel, Vite, Expo 문제 해결의 세부 항목입니다. 전체 설정 흐름과 관련 오류 해결 순서는 대표 허브 글에서 함께 확인할 수 있습니다. 환경변수를 수정했는데 화면이나 API 요청에서는 예전 값이 보이면 재시작…
더 읽기
npm install 의존성 충돌 해결: ERESOLVE 오류가 날 때 대처 방법
패키지를 하나 설치하려 했을 뿐인데 peer dependency 충돌 로그가 길게 나오면 어떤 패키지를 바꿔야 할지 판단하기 어렵습니다. ERESOLVE 로그는 충돌한 두 패키지를 찾는 것부터 시작합니다 의 ERESOLVE 오류는 의존성 트리를 만들 수 없다는 뜻…
더 읽기
Next.js Image remotePatterns 오류 해결: 외부 이미지 도메인 허용하기
Next.js Image 오류 해결 방법에서 먼저 확인할 것 Next.js Image 오류 해결 방법는 증상만 보고 바로 고치기보다 실행 환경, 설정, 데이터 형태를 나눠 확인해야 합니다. Next.js Image가 외부 이미지 도메인을 허용하지 않아 렌더링이 막히는 …
더 읽기