2026. 7. 17.
TypeScript Property does not exist on type never, 빈 배열과 분기부터 구분하세요
TypeScript가 있는 속성을 never라고 판단할 때 빈 컬렉션, 소진된 분기, 제네릭 문맥 누락을 구분하고 최소 타입 수정 뒤 다시 검사하는 순서다.
TAG
#beginner
같은 태그로 묶인 기사 아카이브입니다.
2026. 7. 16.
React Maximum update depth exceeded, 반복 렌더링을 끊는 확인 순서
React Maximum update depth exceeded 오류에서 렌더 중 상태 변경과 useEffect 의존성 순환을 구분해 반복 렌더링을 멈추는 점검 순서다.
2026. 7. 16.
TypeScript 'err' is of type 'unknown', Error로 좁히는 순서
TypeScript catch 안에서 'err is of type unknown' 오류가 뜰 때 instanceof Error와 fallback으로 메시지를 안전하게 꺼내고 타입 검사까지 통과하는 순서입니다.
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.
비전공자 AI 코딩 첫 프로젝트, 문법보다 결과물 기준을 먼저 정하세요
AI 코딩을 처음 시작할 때는 문법 전체를 외우기보다 오늘 브라우저에서 확인할 작은 결과물을 먼저 정하는 편이 안전합니다. 할 일 목록 예제로 만들 것, 뺄 것, 완성 기준을 나누는 순서를 정리했습니다.
2026. 7. 9.
AI 수정 전에 Git stash로 작업 보관하기
AI에게 코드를 맡기기 전 수정 중인 파일이 많다면 바로 요청하지 말고 git status, stash push, stash list, restore 기준을 먼저 잡아야 합니다. 현재 작업을 잃지 않고 AI 수정만 검토하는 순서입니다.
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. 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.
AI 랜딩페이지 첫 화면, 초보가 3분 만에 잡는 7줄 프롬프트
AI 코딩 도구에 랜딩페이지를 맡겼는데 첫 화면부터 엉뚱해진다면 디자인 설명을 늘리기보다 타깃, 한 화면 범위, 제외할 작업, 확인 기준을 7줄로 먼저 고정해야 합니다.
2026. 6. 28.
Next.js 이미지 안 보임, Network에서 확인할 세 줄
AI 코딩 도구가 만든 Next.js 화면에서 이미지만 깨질 때 public 경로, 파일명 대소문자, next/image 크기, remotePatterns, 배포 후 404를 3분 안에 좁히는 초보자용 체크리스트입니다.
2026. 6. 26.
React 입력값이 새로고침 후 사라질 때, state와 저장소를 나누는 순서
React나 Next.js 입력값이 새로고침 후 사라진다면 state, 저장 함수, 저장 위치, 불러오기 코드를 순서대로 확인해 누락된 한 단계만 고칠 수 있습니다.
2026. 6. 26.
AI가 파일을 너무 많이 고칠 때, 초보가 3분 만에 막는 5줄 프롬프트
AI 코딩 도구가 작은 수정을 요청했는데 여러 파일을 바꾸려 할 때는 수정 범위, 금지 항목, 확인 명령을 3분 안에 묶어 재지시해야 합니다.
2026. 6. 19.
TypeScript 빨간 줄이 여러 개라면 첫 오류 하나만 복사하세요
AI가 만든 React·Next.js 코드에 TypeScript 빨간 줄이 여러 개 뜰 때, 첫 오류 문장과 파일 위치를 고정하고 typecheck로 재현해 최소 수정 범위를 잡는 순서입니다.
2026. 6. 19.
Git push 거절, force 전에 내 브랜치 차이를 확인하는 법
git push rejected나 non-fast-forward 오류가 처음 뜨면 force push부터 치지 말고 원격 변경, 내 수정, 브랜치, 충돌 가능성, AI에게 줄 정보를 3분 안에 확인해야 합니다.
2026. 6. 19.
Next.js 환경변수 undefined, 배포 전에 이름과 위치를 비교하는 법
AI가 만든 Next.js 앱에서 환경변수가 undefined로 보이면 코드를 다시 맡기기 전에 파일 위치, 변수 이름, NEXT_PUBLIC_ 접두사, 개발 서버 재시작, Vercel 배포 환경을 3분 안에 나눠 확인해야 합니다.
2026. 6. 18.
npm ERESOLVE 오류가 뜰 때, Found와 peer 버전부터 읽는 순서
새 패키지를 설치하다 npm ERESOLVE가 뜨면 우회 플래그부터 붙이지 말고 Found의 현재 버전과 peer의 요구 범위를 비교해 충돌 소유자를 가려야 한다.
2026. 6. 18.
AI 코드 저장 전, 바뀐 파일과 위험 변경을 먼저 보는 기준
AI 코딩 도구가 만든 코드가 실행되는 것처럼 보여도 바로 저장하지 말고, 변경 파일과 diff, 요구사항 일치 여부를 3분 안에 확인해야 합니다.
2026. 6. 17.
AI 수정이 더 망가질 때, 3분 만에 되돌리는 5줄 프롬프트
AI 코딩 도구가 고친 코드를 붙였더니 화면이나 빌드가 더 망가졌다면, 다시 고쳐달라고 하기 전에 diff를 보고 한 파일만 되돌리는 3분 루틴이 필요합니다.
2026. 6. 17.
AI가 만든 코드가 안 돌아갈 때, 다시 질문할 오류 4칸
AI가 만든 코드가 실행되지 않을 때 실행 명령, 첫 오류, 관련 파일, 실행 환경을 네 칸으로 묶어 최소 수정안을 요청하는 순서다.