『혼자 공부하는 바이브 코딩 with 클로드 코드』- 4주차 미션

https://www.inflearn.com/challenge/6-week-course-self-s/dashboard?cid=342648

[지금 무료][6주 과정] 『혼자 공부하는 바이브 코딩 with 클로드 코드』 완독 챌린지 2기 챌린지 |

---

 

https://github.com/taehojo/vibecoding/blob/master/PROMPTS.md#04%EC%9E%A5-%ED%81%B4%EB%A1%9C%EB%93%9C-%EC%BD%94%EB%93%9C-%EC%8B%A4%EC%A0%84-%ED%99%9C%EC%9A%A9

vibecoding/PROMPTS.md at master · taehojo/vibecoding

 

 

필수 미션

 

이 깃허브 링크 타고 들어가면 실습 예제 및 프롬프트 확인하고 바로 복사할 수 있습니다!

 

<PRD 작성 요청>

 

 

<단계별 프롬프트 생성>

 

1단계~ 5단계 Claude Code 단계별 프롬프트 생성완료

todo-app-prd.md

0.01MB

 

단계별 프롬프트는 내가 중간중간 수정해서 나만의 할 일 관리 앱으로 만들어 보았다

 

STEP 1 — 프로젝트 뼈대 & 데이터 레이어

 

위 md파일에서 변경한 내용만 추가하자면

powershell에서 프롬프트 복사해서 그대로 실행

 

 

STEP 2 — 기본 UI 마크업 & 정적 스타일

 

 

 

 

STEP 3 — 핵심 상호작용 연결

 

3단계까지 거쳤을 때

 

내가 추가한 기능은 바로 아이젠하워 매트릭스

긴급도 중요도에 따라 할 일을 4가지 우선순위로 분류할 수 있다.

 

STEP 4 — 인라인 수정 기능

 

 

 

STEP 5 — 마무리 & 검증

 

 

 

---

 

powershell에서 다음과 같이 입력하면 이전 기록부터 재개

이것도 가능!

context 압축 명령어

나는 이렇게 뜨네 ㅋㅋ

/compact도 3단계의 레벨이 있는데

level1- 불필요한 공백과 중복 제거

level2-변수명 단축, 구조 단순화

level3- 핵심 로직만 유지, 최대 압축

 

 

생성된 web_version이라는 폴더 내의 todo.html을 다시 열면

 

web 버전 파일에 있는 관리 앱이 데스크톱에 과연 최적화되어있는지?

엄청나게 많은 Yes+Enter의 노동 끝에.,,, 수정 완료!

script.js 완성

 

추가적으로, 프로젝트 관리 명령어 정리를 하자면

/config: 설정 확인 및 변경

/doctor: 시스템 환경 진단

/export: 대화 내용 내보내기

 

 

 

벌써 절반이 다 지나갔다!

남은 미션도 화이팅~!