From 2ea88cfdf4880a3a3f739702635198f03781e45c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EC=9C=A0=EC=84=AD?= Date: Sun, 19 Jul 2026 11:28:26 +0900 Subject: [PATCH 1/5] Add random quote generator page and starter CLAUDE.md --- CLAUDE.md | 13 ++++++++ index.html | 97 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 110 insertions(+) create mode 100644 CLAUDE.md create mode 100644 index.html diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..47e75cc --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,13 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## Status + +This repository is currently empty. There is no code, build configuration, or documentation yet. + +## Next steps + +Once the project has real content, update this file with: +- Build, lint, and test commands (including how to run a single test) +- High-level architecture notes that would take reading multiple files to piece together diff --git a/index.html b/index.html new file mode 100644 index 0000000..3051fb6 --- /dev/null +++ b/index.html @@ -0,0 +1,97 @@ + + + + + +랜덤 명언 + + + + +
+
버튼을 눌러 명언을 확인하세요.
+
+ +
+ + + + + From 23d217ce1d20eb2464b1b3eb181ca3bbc2547eca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EC=9C=A0=EC=84=AD?= Date: Sun, 19 Jul 2026 12:53:57 +0900 Subject: [PATCH 2/5] Add seop0372 week01 checklist and reflections --- members/seop0372/week01.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 members/seop0372/week01.md diff --git a/members/seop0372/week01.md b/members/seop0372/week01.md new file mode 100644 index 0000000..107c413 --- /dev/null +++ b/members/seop0372/week01.md @@ -0,0 +1,18 @@ +# Week 01 + +## 체크리스트 + +- [x] Claude Code 설치 & 로그인 +- [x] VS Code 연동 +- [x] CLAUDE.md 생성 +- [x] 첫 대화 & 첫 수정 + - 버튼을 누르면 랜덤 명언이 나오는 웹페이지(HTML/CSS/JS 한 파일) 제작 + - 버튼 색을 보라색으로 수정 +- [x] git 커밋 위임 + - 변경 사항을 Claude Code에게 git commit 하도록 요청 및 완료 + +## 신기했던 것 +코드를 한 줄도 안 쓰고 명언 생성기를 만들 수 있다는 게 신기했어요. + +## 이상했던 것 +git config는 Claude가 직접 안 바꾸고 저한테 실행하라고 한 게 의외였어요. From 2c6e66fcb6b7da5121f0530d748f285e839a7077 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EC=9C=A0=EC=84=AD?= Date: Sun, 19 Jul 2026 19:08:40 +0900 Subject: [PATCH 3/5] =?UTF-8?q?week01:=20=EB=A6=AC=EB=B7=B0=20=EB=B0=98?= =?UTF-8?q?=EC=98=81=20-=20=EA=B0=9C=EC=9D=B8=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=EC=9D=84=20members/seop0372=EB=A1=9C=20=EC=9D=B4=EB=8F=99,=20?= =?UTF-8?q?=EB=AC=B8=EC=84=9C=20=EC=9D=BD=EA=B8=B0=20=EC=B2=B4=ED=81=AC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 루트에 있던 index.html을 members/seop0372/로 이동 - 개인 CLAUDE.md는 루트 규칙 파일 자리와 겹쳐 삭제 - Quickstart/CLI 문서 읽기 체크리스트 항목 추가 --- CLAUDE.md | 13 ------------- index.html => members/seop0372/index.html | 0 members/seop0372/week01.md | 6 ++++++ 3 files changed, 6 insertions(+), 13 deletions(-) delete mode 100644 CLAUDE.md rename index.html => members/seop0372/index.html (100%) diff --git a/CLAUDE.md b/CLAUDE.md deleted file mode 100644 index 47e75cc..0000000 --- a/CLAUDE.md +++ /dev/null @@ -1,13 +0,0 @@ -# CLAUDE.md - -This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. - -## Status - -This repository is currently empty. There is no code, build configuration, or documentation yet. - -## Next steps - -Once the project has real content, update this file with: -- Build, lint, and test commands (including how to run a single test) -- High-level architecture notes that would take reading multiple files to piece together diff --git a/index.html b/members/seop0372/index.html similarity index 100% rename from index.html rename to members/seop0372/index.html diff --git a/members/seop0372/week01.md b/members/seop0372/week01.md index 107c413..20c5c72 100644 --- a/members/seop0372/week01.md +++ b/members/seop0372/week01.md @@ -5,6 +5,7 @@ - [x] Claude Code 설치 & 로그인 - [x] VS Code 연동 - [x] CLAUDE.md 생성 +- [x] 공식 문서 읽기 (Quickstart, CLI 기본) - [x] 첫 대화 & 첫 수정 - 버튼을 누르면 랜덤 명언이 나오는 웹페이지(HTML/CSS/JS 한 파일) 제작 - 버튼 색을 보라색으로 수정 @@ -16,3 +17,8 @@ ## 이상했던 것 git config는 Claude가 직접 안 바꾸고 저한테 실행하라고 한 게 의외였어요. + +## 직접 써본 프로젝트 +랜덤 명언 생성기(members/seop0372/index.html)를 만들었고, 버튼을 누르면 랜덤 명언이 화면에 표시됩니다. + +커밋 링크: https://github.com/seop0372/2026-claude-code-101/commit/2ea88cf From a8ebbcba98bece832bfacf43be80a9bd8315b1d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EC=9C=A0=EC=84=AD?= Date: Sun, 19 Jul 2026 21:11:35 +0900 Subject: [PATCH 4/5] =?UTF-8?q?chore:=20/commit=20=EC=8A=AC=EB=9E=98?= =?UTF-8?q?=EC=8B=9C=20=EC=BB=A4=EB=A7=A8=EB=93=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 왜: 변경 사항을 Conventional Commits 형식으로 일관되게 커밋하기 위해, git status/diff를 자동으로 읽어 커밋 메시지를 생성해주는 커스텀 슬래시 커맨드가 필요했음. --- .claude/commands/commit.md | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 .claude/commands/commit.md diff --git a/.claude/commands/commit.md b/.claude/commands/commit.md new file mode 100644 index 0000000..7e5345f --- /dev/null +++ b/.claude/commands/commit.md @@ -0,0 +1,10 @@ +--- +description: 변경사항을 컨벤션에 맞게 커밋 +allowed-tools: Bash(git:*) +--- +현재 상태: !`git status` +변경 내용: !`git diff --staged` + +위 변경을 Conventional Commits 형식 +(feat/fix/docs...)으로 커밋해줘. +제목은 한 줄, 본문에 "왜"를 적어줘. From 6fdd4a558c2ac6573bd17c77991a9fd1ee7549e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EC=9C=A0=EC=84=AD?= Date: Fri, 24 Jul 2026 16:58:59 +0900 Subject: [PATCH 5/5] =?UTF-8?q?2=EC=A3=BC=EC=B0=A8=20=EA=B3=BC=EC=A0=9C=20?= =?UTF-8?q?=EC=A0=9C=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- members/seop0372/idea.md | 45 +++++++++++++++++++ members/seop0372/week02.md | 92 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 137 insertions(+) create mode 100644 members/seop0372/idea.md create mode 100644 members/seop0372/week02.md diff --git a/members/seop0372/idea.md b/members/seop0372/idea.md new file mode 100644 index 0000000..35e8e4d --- /dev/null +++ b/members/seop0372/idea.md @@ -0,0 +1,45 @@ +# 프로젝트 기획서 — SixUp (가안) + +## 1. 한 줄 정의 +뭘 시작해야 할지 모르는 사람을 위한, 관심사만 입력하면 6주 완성 취미 커리큘럼을 짜주는 웹서비스 + +## 2. 문제 +"취미 갖고 싶은데 뭐부터 해야 할지 모르겠다"는 사람이 많다. 유튜브 등 정보는 많지만 흩어져 있고, 내 수준·시간에 맞게 정리가 안 돼서 결국 시작도 못 하고 흐지부지된다. + +## 3. 해결책 +관심 분야·주당 가능 시간·예산을 입력하면, AI가 주차별 목표·할 일·추천 자료(영상/글)를 담은 6주 커리큘럼을 자동으로 생성한다. 매주 체크인하며 진도를 추적한다. + +## 4. 왜 지금 +AI를 활용하면 예전엔 학원·코치가 해주던 "전문가 수준의 맞춤 커리큘럼 설계"를 누구나 몇 초 만에 받을 수 있게 되었다. + +## 5. 사용자 +새 취미를 시작하고 싶지만 계획 세우기가 막막한 20~30대. 특히 다양한 취미를 시도해보고 싶은데 매번 흐지부지되는 사람들. + +## 6. 대안·경쟁 +- 유튜브 검색: 정보는 있지만 개인 맞춤이 없음 +- 클래스101 / 탈잉: 유료 강의, 커리큘럼이 고정되어 있고 비용 부담 +- ChatGPT에 직접 물어보기: 가능하지만 진도 관리·추적 기능이 없음 + +**차별점**: 진도 관리 + 리마인드 + 개인 상황(시간·예산) 맞춤화 + +## 7. 제품 +1. 관심사·시간·예산 입력 +2. 6주 커리큘럼 자동 생성 +3. 주차별 체크리스트 및 진도 기록 + +**MVP 범위**: 1, 2번 + +## 8. 지속 방법 +무료로 커리큘럼 1개 생성 가능. 여러 개 동시 진행하거나 심화 커리큘럼을 원하면 유료 전환. 완주율을 높이는 리마인드 알림도 프리미엄 기능으로 제공. + +## 9. 나(팀) +평소 다양한 취미를 시도해보고 싶은 니즈가 있어서, "뭘 시작해야 할지 몰라 결국 안 하게 되는" 이 문제를 직접 겪고 있음. 사용자 입장에서 진짜 필요한 서비스를 만들 수 있음. + +## 10. 6주 계획 +- 3주차: 입력 폼 + 커리큘럼 생성 로직 구현 +- 4주차: 결과 페이지 디자인 + 저장 기능 +- 5주차: 체크리스트 / 진도 추적 기능 붙이기 +- 6주차: 다듬기 + 배포 + 발표 준비 + +--- +*작성자: seop0372 · 2주차 과제 (트랙 B)* diff --git a/members/seop0372/week02.md b/members/seop0372/week02.md new file mode 100644 index 0000000..ffb02bc --- /dev/null +++ b/members/seop0372/week02.md @@ -0,0 +1,92 @@ +# 2주차 실습 기록 (트랙 A) + +## 실습 프로젝트 +연습용 할 일 목록(Todo) 웹앱 (`todo-practice`) — HTML/CSS/JS로 구성된 미니 프로젝트 + +## 1. 워크플로우 1바퀴 — 버그 수정 (필수) + +### 문제 상황 +할 일 목록에서 항목을 3개 추가한 뒤 중간 항목을 삭제하면, 클릭한 항목이 아니라 엉뚱한 항목이 지워지는 버그 발견. + +재현 방법: "6주간 근육량 2키로 늘리기", "주 3회 운동하기", "단백질 챙겨먹기" 순서로 추가한 뒤 "주 3회 운동하기" 옆 ✕ 버튼 클릭. + +### 진행 과정 (탐색 → 계획 → 구현 → 검증 → 커밋) + +1. **탐색/원인 분석**: Claude에게 바로 고치지 말고 원인부터 분석해달라고 요청. + - Claude가 `deleteTodo(id)` 함수에서 `id`(예: `1753234567890` 같은 타임스탬프 값)를 배열 인덱스처럼 `todos.splice(id, 1)`에 그대로 넘기고 있다는 걸 찾아냄. + - `splice`는 인덱스가 배열 길이보다 크면 자동으로 배열 끝으로 clamp되기 때문에, 어떤 항목을 클릭하든 항상 배열 끝 근처 항목이 삭제되는 구조였음. + +2. **계획**: Claude가 두 가지 해결책 제시 — `findIndex`로 실제 인덱스를 찾아 삭제하는 방법 vs `filter`로 새 배열을 만드는 방법. `findIndex` 방식으로 진행하기로 결정. + +3. **구현**: `todos.findIndex((t) => t.id === id)`로 실제 인덱스를 찾은 뒤 `splice(index, 1)`을 호출하도록 수정. Claude가 diff로 변경 내용을 보여줌 (2줄 추가, 3줄 삭제). + +4. **검증**: 브라우저에서 `index.html`을 열어 직접 재현 시나리오대로 테스트. "주 3회 운동하기"만 정확히 삭제되고 나머지 두 항목은 정상적으로 남아있는 것을 확인. + +5. **커밋**: Claude에게 커밋을 위임. 이 폴더가 아직 git 저장소가 아니어서 Claude가 먼저 확인 후 `git init` 진행. `.claude/settings.local.json`(로컬 설정 파일)은 자동으로 `.gitignore`에 추가해서 커밋에서 제외하고, 나머지 파일(`README.md`, `index.html`, `script.js`, `style.css`)만 첫 커밋으로 기록 (`e99f8b2`). + +### 느낀 점 / 배운 것 +- "바로 고치지 말고 원인부터 분석해달라"고 요청하니, 무작정 코드를 고치는 게 아니라 왜 문제가 생겼는지 먼저 설명해줘서 이해하고 넘어갈 수 있었음. +- id 값과 배열 인덱스를 혼동하는 실수는 실제로도 자주 할 수 있는 실수라는 걸 체감함. +- git 저장소가 아닌 폴더에서 커밋을 시켰을 때, Claude가 임의로 진행하지 않고 먼저 물어봐준 점이 인상 깊었음. 또한 로컬 설정 파일을 알아서 커밋에서 제외해준 것도 유용했음. +- (참고) PR은 별도 깃허브 원격 저장소 연결이 필요해 이번 연습에서는 로컬 커밋까지만 진행함. + +## 2. CLAUDE.md 직접 손보기 + +`/init`으로 CLAUDE.md를 생성. Claude가 프로젝트를 스스로 훑어보고 아래 내용을 자동으로 정리해줌. + +- **Project overview**: 이 프로젝트가 무엇인지 (빌드 없는 vanilla JS/HTML/CSS todo 앱, 학습용 연습 프로젝트) +- **Commands**: 별도 빌드/테스트 명령이 없다는 점을 명시해서, 불필요하게 package.json이나 테스트 도구를 추가하지 않도록 안내 +- **Architecture**: 각 파일(`index.html`/`script.js`/`style.css`)의 역할과 데이터 구조(`todos` 배열, `render()` 패턴) 설명 +- **Known gotcha**: 앞서 고쳤던 "id를 배열 인덱스로 착각하면 안 된다"는 버그 원인을 아예 CLAUDE.md에 기록해서, 다음에 같은 실수를 반복하지 않도록 함 + +### 느낀 점 +- CLAUDE.md가 단순히 "설명 문서"가 아니라, 방금 고친 버그의 교훈까지 기록해서 재발을 막아주는 역할도 할 수 있다는 걸 알게 됨. +- CLAUDE.md와 관련 없는 변경(count 기능 구현)은 별도 커밋으로 분리해서 진행됨 — "논리 단위로 나눠서 커밋"하는 습관을 자연스럽게 체감함. + +## 3. 커맨드 + 훅 조합 만들기 + +README에 있던 예시를 참고해서 Claude에게 직접 만들어달라고 요청. + +### 만든 것 +1. **`/commit` 슬래시 커맨드** (`.claude/commands/commit.md`) + - `!git status`, `!git diff --staged` 문법으로 실행 시점에 현재 git 상태를 자동으로 읽어와 프롬프트에 삽입 + - Conventional Commits 형식(`feat:`/`fix:`/`docs:` 등)으로 커밋 메시지를 항상 일관되게 작성하도록 함 +2. **저장 알림 Hook** (`.claude/settings.json`, `PostToolUse` 이벤트) + - Claude가 파일을 쓰거나 수정(`Write`/`Edit`)할 때마다 "파일 저장됨: 경로" 메시지를 자동으로 띄움 + - 이 프로젝트엔 별도 포맷터가 없어서, README 예시대로 알림으로 대체 구현 + +### 진행 중 겪은 문제 +- 원래 `.gitignore`가 `.claude/` 폴더 전체를 무시하고 있어서, 커밋돼야 할 `settings.json`과 `commands/commit.md`까지 막혀 있었음. 개인 설정 파일(`settings.local.json`)만 제외하도록 `.gitignore`를 수정해서 해결. +- 커맨드/훅 파일이 세션 도중에 새로 생기면, **그 세션은 새로 생긴 설정을 인식하지 못해** `/commit` 입력 시 "Unknown command" 에러가 남. Claude Code 세션을 완전히 종료했다가 재시작하니 정상적으로 인식됨. + +### 검증 +- 파일 수정 요청 → "파일 저장됨: ..." 메시지가 실제로 뜨는 것을 확인 (Hook 작동) +- `git add .` → `/commit` 직접 입력 → `docs: README에 테스트 문구 추가` 형태로 커밋 메시지가 자동 생성되며 정상 커밋됨 (`110f6af`) (커맨드 작동) + +### 느낀 점 +- 세션이 설정 변경을 실시간 반영하지 못한다는 걸 직접 겪으면서, "안 될 때는 일단 재시작해보기"라는 기본적인 트러블슈팅 감각을 익힘. +- 커맨드 하나 만들어두니 커밋 메시지 컨벤션을 매번 설명할 필요가 없어져서, 실제로 왜 이런 기능을 쓰는지 체감됨. + +## 4. MCP 서버 연결 (도전 과제) + +Playwright MCP(브라우저 자동화)를 연결해서, Claude가 실제 브라우저를 조작하게 해봄. + +### 진행 과정 +1. `claude mcp add playwright npx @playwright/mcp@latest`로 서버 등록 +2. `claude mcp list`로 `playwright`가 정상 연결됐는지 확인 (`claude.ai Google Drive`, `playwright` 두 서버 모두 연결됨) +3. Claude에게 "playwright로 index.html 열어서 테스트해봐"라고 요청 + +### 결과 +Claude가 실제 브라우저를 열어서 다음을 자동으로 수행하고 결과를 확인함: +- 항목 추가 → "전체 1개 중 0개 완료" 정상 표시 +- 두 번째 항목 추가 → "전체 2개 중 0개 완료" 정상 표시 +- 첫 항목 클릭(완료 토글) → "전체 2개 중 1개 완료"로 정상 갱신 +- 완료된 항목 삭제 → 남은 항목이 정확히 유지됨 (이전에 고쳤던 id 기반 삭제 로직이 제대로 작동하는지도 함께 재검증됨) +- 콘솔 에러 없음 + +### 느낀 점 +- MCP를 연결하니 Claude가 코드만 읽고 쓰는 게 아니라, 실제로 브라우저를 열어 클릭·타이핑하며 눈으로 확인하는 것까지 할 수 있게 됨. "손발이 늘어난다"는 표현이 실감남. +- 로컬 환경(브라우저 바이너리 버전 등) 문제가 있었지만 Claude가 스스로 스크래치패드에 임시 환경을 만들어 우회 해결함 — 프로젝트 본체(CLAUDE.md 방침대로 tooling 미도입 유지)는 건드리지 않고 검증만 한 점이 인상적이었음. + +--- +*작성자: seop0372 · 2주차 과제 (트랙 A)*