AI랑 같이하는 코딩

목차1. 콘솔 에러가 어려운 진짜 이유2. 에러 메시지에서 꼭 볼 5가지3. 초보자용 읽기 순서4. 에러 해석 실력을 빠르게 키우는 방법5. 자주 묻는 질문1. 콘솔 에러가 어려운 진짜 이유개발을 시작하면 가장 먼저 막히는 벽이 콘솔 에러입니다. 영어 문장처럼 길게 뜨고 파일 경로, 줄 번호, 스택 트레이스가 함께 나오니 어디부터 봐야 할지 막막하죠. 그런데 에러 메시지는 "겁주는 텍스트"가 아니라, 문제 위치를 알려주는 지도에 가깝습니다. 읽는 순서만 알면 난이도가 크게 내려갑니다.많은 분이 에러를 보면 바로 코드를 여기저기 바꾸기 시작합니다. 하지만 이 방식은 시간만 오래 걸리고 원인도 놓치기 쉽습니다. 반대로 메시지의 핵심 요소를 순서대로 읽으면 수정 범위를 빠르게 좁힐 수 있습니다. 핵심은 에러 ..

목차1. 템플릿이 필요한 이유2. 바이브코딩용 핵심 템플릿 5가지3. 템플릿별 활용 시나리오4. 내 작업 흐름에 맞게 커스터마이징하는 법5. 자주 묻는 질문1. 템플릿이 필요한 이유바이브코딩의 장점은 빠른 실행이지만, 단점은 결과 편차가 크다는 점입니다. 같은 기능을 요청해도 어떤 날은 잘 나오고 어떤 날은 엉뚱하게 나오는 이유는 프롬프트가 매번 달라지기 때문입니다. 즉, 실력 문제가 아니라 입력의 일관성 문제입니다. 이때 가장 효과적인 해결책이 프롬프트 템플릿입니다.템플릿은 창의성을 제한하는 도구가 아니라, 반복 실수를 줄이는 안전장치입니다. 목표, 제약, 출력 형식을 고정해 두면 AI가 추측할 영역이 줄어들고 결과가 안정됩니다. 특히 입문자일수록 “무엇을 써야 할지 모르는 공백”이 큰데, 템플릿은 ա..

목차1. 왜 AI 코드가 바로 안 돌아갈까2. 수정 요청 전에 준비할 정보3. 효과적인 재요청 문장 템플릿4. 디버깅 속도를 높이는 협업 습관5. 자주 묻는 질문1. 왜 AI 코드가 바로 안 돌아갈까AI가 제공한 코드는 "일반적인 환경"을 기준으로 생성되는 경우가 많습니다. 그런데 실제 프로젝트는 파일 구조, 라이브러리 버전, 데이터 형식, 빌드 환경이 다르기 때문에 그대로 붙여넣으면 동작하지 않을 수 있습니다. 이건 이상한 일이 아니라 자연스러운 현상입니다.중요한 건 "코드가 틀렸다"고 단정하기보다, 현재 환경과 맞지 않는 지점을 빠르게 찾아 다시 요청하는 것입니다. 요청 품질이 올라가면 답변 정확도도 크게 올라갑니다. 즉, AI 활용의 핵심은 한 번에 정답을 받는 것이 아니라 증상과 맥락을 정확히 전..

목차1. 기능 추가가 기존 코드를 깨뜨리는 이유2. 안전한 기능 추가 요청의 핵심 원칙3. 복붙해서 쓰는 실전 요청 템플릿4. 적용 후 회귀 버그를 막는 점검법5. 자주 묻는 질문1. 기능 추가가 기존 코드를 깨뜨리는 이유AI에게 새 기능을 요청할 때 가장 흔한 문제는 “원하던 기능은 들어갔는데 기존 기능이 망가졌다”는 상황입니다. 이런 회귀 버그는 보통 AI가 나빠서 생기는 게 아니라, 요청 범위가 넓고 제약이 없어서 생깁니다. “검색 기능 추가해줘”처럼 목표만 주면 AI는 구현 편의를 위해 기존 구조를 크게 바꾸기도 합니다. 그 결과 기존 이벤트 흐름이나 상태 관리 규칙이 무너질 수 있습니다.특히 프론트엔드에서는 작은 변경이 연쇄 영향을 만들기 쉽습니다. 필터 하나를 추가했는데 렌더링 조건이 바뀌고,..

20일차에서는 지금까지 만든 웹앱을 전체 점검하고, 다음 확장 방향을 정리합니다. 기능을 하나씩 쌓아온 흐름을 돌아보며 무엇이 완성됐고 무엇을 개선할지를 명확히 하는 마무리 단계입니다.이번 회차의 핵심은 새로운 기능 추가보다 회고와 우선순위 설정입니다. 완성본을 점검하고 다음 프로젝트로 자연스럽게 이어질 수 있는 기준을 만드는 데 집중합니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 이전 단계 돌아보기1. 오늘 만들 기능 소개오늘 목표는 20일 동안 구현한 기능을 체크리스트로 검토하는 것입니다. 할 일, 메모, 기분 기록, 타이머, 습관 체크, 진행률, 다크모드, 검색/필터, 반응형, 배포까지 핵..

목차1. 보이는데 클릭이 안 되는 현상 이해2. 가장 흔한 원인 체크리스트3. 빠르게 해결하는 점검 순서4. 클릭 이슈 재발 방지 팁5. 자주 묻는 질문1. 보이는데 클릭이 안 되는 현상 이해버튼이나 링크가 화면에 분명히 보이는데 클릭이 안 되면, 많은 분이 JavaScript 이벤트 문제부터 의심합니다. 물론 이벤트 바인딩 문제일 수도 있지만, 실제로는 CSS 레이어 충돌이나 disabled 상태처럼 UI 구조 문제인 경우가 매우 흔합니다. 즉 "보인다"와 "클릭 가능하다"는 완전히 다른 조건입니다.클릭 가능하려면 요소 위를 다른 레이어가 막고 있지 않아야 하고, 포인터 이벤트가 허용되어야 하며, 요소가 비활성 상태가 아니어야 합니다. 그래서 이 문제는 레이아웃, 속성 상태, 이벤트 연결을 동시에 확인..

목차1. 왜 그대로 붙이면 문제가 생길까2. 프로젝트 맞춤 요청의 핵심 정보3. 실전 변환 프롬프트 작성법4. 안정적으로 반영하는 적용 순서5. 자주 묻는 질문1. 왜 그대로 붙이면 문제가 생길까AI가 만들어준 코드는 출발점으로 훌륭하지만, 내 프로젝트에 바로 붙이면 충돌이 생기기 쉽습니다. 이유는 간단합니다. AI가 생성한 코드는 보통 일반적인 구조를 기준으로 하고, 실제 프로젝트는 팀 규칙, 폴더 구조, 상태 관리 방식, 공통 컴포넌트 정책이 이미 정해져 있기 때문입니다. 겉보기에는 동작해도 장기적으로 유지보수 비용이 커질 수 있습니다.예를 들어 동일한 기능이라도 우리 팀은 `fetch` 대신 전역 API 클라이언트를 쓰고, 에러 처리는 공통 핸들러를 거쳐야 할 수 있습니다. 그런데 이런 규칙을 전달..

19일차에서는 완성한 웹앱을 GitHub Pages로 배포합니다. 이제 로컬에서만 보던 프로젝트를 링크로 공유할 수 있게 되며, "만드는 단계"에서 "보여주는 단계"로 전환되는 중요한 시점입니다.초보자에게 배포는 어렵게 느껴질 수 있지만, 저장소 생성 → 파일 업로드 → Pages 설정 순서만 지키면 안정적으로 완료할 수 있습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 GitHub 저장소를 만들고 웹앱 파일을 업로드한 뒤, GitHub Pages를 활성화해 실제 접속 가능한 배포 URL을 얻는 것입니다. 이 링크를 통해 다른 사람도 내 ..

목차1. 입력값이 비어 보이는 대표 상황2. 먼저 확인할 핵심 체크리스트3. 단계별 디버깅 순서4. 입력 처리 안정화 습관5. 자주 묻는 질문1. 입력값이 비어 보이는 대표 상황폼 기능을 만들 때 "분명 입력했는데 값이 안 들어온다"는 문제는 정말 자주 발생합니다. 콘솔로 찍으면 빈 문자열이 나오거나, 이전 값이 남아 있거나, 아예 undefined가 나오는 식입니다. 이때 대부분은 입력창 자체 문제가 아니라 이벤트 시점이나 요소 선택 방식에서 실수가 생긴 경우가 많습니다.핵심은 어떤 요소에서, 어떤 시점에, 어떤 속성으로 값을 읽는지를 명확히 분리해 보는 것입니다. 입력창 값을 다룰 때는 value, textContent, innerText를 혼동하기 쉽고, submit 이벤트 기본 동작 때문에 값 확..

목차1. 왜 결과가 마음에 들지 않을까2. 디자인 프롬프트 수정의 핵심 원칙3. 실패한 요청을 개선하는 실전 예시4. 반복 수정 시간을 줄이는 체크리스트5. 자주 묻는 질문1. 왜 결과가 마음에 들지 않을까AI에게 디자인을 요청했는데 결과가 밋밋하거나 의도와 다르게 나오는 이유는 대개 비슷합니다. “깔끔하게 만들어줘”, “예쁘게 바꿔줘”처럼 추상적인 표현만 있고, 구체적인 기준이 없기 때문입니다. AI는 이런 요청을 받으면 평균적인 안전한 결과를 선택하는 경향이 있습니다. 즉, 실패의 원인은 모델 성능 부족이 아니라 요구 조건의 모호함인 경우가 많습니다.특히 웹 디자인에서는 레이아웃, 타이포그래피, 컬러, 컴포넌트 밀도, 여백 리듬 같은 요소가 동시에 작동합니다. 그런데 요청에서 이 축들을 분리하지 않으..