수학쌤이 바이브코딩으로 실제 프로젝트를 만들며 마주친 에러와 오류, 그리고 그걸 해결한 과정을 오답노트처럼 기록합니다. 틀린 이유와 고친 방법을 원문 그대로 남겨, 같은 곳에서 막힌 분들이 시행착오를 줄일 수 있게 합니다.
블로그 글을 마크다운으로 쓰다 보면 이런 일을 겪습니다. 분명히 별표 두 개로 감싸서 굵게를 만들었는데, 발행하고 보니 글에 별표가 그대로 ** 이렇게 노출돼 있어요. 굵게는 안 먹고요. 마크다운(Markdown): 글에 서식을 주는 간단한 문법. **단어**처럼 별표 두 개로 감싸면 굵게가 됩니다. 더 당황스러운 건, 어떤 줄에서만 이런다는 겁니다. 같은 방식으로 썼는데 대부분은 멀쩡하고 특정 줄만 깨져요. … 더 읽기
블로그 글이 너무 짧지 않은지 확인하려고, 글자수를 세는 작은 스크립트를 하나 만들었습니다. 별거 아니죠. 글을 넣으면 몇 글자인지 세어주기만 하면 되니까요. 그런데 결과가 이상했습니다. 눈으로 보면 2천 자쯤 되는 글인데, 스크립트는 6천 자라고 했어요. 딱 3배. 처음엔 “내가 글을 이렇게 많이 썼나?” 싶었는데, 다른 글도 전부 3배로 나오는 걸 보고 알았습니다. 글이 문제가 아니라 세는 … 더 읽기
습관 기록 앱(습관의 힘)을 만들다가, 사용자 데이터를 구글 드라이브에 백업하고 복원하는 기능을 붙였습니다. 평소엔 잘 됩니다. 그런데 이런 기능은 평소가 아니라 ‘어쩌다 한 번’에 죽어요. 백업 파일을 고르다 취소하거나, 시스템이 예상과 다른 값을 돌려주는 그 순간에요. 앱이 죽으면 사용자는 이유를 모릅니다. 그냥 “이 앱 자꾸 꺼지네” 하고 지워버리죠. 그래서 이번엔 잘 되게 만드는 것보다 안 … 더 읽기
블로그에 글을 하나 자동으로 발행하는 스크립트를 만들었습니다. 초안을 넣으면 이미지 올리고, 카테고리 붙이고, 비공개 글로 만들어주는 것까지요. 첫 글이 잘 올라갔고, 관리자 화면에서 확인한 뒤 공개 버튼을 눌렀습니다. 여기까지는 완벽했어요. 그런데 공개하자마자 — 사이트 전체가 죽었습니다. “심각한 오류가 발생했습니다” 새로고침을 하니 글은커녕 사이트 홈조차 안 뜨고 이 문구만 나왔습니다. 이 사이트에 심각한 오류가 발생했습니다. 심장이 … 더 읽기
제 코드에 AI 리뷰봇을 붙여뒀습니다. 코드를 올리면 알아서 읽고 “여기 문제 있어요” 하고 코멘트를 달아주는 도구예요. 코드 리뷰: 코드를 합치기 전에 다른 사람이 읽고 문제를 짚어주는 절차. 그 일을 사람 대신 AI가 해주는 게 리뷰봇입니다. 저처럼 혼자 개발하면 봐줄 사람이 없으니 특히 반갑죠. 처음엔 무조건 고마웠습니다. 혼자 하는 작업이라 잘못을 짚어줄 사람이 없는데, 봇이 대신 … 더 읽기
바이브코딩 하다 보면, 분명 시킨 대로 했는데 AI가 “어 그거 못 찾겠는데요?” 할 때가 있어요. 저는 오늘 이거 때문에 30분을 날렸는데, 알고 보니 범인이 완전 엉뚱한 데 있었습니다. 같은 함정에 빠지지 마시라고 공유해요. 무슨 일이 있었냐면 스크립트 파일 한 곳을 고치려고 AI에게 “이 부분을 이렇게 바꿔줘”라고 했어요. 평소처럼 잘 될 줄 알았죠. 그런데 빨간 글씨로 … 더 읽기
프론트엔드를 Vercel 프리뷰에 올렸습니다. 화면은 멀쩡히 떴는데, 데이터가 안 옵니다. 콘솔을 열어보니 빨간 CORS 에러. “로컬에선 잘 됐는데?” 싶은, 웹 개발자라면 다 겪는 그 벽입니다. 원인은 프리뷰 배포 URL이 매번 바뀐다는 데 있었습니다. 결론부터: 도메인을 하나하나 나열하지 말고 정규식 한 줄로 푸는 게 답이었어요. CORS: 브라우저 보안 규칙. A 도메인의 웹페이지가 B 도메인의 API를 부를 … 더 읽기
주식 분석 앱에 “분석가 캐릭터” 3명을 넣고 싶었습니다. 직접 그릴 재주는 없으니 AI 이미지 생성에 맡겼는데, 첫 결과물이 영 별로였어요. 제 표현 그대로 “단조롭고 캐릭터의 특징을 잘 살리지 못했다“. 셋을 나란히 놓으면 옷차림만 다르고 표정도 자세도 거의 같았습니다. 캐릭터를 셋이나 만든 이유가 “서로 다른 관점을 가진 분석가”를 보여주려던 건데, 정작 그림에선 구분이 안 됐던 거죠. … 더 읽기
주식 분석 앱을 만들다 보니, 분석 결과를 그리는 컴포넌트 하나가 1270줄까지 불어났습니다. 지금은 잘 돌아갑니다. 근데 바로 그게 함정이에요. 나중에 디자인 한 번 바꾸려다 여기저기 얽힌 코드가 우수수 터지는 그림이 보였거든요. 이런 파일은 어느 날 갑자기 생기지 않습니다. 카드 하나 추가할 때마다 “이번 한 번만 여기에 붙이자”가 쌓인 결과예요. 매번의 결정은 다 합리적이었는데 결과물만 감당이 … 더 읽기
주식 분석 앱을 만들다가 Vercel에 배포했는데, 빌드 로그가 노란 경고로 도배됐습니다. npm warn deprecated가 줄줄이. 학생 시험지에 빨간 줄이 쫙 그어진 걸 볼 때랑 비슷한 심정이었어요. “이거 다 틀린 건가?” 싶은. 당황스러웠던 건 제가 뭘 잘못한 기억이 없다는 점이었습니다. 방금 만든 앱이고 코드도 몇백 줄뿐인데 경고가 왜 이렇게 많나. 그래서 하나씩 검색하기 시작했는데, 30분을 태우고 … 더 읽기