Workshop 02 일정 미정
내 앱을 고치고 기록하기 — Fix & Track
기능 하나를 Codex로 추가하고, Git·GitHub로 기록하고, 실수를 되돌려 봐요.
- 일정
- 일정 안내 예정
- 장소
- 장소 미정
- 시간
- 60분 예정
- 대상
- 전공 무관 · Workshop 1 안 들어도 OK
Workshop 1에 오지 않았어도 참여할 수 있어요. ‘시작 전 확인’만 미리 끝내 오세요.
준비물
- 노트북과 충전기
- ChatGPT(Codex) 계정, GitHub 계정
- VS Code · Git · Node.js 20 이상
- 원본 저장소를 Fork → Clone해서 실행해 오기
시작 전 확인
- node · npm · git --version이 모두 나온다 (Node 20 이상)
- git remote -v의 origin이 내 Fork다
- npm run dev 후 localhost:5173/workshop2/starter/ 에 카드 3개가 보인다
- git config user.name · user.email이 설정되어 있다
단계별 미션
단계를 눌러 펼쳐요. 요청문은 복사해서 Codex에 붙여 넣으세요.
1완성본 먼저 눌러보기
위 ‘완성본 예제’에서 카드 두 개를 선택한 뒤 하나만 해제하고, 새로고침해 봅니다.
예상 결과카드마다 따로 선택·해제되고, 새로고침하면 모두 초기화돼요. 이번 실습의 즐겨찾기는 저장되지 않는 게 정상이에요.
- 두 카드를 선택하면 둘 다 선택 상태다.
- 하나를 해제해도 다른 하나는 그대로다.
2Codex에게 즐겨찾기 추가 요청하기
내 Fork를 연 VS Code에서 Codex에 아래 요청문을 붙여 넣습니다. 수정은 starter 폴더에서만 진행하고, complete는 비교용으로만 봅니다.
workshop2/starter/의 모임 카드에 즐겨찾기 버튼을 추가해줘.
클릭하면 선택되고, 다시 누르면 해제해줘.
카드별로 독립적으로 동작하게 해줘.
새로고침하면 초기화해. DB와 localStorage는 쓰지 마.
기존 모임 정보와 레이아웃은 유지해줘.
수정할 파일과 확인 방법을 알려줘.예상 결과Codex가 workshop2/starter의 파일을 수정하고, 바뀐 파일과 확인 방법을 알려줘요.
- 카드 A 선택 → 선택 표시가 보인다.
- 카드 B 선택 → A와 B 모두 선택 상태다.
- 카드 A 다시 클릭 → A만 해제되고 B는 유지된다.
- 새로고침 → 둘 다 초기화된다.
- 카드 제목·시간·장소가 그대로이고 브라우저 오류가 없다.
막혔을 때
- 화면이 바뀌지 않으면 http://localhost:5173/workshop2/starter/ (내 로컬 화면)를 보고 있는지 확인하세요.
3변경을 기록하고 GitHub에 올리기
VS Code Source Control에서 바뀐 파일을 열어 비교하고, 이번 기능의 파일만 Stage해서 Commit한 뒤 Push합니다. 터미널을 쓴다면 git status로 실제 파일명을 먼저 확인하세요.
git status
git add workshop2/starter/app.js
git commit -m "Add favorites to meetup cards"
git push예상 결과내 GitHub Fork의 같은 브랜치에서 방금 쓴 commit 메시지와 바뀐 파일이 보여요.
- HTML/CSS도 바꿨다면 그 파일도 함께 추가했다.
- 원본 운영진 저장소가 아니라 내 Fork에 올렸다.
막혔을 때
- Push 인증이 실패하면 로그인 계정, origin 주소, 브랜치를 확인하세요. 강제 Push는 하지 않습니다.
- 인터넷이 안 되면 로컬 commit과 화면까지 남기고, 온라인 확인은 Studio Session에서 마무리하세요.
45분 복구 연습 — 실수를 되돌리기
저장소 루트에서 연습용 저장소를 만들고, 일부러 망가뜨린 마지막 commit을 되돌립니다. 이 연습은 원본 GitHub에 올라가지 않는 별도 폴더에서만 진행해요.
node scripts/prepare-recovery.mjs
cd workshop2/recovery-practice
git status
git log --oneline -2
git revert --no-edit HEAD
git log --oneline -3예상 결과http://localhost:5173/workshop2/recovery-practice/ 에서 눌리지 않던 즐겨찾기 버튼이 새로고침 후 다시 작동해요. 과거 commit 두 개는 남고 Revert commit이 하나 추가돼요.
- 되돌리기 전 최신 commit 메시지가 practice: accidentally disable favorites 였다.
- git log에 새 Revert commit이 보인다.
막혔을 때
- 충돌이 나면 멈추고 도움을 요청하세요. git reset --hard나 강제 Push로 해결하지 않습니다.
- 이미 연습 폴더가 있으면 준비 스크립트가 덮어쓰지 않고 멈춰요. 다시 하려면 새 Clone에서 준비하세요.
+내 프로젝트에 같은 흐름 적용하기
Workshop 1에서 만든 내 프로젝트가 있다면, 작은 기능 하나를 같은 순서로 추가해 보세요: 요청 → 바뀐 파일 확인 → 직접 눌러 검증 → commit → push.
내 프로젝트에 [작은 기능 하나]를 추가하고 싶어.
먼저 README를 읽고 어떤 파일을 바꿔야 하는지 알려줘.
기존 화면과 기능은 유지하고, 이 기능에 필요한 부분만 수정해줘.
수정한 뒤 내가 직접 눌러서 확인할 순서를 알려줘.?막혔을 때
무엇을 했고 무엇이 보이는지 Codex에 그대로 설명하세요. 비밀번호·API 키는 가려 주세요.
자료
- 완성본 예제 설치 없이 바로 열려요
- 시작본 예제
- 실습 소스 (GitHub) (새 창) Fork · Clone해서 수정해요
- 참가자 준비 안내 (새 창)
- 5분 복구 연습 (새 창)
- 발표 슬라이드 (새 창) 발표 자료