어제 만든 앱,
오늘 더 쓸모 있게.

2일차 · 같은 앱을 개선하는 실습

전날 만든 같은 과제 체크 앱에 수정·검색을 추가하고 기능별 커밋 2개, PR 검토·병합, Pages 재배포로 연결한다.

개선 앱 ↗ · 시작·중간·완성 ZIP · 실제 강사 PR ↗ (온라인 안내) · 1일차 실습 (온라인 안내)

Codex는 현재 소스 파일을 직접 읽고 수정한다. 파일 저장, commit, push, PR, merge, Pages 배포는 서로 다른 단계다. Git에는 소스 이력이 기록되고 브라우저에 입력한 과제 목록이 자동 저장되는 것은 아니다.

이번 일차의 관련 내용과 선택 심화

이 날의 생성도구·Git·구축 절차·프로젝트 사례를 각 교시에서 연결한다. 핵심은 아래에서 읽고 긴 원문은 선택 심화 링크로 연다.

D2-1 · Codex로 기존 앱 읽고 수정하기

이 교시 전체 교재 · 발표로 이동

D2-2 · 과제 검색과 기존 기능 검증

이 교시 전체 교재 · 발표로 이동

D2-3 · Git·GitHub PR과 Pages 재배포

이 교시 전체 교재 · 발표로 이동

D2-4 · Docker와 로컬 Supabase

이 교시 전체 교재 · 발표로 이동

Codex 예제 요청 3종

요청 1→검사→커밋 1, 요청 2→검사→커밋 2 순서다. 계정 이용 조건은 수업 전에 확인하며 이 앱 안에서는 AI API를 호출하지 않는다.

현재 폴더의 과제 체크 앱을 읽고 현재 경로, Git 브랜치와 status, index.html의 역할, localStorage 키와 데이터 구조를 먼저 요약해줘. 이어 각 과제에 수정 버튼을 추가하고 기존 입력 폼에서 제목·과목·마감일을 수정·저장·취소할 수 있게 최소 변경해줘. 같은 id 항목만 변경하고 done·createdAt·과제 개수와 기존 저장 데이터는 유지해줘. 취소는 저장하지 않고 수정 버튼으로 초점을 돌려줘. 빈값·공백·길이·날짜 검증, textContent, 입력 label과 네이티브 버튼을 유지해줘. 수정 중인 항목을 삭제할 때 폼도 정리해줘. 변경 파일과 diff, 실제 검증 결과를 설명해줘. 서버·DB·외부 패키지·API는 추가하지 마. 아직 commit·push·PR·merge는 실행하지 마.

현재 수정 기능과 기존 추가·완료·삭제/되돌리기·저장·날짜 집계를 보존하고 제목·과목 부분 검색을 추가해줘. 앞뒤 공백을 제거하고 대소문자를 무시하며 전체/미완료/완료 필터와 함께 적용해줘. 검색어가 비면 기존 필터 목록, 결과가 없으면 안내, 검색 지우기 버튼과 현재 표시 개수를 제공해줘. 검색은 과제를 삭제하거나 전체 집계·저장 데이터를 바꾸지 않는 화면 조건이야. label이 연결된 네이티브 search 입력을 쓰고 검색 조건은 저장하지 마. 추가·수정 저장 뒤 검색과 완료 필터를 초기화해 결과를 보여줘. 모바일 가로 넘침과 키보드 조작을 확인해줘. 변경 파일·diff·검증 결과를 보여주되 commit·push·PR·merge는 아직 하지 마.

현재 과제 체크 앱의 diff를 검토하고 실제 실행한 검사와 미확인을 구분해줘. 전날 데이터가 유지되는지, 완료한 과제를 수정해도 id·done·createdAt·개수가 같은지, 취소 전후 저장 데이터가 같은지, 공백 수정 거절, 제목/과목 검색·대소문자·빈 결과·완료 필터 조합·검색 지우기, 수정 중 삭제/되돌리기, 추가·완료·새로고침·날짜 집계·저장 실패 안내를 확인해줘. 390px 화면과 키보드 초점도 확인해줘. 문제는 재현 절차와 최소 수정으로 보고해줘. 마지막으로 기능별 커밋 메시지와 PR 제목·본문 초안을 제안해줘. 현재 경로·브랜치·remote와 대상 파일을 다시 확인해주고 사용자 데이터·비밀값을 출력하지 마. 원격 push·PR 생성·merge·배포는 내가 해당 단계에서 실행할게.

B01 · 전날 앱과 오늘의 성공 기준 확인

본인의 1일차 Pages 앱에서 가상 과제 2개를 만들고 하나를 완료한다. 현재 공개 URL과 수정 전 화면을 기록한다. 오늘은 수정·검색을 추가하고 커밋 2개와 PR로 변경 이유를 남긴다.

학생 확인

Git·GitHub 계정·Codex 로그인과 파일 편집 가능 여부를 확인한다. Codex 이용 가능 범위와 사용량은 계정마다 다를 수 있다. 이 실습 앱에는 AI API 키가 필요 없다.

B02 · 내 저장소 clone → 같은 폴더를 Codex에서 열기

YOUR_ID를 본인 GitHub 아이디로 바꾸고 아래 명령을 한 줄씩 실행한다. 이미 clone했다면 해당 폴더에서 status·remote만 확인한다. Codex 프로젝트에 그 폴더를 연결하고 index.html과 .git이 있는 저장소를 기본 작업 폴더로 선택한다. Codex에 현재 실행 환경을 확인시켜 로컬 미리보기를 연다.

한 줄씩 읽고 실행

git clone https://github.com/YOUR_ID/assignment-check.git
cd assignment-check
git status -sb
git remote -v
git branch --show-current

학생 확인

git remote -v가 본인 저장소인지 확인한다. 다운로드 ZIP에는 Git 이력이 없으므로 commit·push 실습은 clone한 폴더에서 한다. 편집기와 터미널이 같은 폴더여야 한다.

B03 · 깨끗한 main → 기능 브랜치 만들기

status에 미커밋 변경이 없고 기본 브랜치가 main인 것을 확인한 뒤 아래 명령을 실행한다. 기본 브랜치가 다르면 실제 이름으로 바꾼다. feature/edit-tasks가 이미 있으면 기존 작업을 확인하고 새 이름을 정한다.

한 줄씩 읽고 실행

git switch main
git pull --ff-only origin main
git switch -c feature/edit-tasks
git status -sb

학생 확인

브랜치 이름이 feature/edit-tasks로 바뀌고 작업 파일은 그대로 보인다. 변경이 있거나 ff-only가 실패하면 중단하고 강사와 원인을 확인한다. reset --hard나 강제 push로 해결하지 않는다.

B04 · Codex로 과제 수정 구현 → 첫 커밋

아래 수정 요청을 Codex에 입력한다. 수정 버튼→기존 값 불러오기→변경 저장→취소를 직접 실행한다. 완료한 과제를 수정해도 완료 상태와 개수가 같은지 확인한다. 통과한 뒤 diff를 읽고 index.html만 stage·commit한다.

한 줄씩 읽고 실행

git diff -- index.html
git add index.html
git diff --cached
git commit -m "Add assignment editing"

현재 폴더의 과제 체크 앱을 읽고 현재 경로, Git 브랜치와 status, index.html의 역할, localStorage 키와 데이터 구조를 먼저 요약해줘. 이어 각 과제에 수정 버튼을 추가하고 기존 입력 폼에서 제목·과목·마감일을 수정·저장·취소할 수 있게 최소 변경해줘. 같은 id 항목만 변경하고 done·createdAt·과제 개수와 기존 저장 데이터는 유지해줘. 취소는 저장하지 않고 수정 버튼으로 초점을 돌려줘. 빈값·공백·길이·날짜 검증, textContent, 입력 label과 네이티브 버튼을 유지해줘. 수정 중인 항목을 삭제할 때 폼도 정리해줘. 변경 파일과 diff, 실제 검증 결과를 설명해줘. 서버·DB·외부 패키지·API는 추가하지 마. 아직 commit·push·PR·merge는 실행하지 마.

학생 확인

제목·과목·마감일만 바뀌고 원래 과제는 1개다. 취소하면 원래 목록이 유지된다. git diff --cached에 의도한 파일만 있다. 커밋 메시지는 Add assignment editing이다.

B05 · 제목·과목 검색 구현 → 두 번째 커밋

검색 요청을 Codex에 입력한다. 제목 일부와 과목을 각각 검색하고 영어 대소문자와 공백, 결과 없음, 완료 필터를 함께 시험한다. 검색 지우기 뒤 정상 목록이 돌아오는지 확인한 뒤 두 번째 commit을 만든다.

한 줄씩 읽고 실행

git diff -- index.html
git add index.html
git diff --cached
git commit -m "Add title and subject search"
git log --oneline -3

현재 수정 기능과 기존 추가·완료·삭제/되돌리기·저장·날짜 집계를 보존하고 제목·과목 부분 검색을 추가해줘. 앞뒤 공백을 제거하고 대소문자를 무시하며 전체/미완료/완료 필터와 함께 적용해줘. 검색어가 비면 기존 필터 목록, 결과가 없으면 안내, 검색 지우기 버튼과 현재 표시 개수를 제공해줘. 검색은 과제를 삭제하거나 전체 집계·저장 데이터를 바꾸지 않는 화면 조건이야. label이 연결된 네이티브 search 입력을 쓰고 검색 조건은 저장하지 마. 추가·수정 저장 뒤 검색과 완료 필터를 초기화해 결과를 보여줘. 모바일 가로 넘침과 키보드 조작을 확인해줘. 변경 파일·diff·검증 결과를 보여주되 commit·push·PR·merge는 아직 하지 마.

학생 확인

검색은 보이는 목록만 바꾸고 데이터와 전체 현황 숫자는 유지한다. git log에 수정 기능과 검색 기능이 서로 다른 커밋으로 보인다.

B06 · 회귀 검사와 변경 파일 검토

검증 요청과 아래 체크표로 확인한다. 새로고침 뒤 수정 내용과 완료 상태를 확인한다. 같은 제목을 새로 추가한 것이 아닌지, 취소가 저장하지 않는지 검사한다. 수정 중 삭제와 되돌리기, 빈 검색, 휴대폰 화면도 확인한다.

한 줄씩 읽고 실행

git status -sb
git diff main...HEAD -- index.html
git log --oneline --decorate -4

현재 과제 체크 앱의 diff를 검토하고 실제 실행한 검사와 미확인을 구분해줘. 전날 데이터가 유지되는지, 완료한 과제를 수정해도 id·done·createdAt·개수가 같은지, 취소 전후 저장 데이터가 같은지, 공백 수정 거절, 제목/과목 검색·대소문자·빈 결과·완료 필터 조합·검색 지우기, 수정 중 삭제/되돌리기, 추가·완료·새로고침·날짜 집계·저장 실패 안내를 확인해줘. 390px 화면과 키보드 초점도 확인해줘. 문제는 재현 절차와 최소 수정으로 보고해줘. 마지막으로 기능별 커밋 메시지와 PR 제목·본문 초안을 제안해줘. 현재 경로·브랜치·remote와 대상 파일을 다시 확인해주고 사용자 데이터·비밀값을 출력하지 마. 원격 push·PR 생성·merge·배포는 내가 해당 단계에서 실행할게.

학생 확인

통과/실패/미확인과 실제 결과를 기록한다. 검사 데이터는 가상 과제만 쓴다. 저장 값 확인은 수업용 가상 데이터에 한해 개발자 도구 Application→Local Storage에서 id·done·createdAt을 비교한다.

B07 · push → 내 저장소의 Pull Request 만들기

대상 remote와 브랜치를 확인한 뒤 push한다. 본인 GitHub 저장소의 Pull requests→New pull request에서 base:main, compare:feature/edit-tasks를 선택한다. 제목과 아래 PR 본문 예시를 채우고 Files changed에서 변경을 읽은 뒤 PR을 만든다.

한 줄씩 읽고 실행

git push -u origin feature/edit-tasks

학생 확인

커밋 2개가 PR에 보이고 본인 저장소의 main을 대상으로 한다. push만으로 main이 바뀌거나 Pages에 기능이 공개된 것은 아니다. 강사 예제 저장소에 학생 PR을 만들지 않는다.

B08 · 짝 검토 → 병합 → Pages 재배포 확인

짝이 PR의 변경과 검사 결과를 읽고 개선점을 한 가지 적는다. 본인 PR을 Merge pull request로 병합한다. Settings→Pages/Actions에서 배포 완료와 사용한 커밋을 확인하고 본인 github.io 주소에서 수정·검색·새로고침을 다시 검사한다. 로컬 main을 아래 명령으로 갱신한다.

한 줄씩 읽고 실행

git switch main
git pull --ff-only origin main
git log --oneline -3

학생 확인

기록: PR URL, 두 기능 커밋, main 병합 커밋, Pages 배포 커밋, 공개 앱 URL, 확인자와 실제 결과. 배포 대기 중은 미확인으로 기록하고 다음 교시 시작 때 확인한다.

PR 본문 예시와 실제 강사 사례

체크박스는 실제 확인한 항목만 채운다. 아래 공개 PR은 강사가 제공한 참고 사례이며 학생은 자기 저장소에 별도 PR을 만든다.

## 변경 이유
마감일과 과제명을 고치고 많은 과제에서 제목·과목을 빠르게 찾기 위해 개선했습니다.

## 변경 내용
- 과제 수정·저장·취소
- 제목·과목 검색과 기존 완료 필터 조합

## 직접 검증
- [ ] 기존 데이터·완료 상태·id·생성시각·개수 유지
- [ ] 취소·공백 거절·검색/필터·삭제/되돌리기
- [ ] 새로고침·휴대폰·키보드

## 공개 확인 (병합 뒤 작성)
Pages 배포 커밋: / 앱 URL: / 확인자·결과:

개선 앱 ↗ · 시작·중간·완성 ZIP · 실제 강사 PR ↗ (온라인 안내) · 1일차 실습 (온라인 안내)

개선 앱 회귀 검증 체크리스트

체크표 CSV에 통과/실패/미확인, 실제 결과·확인자·공개 URL을 남긴다. 서버 DB와 로그인은 이후 교시에서 별도로 연결한다.

자주 막히는 지점과 복구