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분 순서로 확인합니다.
2026. 7. 8.
React state 직접 수정이 화면 업데이트를 막는 이유
AI가 만든 React 화면에서 변수나 콘솔 값은 바뀐 것 같은데 UI가 그대로라면 CSS나 새로고침보다 state 직접 수정을 먼저 의심해야 합니다. 객체와 배열을 새 값으로 바꾸는 최소 수정 순서를 정리합니다.
2026. 7. 8.
터미널이 조용해지면 새 명령보다 상태 한 줄부터 적으세요
AI 코딩 중 npm, dev 서버, 생성 명령이 멈춘 것처럼 보이면 바로 강제 종료하지 말고 마지막 로그, 프로세스 상태, 변경 파일을 먼저 남겨야 합니다.
2026. 7. 8.
npm run dev가 missing script로 멈출 때 package.json scripts부터 확인하는 법
npm run dev에서 Missing script: \"dev\"가 나오면 앱 전체가 망가진 것이 아닐 수 있습니다. package.json scripts를 먼저 보고, 존재하는 명령과 추가해야 할 명령을 나누는 순서입니다.
2026. 7. 8.
React 화면이 느려졌다면 memo보다 먼저 렌더 원인부터 좁히세요
AI가 만든 React 목록이나 검색 화면이 느려졌다면 memo를 먼저 붙이기보다 느린 동작 하나를 기록하고, React Profiler와 Chrome Performance로 렌더 원인을 좁힌 뒤 AI에게 최소 수정만 요청하는 편이 안전합니다.
2026. 7. 8.
AI가 만든 React select가 안 바뀔 때, value부터 보는 순서
AI가 만든 React 폼에서 select를 눌러도 값이 안 바뀌면 전체 폼을 다시 만들기보다 value, onChange, option 값, 초기화 코드를 순서대로 좁혀야 한다.
2026. 7. 7.
Git 커밋 전 .env가 보일 때, push 전에 빼는 순서
AI가 만든 프로젝트에서 .env나 API 키가 git status에 보이면 push 전에 staged diff, 인덱스 제거, .gitignore, 키 재발급 경계를 나눠야 합니다.
2026. 7. 7.
package-lock을 지우기 전, npm ci로 오류 원인을 좁히는 순서
npm install 오류가 났을 때 AI가 package-lock.json 삭제와 전체 재설치를 권하면 바로 따르지 말고, git diff와 npm ci로 lockfile이 증거인지 오류 원인인지 먼저 나누는 순서다.
2026. 7. 7.
Git 충돌 표시가 떴을 때, 변경을 잃지 않고 해결하는 순서
AI가 만든 코드를 pull하거나 merge하다가 <<<<<<< HEAD가 보이면 파일을 덮어쓰기 전에 git status, 충돌 구간, 남길 의도, 실행 확인, git add 순서로 정리해야 합니다.
2026. 7. 7.
Accept Current와 Incoming 차이, Git 충돌에서 누르기 전 볼 것
Git merge conflict에서 <<<<<<< 표시가 보이면 AI에게 전체 파일을 맡기기 전 현재 코드, 원격 코드, 공통 목적, 검증 명령을 분리해야 합니다.
2026. 7. 7.
AI가 고쳤다는데 화면이 그대로일 때, 저장·서버·포트를 확인하는 순서
AI 코딩 도구가 수정 완료라고 했는데 브라우저 화면이 그대로라면 다시 고쳐 달라고 하기 전에 저장, 개발 서버, 포트, 새로고침, 화면 비교를 순서대로 분리합니다.
2026. 7. 7.
Vercel Module not found, 재설치 실수 막는 대소문자 3분 점검
로컬에서는 통과하는데 Vercel 배포에서만 Module not found가 뜰 때, npm 재설치 전에 파일명 대소문자와 Git 추적 상태를 3분 안에 확인하는 순서입니다.
2026. 7. 7.
Next.js 빌드가 useSearchParams에서 멈출 때 3분 Suspense 수정
Next.js App Router에서 useSearchParams를 넣은 뒤 next build가 Suspense 오류로 멈출 때, 전체 페이지를 다시 만들지 않고 작은 컴포넌트 분리와 Suspense 감싸기로 확인하는 3분 수정 순서입니다.
2026. 7. 5.
Supabase 저장 버튼이 먹통일 때, RLS를 7분 안에 확인하는 순서
AI가 만든 React나 Next.js 화면에서 Supabase 저장 버튼은 눌리는데 테이블이 비어 있다면 UI를 다시 만들기 전에 error, 로그인 상태, RLS 정책, 반환값을 7분 안에 나눠 봅니다.
2026. 7. 2.
로컬은 통과하는데 Actions만 실패할 때, Node 18/20 차이로 CI 살리기
로컬에서는 npm test가 통과하는데 GitHub Actions에서만 실패하면 코드 전체보다 Node 버전, package.json engines, setup-node 값을 먼저 맞춰야 합니다. 3분 안에 실패 원인을 좁히는 순서입니다.
2026. 7. 2.
Next.js 15 동적 라우트가 멈출 때, params 에러 3분 수정 순서
Next.js 15로 올린 뒤 `params should be awaited`나 Promise 타입 에러가 보이면 동적 라우트 파일에서 `params`를 먼저 await하고 타입을 Promise로 맞추면 됩니다. 전체 페이지를 다시 만들기 전에 3분 안에 확인할 순서를 정리했습니다.
2026. 7. 2.
AI가 고친 코드 PR, 리뷰어가 바로 보는 7줄 설명법
AI가 만든 코드가 로컬에서 돌아가도 PR 설명이 비어 있으면 리뷰가 늦어집니다. GitHub PR 설명 칸에 목적, 바뀐 파일, 테스트, 위험, 리뷰 질문을 7줄로 적는 순서를 정리합니다.
2026. 7. 2.
React 체크박스가 안 눌릴 때, 3분 안에 checked부터 고치는 순서
AI가 만든 React 설정 화면에서 체크박스를 눌러도 체크 표시가 바뀌지 않을 때, 컴포넌트 전체를 다시 만들기 전에 checked, onChange, e.target.checked, preventDefault, label 연결을 3분 안에 확인하는 순서입니다.
2026. 7. 1.
AI가 만든 Next.js 모바일 화면 깨질 때 7분 점검 5단계
AI 코딩 도구가 만든 Next.js나 Tailwind 화면이 데스크톱에서는 정상인데 모바일에서 카드가 밀리고 버튼이 잘릴 때, 전체 재작성 전에 폭, grid, 이미지 비율, 수정 프롬프트를 7분 안에 좁히는 순서입니다.
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 EADDRINUSE, 3000번 포트 주인을 확인하고 다시 여는 순서
Next.js 개발 서버가 `EADDRINUSE`나 `port 3000 already in use`에서 멈추면 코드 전체를 고치기 전에 포트를 점유한 프로세스를 확인하고 종료 또는 대체 포트를 선택하세요.
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.
홈은 되는데 /dashboard만 404, Vercel SPA rewrite부터 확인하세요
AI가 만든 React/Vite 앱을 Vercel에 올린 뒤 홈은 열리는데 /dashboard 같은 하위 주소를 새로고침할 때만 404가 난다면, 라우터 전체를 갈아엎기 전에 SPA rewrites와 React Router preset을 3분 순서로 확인해야 합니다.
2026. 6. 28.
Console에 button clicked가 안 뜰 때, React 클릭 신호 추적법
React 버튼을 눌러도 화면이 바뀌지 않을 때, onClick 첫 줄의 Console 로그가 찍히는지로 클릭 차단과 핸들러 이후 문제를 나누는 점검 순서입니다.
2026. 6. 28.
AI 랜딩페이지 첫 화면, 초보가 3분 만에 잡는 7줄 프롬프트
AI 코딩 도구에 랜딩페이지를 맡겼는데 첫 화면부터 엉뚱해진다면 디자인 설명을 늘리기보다 타깃, 한 화면 범위, 제외할 작업, 확인 기준을 7줄로 먼저 고정해야 합니다.
2026. 6. 28.
Next.js 이미지 안 보임, Network에서 확인할 세 줄
AI 코딩 도구가 만든 Next.js 화면에서 이미지만 깨질 때 public 경로, 파일명 대소문자, next/image 크기, remotePatterns, 배포 후 404를 3분 안에 좁히는 초보자용 체크리스트입니다.
2026. 6. 28.
Next.js API 404와 405, 주소 오류인지 메서드 오류인지 나누는 법
Next.js 화면은 열리지만 API 요청만 404 또는 405로 실패할 때, Network의 URL·method·status와 route.ts를 비교해 첫 수정 지점을 고르는 실전 점검법이다.
2026. 6. 26.
fetch CORS 오류, no-cors 전에 브라우저와 서버를 가르는 확인 순서
AI가 만든 React·Next.js 화면의 fetch가 CORS로 막혔을 때 origin, 실패 요청, 서버 응답 헤더, credentials를 확인해 수정할 경계를 좁히는 순서다.
2026. 6. 26.
React 입력값이 새로고침 후 사라질 때, state와 저장소를 나누는 순서
React나 Next.js 입력값이 새로고침 후 사라진다면 state, 저장 함수, 저장 위치, 불러오기 코드를 순서대로 확인해 누락된 한 단계만 고칠 수 있습니다.