혼자 공부하는 바이브코딩 4주차

🚶기본 미션(필수)

PROJECT 5. 할 일 관리 앱 만들고 캡처하기

저는 일단 gemini에게 물어보면서 진행하였고 claude와 동일하게 /init로 시작
생성된 gemini.md파일에 프롬프트를 모두 넣어두고 구현 시작이라는 명령어만을 입력하였습니다.

# Role
당신은 10년 차 시니어 프론트엔드 개발자입니다. 복잡한 라이브러리 없이 순수 자바스크립트(Vanilla JS)만으로 효율적이고 유지보수하기 좋은 코드를 작성하는 것이 특기입니다.

# Task
아래 [요구사항]을 완벽하게 충족하는 "개인용 할 일 관리(To-Do) 웹 애플리케이션"을 개발해야 합니다. 
결과물은 HTML, CSS, JavaScript가 모두 포함된 **단 하나의 `index.html` 파일**로 제공해주세요.

# Requirements (요구사항)

## 1. 기능 (Functional)
- **CRUD:** 할 일을 추가, 수정, 삭제할 수 있어야 합니다.
- **완료 체크:** 체크박스를 통해 완료 여부를 토글할 수 있으며, 완료 시 텍스트에 취소선이 그어져야 합니다.
- **카테고리 분류:** 할 일 추가 시 [업무, 개인, 공부] 중 하나를 선택해야 하며, 리스트에서 카테고리가 뱃지(Badge) 형태로 시각적으로 구분되어야 합니다.
- **진행률 표시:** 전체 할 일 대비 완료된 항목의 비율을 상단에 프로그레스 바(Bar)와 퍼센트(%) 텍스트로 실시간 표시해야 합니다.
- **데이터 영속성:** 브라우저의 `localStorage`를 사용하여, 새로고침하거나 브라우저를 껐다 켜도 데이터가 그대로 유지되어야 합니다.

## 2. 기술 (Technical)
- **Single File:** 별도의 .css나 .js 파일 없이 `index.html` 파일 하나에 `<style>`과 `<script>` 태그를 사용하여 모두 포함시키세요.
- **No Libraries:** React, jQuery, Bootstrap 등 외부 라이브러리는 절대 사용하지 마세요. (순수 Vanilla JS & CSS)
- **Modern JS:** ES6+ 문법(const/let, arrow function, template literal, destructuring 등)을 적극 활용하세요.
- **DOM 조작:** 코드가 길어지더라도 가독성을 위해 함수(기능) 단위로 명확하게 분리하세요. (예: `renderTodos()`, `saveTodos()`, `addTodo()`)

## 3. 디자인 (UI/UX)
- 모던하고 깔끔한 카드 스타일의 UI를 적용하세요.
- 모바일과 데스크톱 모두에서 깨지지 않는 반응형으로 만드세요.
- 카테고리별로 서로 다른 파스텔 톤 배경색을 지정하여 구분하기 쉽게 만드세요.

# Output Format
- 서론이나 불필요한 설명은 최소화하고, 바로 복사해서 사용할 수 있는 **완성된 코드 블록**을 출력하세요.

🏃추가 미션(선택)

PROJECT 7. 상식 퀴즈 게임 앱 만들고 캡처하기

AI를 활용해 개발할 때 주의해야 할 점 리스트 정리하기

Gemini에게 물어본 답변입니다.

1. 할루시네이션(Hallucination): "그럴싸한 거짓말"
AI는 존재하지 않는 라이브러리 함수를 만들어내거나, 문법적으로 틀린 코드를 아주 자신 있게 제안할 때가 있습니다.

이유: LLM(대형 언어 모델)은 진실을 말하는 것이 아니라, 문맥상 가장 확률이 높은 다음 단어를 예측하는 방식이기 때문입니다.

대응: 생성된 함수가 공식 문서에 실제로 존재하는지, 혹은 문법이 최신 표준(ES6+ 등)에 맞는지 반드시 검증해야 합니다.

2. 보안 취약점 및 정보 유출 (Security)
AI는 학습된 데이터(인터넷상의 수많은 코드)를 기반으로 답변합니다. 이 중에는 보안이 허술한 코드도 포함되어 있습니다.

이유:

입력 시: API Key, 비밀번호, 회사 내부 기밀 데이터 등을 프롬프트에 입력하면 해당 정보가 AI 학습에 재사용될 위험이 있습니다.

출력 시: AI가 SQL Injection이나 XSS(크로스 사이트 스크립팅) 공격에 취약한 코드를 짜줄 수 있습니다.

대응: 민감 정보는 절대 프롬프트에 넣지 말고(예: API_KEY="변수로처리"), 생성된 코드가 사용자 입력을 그대로 실행(eval 등)하지 않는지 확인해야 합니다.

3. '복사-붙여넣기'의 함정 (Black Box)
코드를 이해하지 못하고 그대로 복사해서 쓰면, 나중에 문제가 생겼을 때 수정이 불가능해집니다.

이유: AI가 작성한 코드는 겉보기엔 완벽해 보여도, 특정 엣지 케이스(예외 상황)에서 에러를 낼 수 있습니다. 본인이 짠 로직이 아니면 디버깅에 몇 배의 시간이 걸립니다.

대응: 코드를 받으면 바로 실행하기보다 **"이 줄은 왜 이렇게 짰어?"**라고 역으로 질문하거나, 주석을 달아달라고 요청해 로직을 완벽히 이해한 후 사용하세요.

4. 레거시(구형) 코드 제안
AI 모델은 학습 시점(Cut-off date)이 정해져 있어, 최신 기술 트렌드를 반영하지 못할 수 있습니다.

이유: 예를 들어, React의 최신 버전이 나왔는데도 3년 전 방식(Class component 등)으로 코드를 짜줄 수 있습니다. 데이터 갱신 주기의 한계 때문입니다.

대응: 프롬프트에 "최신 ES2024 문법을 사용해줘" 혹은 **"React 18 버전을 기준으로 해줘"**라고 명시적인 제약을 걸어야 합니다.

5. 문맥(Context)의 한계
프로젝트 규모가 커질수록 AI는 전체 그림을 보지 못하고 부분만 봅니다.

이유: AI는 한 번에 기억할 수 있는 대화량(Context Window)에 한계가 있습니다. 파일이 수십 개로 늘어나면, A파일을 수정할 때 B파일에 미칠 영향을 계산하지 못할 수 있습니다.

대응: 이번에 작성하신 gemini.md나 PRD처럼 전체 맥락을 요약해서 주기적으로 상기시켜주거나, 코드를 모듈화하여 작은 단위로 질문하는 것이 좋습니다.