2026. 7. 22.
Next.js Unable to acquire lock, 포트를 바꿔도 왜 다시 막힐까?
Next.js 16에서 Unable to acquire lock이 뜨면 포트를 바꾸거나 .next를 통째로 지우기 전에 같은 프로젝트를 실행 중인 프로세스부터 찾고 안전하게 종료해야 한다.
TAG
#debugging
같은 태그로 묶인 기사 아카이브입니다.
2026. 7. 19.
Next.js usePathname hydration mismatch, 경로 표시만 마운트 뒤 갱신하세요
Next.js rewrite나 Proxy 뒤 usePathname을 표시할 때 새로고침에서만 hydration mismatch가 난다면, 서버 경로와 브라우저 경로를 비교하고 경로 표시 부분만 마운트 뒤 갱신하는 순서입니다.
2026. 7. 19.
React 버튼을 누르기 전 Too many re-renders가 뜨는 이유, onClick 실행 시점 구분
React Too many re-renders 오류가 뜰 때 onClick에 함수를 호출했는지와 컴포넌트 본문의 setter를 확인하고, 새로고침과 클릭으로 수정 결과를 검증하는 순서다.
2026. 7. 18.
React onClick 한 번인데 왜 요청은 두 개일까? handler count로 경로 찾기
React 버튼 한 번에 로그나 요청이 두 번 보일 때 handler 횟수와 Network를 먼저 측정하고, 버블링·form submit·native listener·Effect를 분리하는 순서다.
2026. 7. 18.
Next.js 16 custom webpack 오류, 설정을 지우기 전에 번들러를 선택하세요
Next.js 16에서 custom webpack 설정 때문에 빌드가 멈출 때 설정의 소유자와 기능을 확인하고 Turbopack 이전 또는 --webpack 유지 경로를 고르는 순서입니다.
2026. 7. 18.
Invalid hook call이 뜨면 코드를 고칠까, 패키지를 고칠까?
React Invalid hook call 경고를 Hook 호출 규칙, React와 React DOM 버전, 중복 React 경로로 나눠 확인하고 최소 수정 뒤 재검증하는 순서다.
2026. 7. 18.
Rendered fewer hooks than expected, return 아래 Hook을 옮기세요
React 컴포넌트가 조기 반환 때문에 렌더마다 다른 수의 Hook을 호출할 때, return 아래 Hook을 옮기고 lint와 상태 전환으로 확인하는 순서다.
2026. 7. 18.
Next.js hostname을 넣었는데 왜 이미지가 막힐까? remotePatterns 다섯 칸 대조
Next.js 외부 이미지가 hostname 오류로 막힐 때 실제 src와 remotePatterns의 다섯 요소를 맞추고, 필요한 경로만 허용한 뒤 재시작과 이미지 응답까지 확인하는 순서다.
2026. 7. 17.
React uncontrolled input 경고 없이 입력하려면, 첫 value 타입부터 고정하세요
React 입력값이 undefined에서 문자열로 바뀔 때 뜨는 경고를 재현하고, text와 checkbox 초기값을 일관되게 고치는 순서다.
2026. 7. 17.
TypeScript Property does not exist on type never, 빈 배열과 분기부터 구분하세요
TypeScript가 있는 속성을 never라고 판단할 때 빈 컬렉션, 소진된 분기, 제네릭 문맥 누락을 구분하고 최소 타입 수정 뒤 다시 검사하는 순서다.
2026. 7. 17.
React Cannot update a component 경고, 첫 사용자 코드 줄부터 추적하세요
React의 Cannot update a component while rendering a different component 경고에서 원인 setter를 찾고, 이벤트와 Effect 중 맞는 실행 시점으로 옮겨 확인하는 순서다.
2026. 7. 16.
Objects are not valid as a React child 해결: 객체는 필드로, 배열은 map으로
React 자식 자리에 일반 객체가 들어가 생기는 오류를 객체 키로 추적하고, 필드 출력과 배열 map 중 맞는 수정으로 바꾸는 점검 순서다.
2026. 7. 16.
TypeScript Object is possibly 'undefined', 느낌표를 붙여도 될까? 빈 값 동작으로 고르는 해결법
TypeScript의 Object is possibly undefined 오류가 뜰 때 느낌표로 숨기지 않고 guard, optional chaining, 기본값을 고른 뒤 타입 검사와 빈 값 테스트로 확인하는 순서입니다.
2026. 7. 16.
React Maximum update depth exceeded, 반복 렌더링을 끊는 확인 순서
React Maximum update depth exceeded 오류에서 렌더 중 상태 변경과 useEffect 의존성 순환을 구분해 반복 렌더링을 멈추는 점검 순서다.
2026. 7. 16.
Vercel FUNCTION_INVOCATION_TIMEOUT, 로그에서 먼저 볼 것
Vercel 배포 뒤 504 FUNCTION_INVOCATION_TIMEOUT이 뜰 때 런타임 로그와 구간별 시간 측정으로 느린 외부 호출, 응답 누락, 반복문을 구분하는 점검 순서입니다.
2026. 7. 16.
TypeScript 'err' is of type 'unknown', Error로 좁히는 순서
TypeScript catch 안에서 'err is of type unknown' 오류가 뜰 때 instanceof Error와 fallback으로 메시지를 안전하게 꺼내고 타입 검사까지 통과하는 순서입니다.
2026. 7. 16.
Vercel 배포 성공인데 404, 루트·하위 경로별 점검표
Vercel 배포가 성공으로 끝났는데 공개 URL에서 404가 뜰 때 기본 URL, 하위 경로, 프레임워크, Root·Output Directory, rewrite와 도메인을 순서대로 점검하는 방법입니다.
2026. 7. 16.
React useEffect 두 번 실행, setup → cleanup → setup 로그로 구분하세요
React 개발 서버에서 useEffect 로그나 API 요청이 두 번 나타날 때 Strict Mode를 끄기 전에 setup, cleanup, 의존성, 외부 시스템 연결 여부를 순서대로 확인하는 방법입니다.
2026. 7. 16.
React 버튼을 누르면 페이지가 새로고침될 때, type과 submit부터 확인하세요
React 폼 안의 버튼을 눌렀더니 페이지가 다시 로드되고 입력값이 사라진다면, button type과 form submit을 나눠 확인하고 URL·Network·입력 상태로 수정 결과를 검증하는 순서다.
2026. 7. 16.
Next.js middleware가 deprecated라면, proxy.ts로 바꾸기 전 확인할 것
Next.js 16에서 middleware.ts 경고를 만났을 때 Edge Runtime과 처리 목적을 먼저 확인하고, proxy.ts 전환 뒤 빌드와 실제 경로를 검증하는 순서입니다.
2026. 7. 12.
Next.js params Promise 오류, Server와 Client를 가른 뒤 고치는 법
Next.js 동적 라우트에서 params가 Promise라는 빌드 오류가 날 때, Server Component의 await와 Client Component의 use 중 맞는 경로를 고르고 빌드까지 확인하는 순서입니다.
2026. 7. 9.
React key warning이 보이면 전체 재작성 말고 map 안의 id부터 보세요
React 목록에서 key warning이 보이면 화면 전체를 다시 만들기보다 map 안의 반복 JSX와 안정적인 id부터 확인해야 합니다. index key를 써도 되는 조건, Math.random key가 위험한 이유, 삭제와 정렬 테스트까지 초보자 기준으로 정리합니다.
2026. 7. 9.
브라우저 콘솔 오류를 AI에게 붙일 때, 먼저 복사할 4줄
AI가 만든 화면이 브라우저에서 깨질 때는 스크린샷보다 Console 오류, Network 실패 요청, 재현 행동, 기대 결과를 먼저 정리해야 수정 범위가 줄어듭니다.
2026. 7. 8.
Next.js 버튼 오류에서 use client를 붙일 파일만 고르는 순서
Next.js App Router에서 버튼, useState, onClick 오류가 뜰 때 페이지 전체에 use client를 붙이기 전에 서버 파일과 클라이언트 버튼 파일을 나누는 순서를 확인합니다.
2026. 7. 8.
React state 직접 수정이 화면 업데이트를 막는 이유
AI가 만든 React 화면에서 변수나 콘솔 값은 바뀐 것 같은데 UI가 그대로라면 CSS나 새로고침보다 state 직접 수정을 먼저 의심해야 합니다. 객체와 배열을 새 값으로 바꾸는 최소 수정 순서를 정리합니다.
2026. 7. 8.
터미널이 조용해지면 새 명령보다 상태 한 줄부터 적으세요
AI 코딩 중 npm, dev 서버, 생성 명령이 멈춘 것처럼 보이면 바로 강제 종료하지 말고 마지막 로그, 프로세스 상태, 변경 파일을 먼저 남겨야 합니다.
2026. 7. 8.
React 화면이 느려졌다면 memo보다 먼저 렌더 원인부터 좁히세요
AI가 만든 React 목록이나 검색 화면이 느려졌다면 memo를 먼저 붙이기보다 느린 동작 하나를 기록하고, React Profiler와 Chrome Performance로 렌더 원인을 좁힌 뒤 AI에게 최소 수정만 요청하는 편이 안전합니다.
2026. 7. 7.
AI가 고쳤다는데 화면이 그대로일 때, 저장·서버·포트를 확인하는 순서
AI 코딩 도구가 수정 완료라고 했는데 브라우저 화면이 그대로라면 다시 고쳐 달라고 하기 전에 저장, 개발 서버, 포트, 새로고침, 화면 비교를 순서대로 분리합니다.
2026. 7. 7.
Next.js 빌드가 useSearchParams에서 멈출 때 3분 Suspense 수정
Next.js App Router에서 useSearchParams를 넣은 뒤 next build가 Suspense 오류로 멈출 때, 전체 페이지를 다시 만들지 않고 작은 컴포넌트 분리와 Suspense 감싸기로 확인하는 3분 수정 순서입니다.
2026. 7. 2.
Next.js 15 동적 라우트가 멈출 때, params 에러 3분 수정 순서
Next.js 15로 올린 뒤 `params should be awaited`나 Promise 타입 에러가 보이면 동적 라우트 파일에서 `params`를 먼저 await하고 타입을 Promise로 맞추면 됩니다. 전체 페이지를 다시 만들기 전에 3분 안에 확인할 순서를 정리했습니다.
2026. 7. 2.
React 체크박스가 안 눌릴 때, 3분 안에 checked부터 고치는 순서
AI가 만든 React 설정 화면에서 체크박스를 눌러도 체크 표시가 바뀌지 않을 때, 컴포넌트 전체를 다시 만들기 전에 checked, onChange, e.target.checked, preventDefault, label 연결을 3분 안에 확인하는 순서입니다.
2026. 7. 1.
AI가 만든 React 목록이 map 오류로 멈출 때, 3분 복구 5칸
AI가 만든 React 목록 화면에서 Cannot read properties of undefined reading map 오류가 뜰 때, 전체 컴포넌트를 다시 만들기 전에 오류 줄, 데이터 모양, 배열 기본값, 로딩 상태, AI 수정 프롬프트를 3분 안에 확인합니다.
2026. 7. 1.
React key 경고, AI 코딩 초보가 3분 만에 리스트 값 섞임을 막는 5칸
AI가 만든 React 리스트에서 key prop 경고가 뜨거나 삭제 후 입력값이 다른 줄로 이동한다면 전체 재작성보다 map 위치, 고유 id, index 위험, 정렬 테스트를 먼저 확인해야 합니다.
2026. 7. 1.
Next.js 빌드 에러가 .next/types에 뜰 때, 원본 라우트 찾는 법
Next.js 빌드 에러가 .next/types를 가리킬 때 생성 파일을 고치지 않고 next typegen, 오류 종류, app 라우트 순서로 원본을 찾는 방법입니다.
2026. 6. 30.
Next.js window is not defined, 오류 줄에서 실행 위치 찾는 순서
Next.js에서 window is not defined 또는 localStorage is not defined가 뜰 때, 오류 줄부터 client 경계와 실행 시점을 좁혀 최소 수정하는 순서입니다.
2026. 6. 30.
기본 버튼 그대로라면 Tailwind가 CSS를 만들었는지부터 확인하세요
React나 Next.js 화면에서 Tailwind className을 넣었는데 스타일이 안 바뀔 때, CSS import, 파일 감지, 동적 클래스와 충돌을 순서대로 좁히는 초보자용 가이드입니다.
2026. 6. 30.
React useEffect는 왜 계속 실행될까? 상태 업데이트와 의존성을 함께 본다
React useEffect가 계속 실행될 때 상태 업데이트와 의존성 배열을 대조하고, 객체·함수·Strict Mode를 구분해 반복 원인을 좁히는 순서입니다.
2026. 6. 30.
React 개발 서버는 켜졌는데 화면은 하얗다: Console로 원인 찾기
React 개발 서버는 켜졌는데 화면이 하얗게 비는 초보자를 위한 점검표. 브라우저 콘솔, root 마운트, return null, 데이터 접근, import 순서로 원인을 좁히고 AI에게 붙여 넣을 증거를 정리한다.
2026. 6. 30.
React 폼 제출 후 새로고침될 때, 기본 동작을 막는 기준
AI가 만든 React나 Next.js 폼에서 제출 버튼을 누를 때 화면이 새로고침된다면 onSubmit 위치, button type, preventDefault, async 처리, 콘솔과 네트워크를 순서대로 확인해야 합니다.
2026. 6. 30.
GitHub Actions 실패, AI 코딩 초보가 3분 만에 로그 읽는 5단계
GitHub Actions가 빨갛게 실패했을 때 전체 로그를 AI에게 붙여 넣기 전에 job, step, 실행 명령, 첫 에러 줄, 비밀값 경계를 3분 안에 나누는 초보자용 체크리스트입니다.
2026. 6. 30.
React Module not found: Can't resolve 뒤 이름부터 구분하세요
AI가 만든 React 앱에서 Module not found 또는 Can't resolve가 뜨면 전체 코드를 다시 만들기 전에 패키지 이름과 파일 경로를 구분하고, 설치·대소문자·실행 환경 순서로 원인을 좁혀야 합니다.
2026. 6. 28.
Console에 button clicked가 안 뜰 때, React 클릭 신호 추적법
React 버튼을 눌러도 화면이 바뀌지 않을 때, onClick 첫 줄의 Console 로그가 찍히는지로 클릭 차단과 핸들러 이후 문제를 나누는 점검 순서입니다.
2026. 6. 26.
fetch CORS 오류, no-cors 전에 브라우저와 서버를 가르는 확인 순서
AI가 만든 React·Next.js 화면의 fetch가 CORS로 막혔을 때 origin, 실패 요청, 서버 응답 헤더, credentials를 확인해 수정할 경계를 좁히는 순서다.
2026. 6. 26.
AI가 파일을 너무 많이 고칠 때, 초보가 3분 만에 막는 5줄 프롬프트
AI 코딩 도구가 작은 수정을 요청했는데 여러 파일을 바꾸려 할 때는 수정 범위, 금지 항목, 확인 명령을 3분 안에 묶어 재지시해야 합니다.
2026. 6. 19.
TypeScript 빨간 줄이 여러 개라면 첫 오류 하나만 복사하세요
AI가 만든 React·Next.js 코드에 TypeScript 빨간 줄이 여러 개 뜰 때, 첫 오류 문장과 파일 위치를 고정하고 typecheck로 재현해 최소 수정 범위를 잡는 순서입니다.
2026. 6. 19.
Next.js 환경변수 undefined, 배포 전에 이름과 위치를 비교하는 법
AI가 만든 Next.js 앱에서 환경변수가 undefined로 보이면 코드를 다시 맡기기 전에 파일 위치, 변수 이름, NEXT_PUBLIC_ 접두사, 개발 서버 재시작, Vercel 배포 환경을 3분 안에 나눠 확인해야 합니다.
2026. 6. 19.
기본 버튼은 되는데 커스텀 Button만 안 될 때, prop 전달 두 곳
네이티브 button은 되는데 디자인용 커스텀 Button만 반응하지 않을 때, 호출부 prop 이름과 내부 button의 onClick 매핑을 비교해 끊긴 한 줄만 고치는 순서입니다.
2026. 6. 18.
npm ERESOLVE 오류가 뜰 때, Found와 peer 버전부터 읽는 순서
새 패키지를 설치하다 npm ERESOLVE가 뜨면 우회 플래그부터 붙이지 말고 Found의 현재 버전과 peer의 요구 범위를 비교해 충돌 소유자를 가려야 한다.
2026. 6. 17.
AI 수정이 더 망가질 때, 3분 만에 되돌리는 5줄 프롬프트
AI 코딩 도구가 고친 코드를 붙였더니 화면이나 빌드가 더 망가졌다면, 다시 고쳐달라고 하기 전에 diff를 보고 한 파일만 되돌리는 3분 루틴이 필요합니다.
2026. 6. 17.
Next.js Hydration failed: 서버 HTML과 첫 렌더를 원인별로 맞추세요
AI가 만든 Next.js 페이지에서 Hydration failed가 뜰 때 오류 스택에서 문제 컴포넌트를 찾고, 서버 HTML과 브라우저 첫 렌더가 달라지는 값을 원인별로 좁히는 순서입니다.
2026. 6. 17.
AI가 만든 코드가 안 돌아갈 때, 다시 질문할 오류 4칸
AI가 만든 코드가 실행되지 않을 때 실행 명령, 첫 오류, 관련 파일, 실행 환경을 네 칸으로 묶어 최소 수정안을 요청하는 순서다.
2026. 6. 17.
Vercel 배포 실패, 로그에서 멈춘 지점을 찾는 순서
로컬에서는 되는데 Vercel 배포만 실패할 때는 코드를 다시 만들기보다 로그, 빌드 재현, 환경변수, Suspense, 정적 생성 순서로 좁히면 됩니다.