2026. 7. 22.
Next.js Unable to acquire lock, 포트를 바꿔도 왜 다시 막힐까?
Next.js 16에서 Unable to acquire lock이 뜨면 포트를 바꾸거나 .next를 통째로 지우기 전에 같은 프로젝트를 실행 중인 프로세스부터 찾고 안전하게 종료해야 한다.
ARTICLE ARCHIVE
전체 기사
최신 글부터 오래된 글까지 한 번에 훑고, 필요한 카테고리로 빠르게 좁혀 볼 수 있습니다.
최신순 목록
96개 기사를 표시합니다.
2026. 7. 22.
Next.js Cross origin request 경고, allowedDevOrigins 설정법
휴대폰·프록시·다른 로컬 도메인으로 Next.js 개발 서버를 열 때 생기는 경고를 읽고, 신뢰하는 호스트만 허용한 뒤 재시작으로 확인하는 순서입니다.
2026. 7. 19.
Vercel 배포는 됐는데 새로고침만 404라면, SPA rewrite를 확인하세요
React SPA를 Vercel에 배포한 뒤 링크 이동은 되지만 하위 경로 새로고침만 404가 될 때, 앱 종류를 가르고 rewrite를 적용해 검증하는 순서다.
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.
npm ERR! enoent Could not read package.json, 첫 확인은 현재 폴더입니다
npm 명령이 package.json을 읽지 못했다면 캐시나 node_modules를 지우기 전에 현재 폴더, 오류의 path, npm이 찾은 패키지 루트를 먼저 비교해야 한다.
2026. 7. 18.
`No Cache Detected`는 언제 무시해도 될까? Next.js CI는 두 번째 빌드로 판단합니다
Next.js CI의 No Cache Detected가 첫 빌드라 정상인지 반복 누락인지 가르고, .next/cache의 restore와 save를 두 번의 빌드 로그로 검증하는 순서다.
2026. 7. 18.
npm EJSONPARSE는 설치 오류일까 JSON 문법 오류일까?
npm 명령이 EJSONPARSE로 멈췄다면 캐시나 lockfile을 지우기 전에 오류에 찍힌 package.json 경로와 첫 파싱 위치를 확인해야 한다. 최소 수정부터 재실행까지 안전한 순서를 정리했다.
2026. 7. 18.
Next.js 16 빌드가 default.js 누락으로 멈출 때, parallel route 슬롯을 채우는 법
Next.js 16에서 parallel route의 default 파일이 빠져 빌드가 실패할 때 누락 슬롯을 찾고 fallback을 선택한 뒤 build와 새로고침을 검증하는 순서입니다.
2026. 7. 18.
Next.js 폼을 제출해도 화면이 그대로일 때 확인할 순서
Server Action 코드를 다시 쓰기 전에 요청, 반환 상태, 캐시, 이동 중 어디에서 멈췄는지 한 번의 제출로 좁혀보세요.
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.
Next.js cookies().get이 Promise라면 어디에서 읽고 써야 할까?
Next.js cookies().get에서 Promise 타입 오류가 날 때 읽기는 await한 store에서 처리하고, 쓰기는 Server Function이나 Route Handler로 옮겨 검증하는 순서다.
2026. 7. 18.
`npm audit fix --force` 전 확인표: 의존성 경로·dry-run·lockfile diff
npm audit 취약점 경고 뒤 `--force`를 바로 실행하지 않고, 의존성 경로와 변경 범위를 읽어 자동 수정과 수동 업데이트를 고르는 실전 점검 순서다.
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. 17.
TypeScript 7.0으로 바로 올려도 될까? Vue·Svelte와 일반 프로젝트를 가르는 기준
TypeScript 7.0 정식 출시 뒤 내 프로젝트를 바로 올려도 되는지, Vue·Svelte 같은 임베디드 언어와 컴파일러 API 의존을 확인해 전환·병행·대기를 고르는 방법입니다.
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.
Git detached HEAD에서 커밋했다면, 브랜치로 보존하는 순서
Git detached HEAD에서 만든 커밋을 새 브랜치에 연결하고, 이미 이동했다면 reflog로 찾아 보존한 뒤 log와 status로 확인하는 순서입니다.
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.
Client Components cannot be async functions 해결, fetch 위치를 나누는 법
Next.js의 Client Components cannot be async functions 오류에서 use client, 컴포넌트 async, fetch 위치를 확인하고 Server와 Client 역할을 다시 나누는 순서다.
2026. 7. 16.
Vercel 배포 성공인데 404, 루트·하위 경로별 점검표
Vercel 배포가 성공으로 끝났는데 공개 URL에서 404가 뜰 때 기본 URL, 하위 경로, 프레임워크, Root·Output Directory, rewrite와 도메인을 순서대로 점검하는 방법입니다.
2026. 7. 16.
Next.js Server Action이 두 번 실행된다면 pending 동안 제출 버튼을 잠그세요
Next.js Server Action 폼에서 응답 전에 저장 버튼을 다시 누르게 된다면 useActionState 또는 form 안의 useFormStatus로 pending 상태를 읽고 버튼을 잠근 뒤 느린 제출로 검증한다.
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. 12.
Next.js 개발은 되는데 빌드만 실패할 때, 검색 화면만 감싸서 통과하는 법
Next.js App Router에서 개발 화면은 정상인데 빌드가 useSearchParams 오류로 멈출 때, 작은 Client Component와 Suspense 경계로 수정 범위를 줄이고 빌드 출력으로 확인하는 순서다.
2026. 7. 11.
Next.js 환경변수, 공개해도 되는 값과 서버에 남길 값을 가르는 기준
Next.js 화면에서 환경변수가 undefined로 보일 때, 값을 공개하기 전에 클라이언트 여부와 NEXT_PUBLIC_ 접두사, 배포 환경, 재빌드 순서를 점검하는 실전 가이드다.
2026. 7. 10.
AI가 고친 화면이 멀쩡해 보여도, 공유 전에 브라우저에서 확인할 4곳
AI가 고친 화면은 한 번 열리는지만 보면 부족합니다. 바뀐 경로, 입력과 오류 상태, 네트워크 결과, 좁은 화면을 순서대로 확인하고 첫 실패를 AI 수정 요청에 넣는 브라우저 스모크 체크를 정리합니다.
2026. 7. 10.
AI 수정이 원래 작업과 섞일 때, 별도 폴더에서 diff와 test로 확인하는 순서
AI가 고칠 파일이 늘어나면 진행 중 작업과 섞이기 쉽습니다. Git worktree로 별도 브랜치와 폴더를 만들고, AI 수정은 그곳에서 test와 diff로 검증하는 순서를 안내합니다.
2026. 7. 10.
Vercel에 배포했는데 예전 화면이 보일 때, Git 브랜치부터 확인하는 순서
Vercel에서 배포 성공을 봤는데 공개 도메인에는 예전 화면이 남아 있다면 코드를 다시 고치기 전에 Git commit, Deployment, Production 도메인, 깨끗한 브라우저 화면을 순서대로 연결해 보세요.
2026. 7. 9.
React 입력칸에 글자가 안 써질 때, value와 onChange부터 분리하세요
AI가 만든 React 폼에서 입력칸에 글자가 안 써질 때는 컴포넌트를 다시 만들기보다 value, onChange, defaultValue, readOnly 중 어느 선택이 맞는지 먼저 나누면 됩니다.
2026. 7. 9.
React key warning이 보이면 전체 재작성 말고 map 안의 id부터 보세요
React 목록에서 key warning이 보이면 화면 전체를 다시 만들기보다 map 안의 반복 JSX와 안정적인 id부터 확인해야 합니다. index key를 써도 되는 조건, Math.random key가 위험한 이유, 삭제와 정렬 테스트까지 초보자 기준으로 정리합니다.
2026. 7. 9.
Vercel에서 dist 폴더가 없다고 할 때, Output Directory부터 맞추는 순서
Vercel 배포 로그에 No Output Directory named dist가 나오면 폴더를 억지로 만들기보다, 로컬 빌드 결과·Framework Preset·Root Directory·Output Directory가 서로 맞는지 순서대로 확인해야 합니다.
2026. 7. 9.
브라우저 콘솔 오류를 AI에게 붙일 때, 먼저 복사할 4줄
AI가 만든 화면이 브라우저에서 깨질 때는 스크린샷보다 Console 오류, Network 실패 요청, 재현 행동, 기대 결과를 먼저 정리해야 수정 범위가 줄어듭니다.
2026. 7. 9.
비전공자 AI 코딩 첫 프로젝트, 문법보다 결과물 기준을 먼저 정하세요
AI 코딩을 처음 시작할 때는 문법 전체를 외우기보다 오늘 브라우저에서 확인할 작은 결과물을 먼저 정하는 편이 안전합니다. 할 일 목록 예제로 만들 것, 뺄 것, 완성 기준을 나누는 순서를 정리했습니다.
2026. 7. 9.
AI 수정 전에 Git stash로 작업 보관하기
AI에게 코드를 맡기기 전 수정 중인 파일이 많다면 바로 요청하지 말고 git status, stash push, stash list, restore 기준을 먼저 잡아야 합니다. 현재 작업을 잃지 않고 AI 수정만 검토하는 순서입니다.
2026. 7. 8.
Next.js 버튼 오류에서 use client를 붙일 파일만 고르는 순서
Next.js App Router에서 버튼, useState, onClick 오류가 뜰 때 페이지 전체에 use client를 붙이기 전에 서버 파일과 클라이언트 버튼 파일을 나누는 순서를 확인합니다.
2026. 7. 8.
AI 코딩 결과를 merge 가능한 상태로 바꾸는 테스트 증거 루틴
AI 코딩 도구가 완료라고 말해도 테스트나 빌드 출력이 없으면 아직 merge할 상태가 아닙니다. 변경 범위, 검증 명령, 실패 로그, 상태 체크를 5분 순서로 확인합니다.
2026. 7. 8.
AI 코딩 결과를 merge 가능한 상태로 바꾸는 테스트 증거 루틴
AI 코딩 도구가 완료라고 말해도 테스트나 빌드 출력이 없으면 아직 merge할 상태가 아닙니다. 변경 범위, 검증 명령, 실패 로그, 상태 체크를 5분 순서로 확인합니다.