2일차 · 본문 교재

OFFLINE / DAY 2

2일차 · 4교시 본문 교재

이 파일에는 해당 일차의 교시·실습·프롬프트·강사 설명만 담았습니다. 실습 교재에는 학생용 단계별 절차가 있습니다.

• D2-1 · Codex로 기존 앱 읽고 수정하기
• D2-2 · 과제 검색과 기존 기능 검증
• D2-3 · Git·GitHub PR과 Pages 재배포
• D2-4 · Docker와 로컬 Supabase

프런트엔드·백엔드·DB의 실제 역할

세 프로젝트의 주 DB는 Supabase PostgreSQL이다. MySQL·SQLite는 관계형 DB, MongoDB는 문서형 DB의 비교 예시다. uc-anchor의 선택형 Python PDF 서비스는 Next.js·Vercel 기본 배포와 분리해 설명한다. 현재 운영 전체 기능을 재검증한 표는 아니다.

2일차 1교시 · Codex로 기존 앱 읽고 수정하기

전날 앱의 실제 파일을 읽고 기존 데이터를 보존하며 과제를 수정한다.

산출물: 기능 브랜치와 과제 수정 기능의 첫 커밋

교시별 슬라이드 구성

과제 체크 앱 이어 만들기

J01~J06과 B01~B08을 사용한다. 학생 절차·명령·예제 요청·강사 설명과 체크포인트 파일을 제공한다.

2일차 전체 단계별 실습 교재 ↗ · 시작·중간·완성 코드 ZIP

실습 절차

1. 전날 앱과 오늘의 성공 기준 확인: 본인의 1일차 Pages 앱에서 가상 과제 2개를 만들고 하나를 완료한다. 현재 공개 URL과 수정 전 화면을 기록한다. 오늘은 수정·검색을 추가하고 커밋 2개와 PR로 변경 이유를 남긴다.
2. 내 저장소 clone → 같은 폴더를 Codex에서 열기: YOUR_ID를 본인 GitHub 아이디로 바꾸고 아래 명령을 한 줄씩 실행한다. 이미 clone했다면 해당 폴더에서 status·remote만 확인한다. Codex 프로젝트에 그 폴더를 연결하고 index.html과 .git이 있는 저장소를 기본 작업 폴더로 선택한다. Codex에 현재 실행 환경을 확인시켜 로컬 미리보기를 연다.
3. 깨끗한 main → 기능 브랜치 만들기: status에 미커밋 변경이 없고 기본 브랜치가 main인 것을 확인한 뒤 아래 명령을 실행한다. 기본 브랜치가 다르면 실제 이름으로 바꾼다. feature/edit-tasks가 이미 있으면 기존 작업을 확인하고 새 이름을 정한다.
4. Codex로 과제 수정 구현 → 첫 커밋: 아래 수정 요청을 Codex에 입력한다. 수정 버튼→기존 값 불러오기→변경 저장→취소를 직접 실행한다. 완료한 과제를 수정해도 완료 상태와 개수가 같은지 확인한다. 통과한 뒤 diff를 읽고 index.html만 stage·commit한다.

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

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

완료 확인

• 수정 후 id·완료·생성시각·개수가 유지된다.
• 취소와 공백 입력을 확인한다.
• 첫 기능 커밋을 만들고 diff를 설명한다.

자주 막히는 지점

• Author identity unknown: 본인 이름과 GitHub의 noreply 이메일을 저장소 로컬 설정으로 등록한 뒤 재시도
• not a git repository: cd와 Codex 기본 폴더를 맞춘다
• 미커밋 변경/ff-only 실패: 기존 변경을 보존하고 강사와 통합한다
• push 인증 실패: GitHub 로그인 안내를 따르고 토큰을 코드에 넣지 않는다
• PR 변경이 없음: 본인 저장소의 기능 브랜치를 compare로 선택
• 기존 과제가 사라짐: 데이터를 지우지 말고 원인과 백업부터 확인
• 수정했는데 새 항목이 생김: 동일 항목의 세 필드만 수정
• 검색이 안 됨: 검색과 완료 조건을 함께 검사
• 병합 후 이전 화면: 완료 후 새로고침하고 직접 기능 검사

확인 질문

Codex가 파일을 만들기 전에 기존 구조를 읽게 하는 이유는?

현재 버전과 경로, 프로젝트 규칙을 알아야 중복 파일과 잘못된 API 사용을 줄일 수 있다.

이 교시 발표 화면 열기 ↗

2일차 2교시 · 과제 검색과 기존 기능 검증

제목·과목 검색을 추가하고 기존 기능의 회귀를 검사한다.

산출물: 검색 기능의 두 번째 커밋과 실제 검사표

교시별 슬라이드 구성

과제 체크 앱 이어 만들기

J01~J06과 B01~B08을 사용한다. 학생 절차·명령·예제 요청·강사 설명과 체크포인트 파일을 제공한다.

2일차 전체 단계별 실습 교재 ↗ · 시작·중간·완성 코드 ZIP

실습 절차

1. 제목·과목 검색 구현 → 두 번째 커밋: 검색 요청을 Codex에 입력한다. 제목 일부와 과목을 각각 검색하고 영어 대소문자와 공백, 결과 없음, 완료 필터를 함께 시험한다. 검색 지우기 뒤 정상 목록이 돌아오는지 확인한 뒤 두 번째 commit을 만든다.
2. 회귀 검사와 변경 파일 검토: 검증 요청과 아래 체크표로 확인한다. 새로고침 뒤 수정 내용과 완료 상태를 확인한다. 같은 제목을 새로 추가한 것이 아닌지, 취소가 저장하지 않는지 검사한다. 수정 중 삭제와 되돌리기, 빈 검색, 휴대폰 화면도 확인한다.

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

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

완료 확인

• 제목·과목 검색과 완료 필터가 함께 작동한다.
• 검색·취소가 저장 데이터를 바꾸지 않는다.
• 회귀 검사표와 두 번째 커밋을 남긴다.

자주 막히는 지점

• Author identity unknown: 본인 이름과 GitHub의 noreply 이메일을 저장소 로컬 설정으로 등록한 뒤 재시도
• not a git repository: cd와 Codex 기본 폴더를 맞춘다
• 미커밋 변경/ff-only 실패: 기존 변경을 보존하고 강사와 통합한다
• push 인증 실패: GitHub 로그인 안내를 따르고 토큰을 코드에 넣지 않는다
• PR 변경이 없음: 본인 저장소의 기능 브랜치를 compare로 선택
• 기존 과제가 사라짐: 데이터를 지우지 말고 원인과 백업부터 확인
• 수정했는데 새 항목이 생김: 동일 항목의 세 필드만 수정
• 검색이 안 됨: 검색과 완료 조건을 함께 검사
• 병합 후 이전 화면: 완료 후 새로고침하고 직접 기능 검사

확인 질문

검색했을 때 목록이 줄어드는 것과 실제 과제 삭제는 어떻게 구분하는가?

검색은 표시 조건만 바꾼다. 검색 지우기와 새로고침 뒤 원래 과제·개수·완료 상태가 유지되는지 확인한다.

이 교시 발표 화면 열기 ↗

2일차 3교시 · Git·GitHub PR과 Pages 재배포

기능별 커밋을 PR로 검토·병합하고 공개 앱을 확인한다.

산출물: 커밋2개·병합 PR·Pages 배포 근거와 공개 URL

교시별 슬라이드 구성

과제 체크 앱 이어 만들기

J01~J06과 B01~B08을 사용한다. 학생 절차·명령·예제 요청·강사 설명과 체크포인트 파일을 제공한다.

2일차 전체 단계별 실습 교재 ↗ · 시작·중간·완성 코드 ZIP

실습 절차

1. push → 내 저장소의 Pull Request 만들기: 대상 remote와 브랜치를 확인한 뒤 push한다. 본인 GitHub 저장소의 Pull requests→New pull request에서 base:main, compare:feature/edit-tasks를 선택한다. 제목과 아래 PR 본문 예시를 채우고 Files changed에서 변경을 읽은 뒤 PR을 만든다.
2. 짝 검토 → 병합 → Pages 재배포 확인: 짝이 PR의 변경과 검사 결과를 읽고 개선점을 한 가지 적는다. 본인 PR을 Merge pull request로 병합한다. Settings→Pages/Actions에서 배포 완료와 사용한 커밋을 확인하고 본인 github.io 주소에서 수정·검색·새로고침을 다시 검사한다. 로컬 main을 아래 명령으로 갱신한다.

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

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

완료 확인

• 내 저장소에 커밋2개를 포함한 PR을 만든다.
• 병합과 Pages 배포 상태를 구분한다.
• 공개 URL에서 실제 기능을 검사한다.

자주 막히는 지점

• Author identity unknown: 본인 이름과 GitHub의 noreply 이메일을 저장소 로컬 설정으로 등록한 뒤 재시도
• not a git repository: cd와 Codex 기본 폴더를 맞춘다
• 미커밋 변경/ff-only 실패: 기존 변경을 보존하고 강사와 통합한다
• push 인증 실패: GitHub 로그인 안내를 따르고 토큰을 코드에 넣지 않는다
• PR 변경이 없음: 본인 저장소의 기능 브랜치를 compare로 선택
• 기존 과제가 사라짐: 데이터를 지우지 말고 원인과 백업부터 확인
• 수정했는데 새 항목이 생김: 동일 항목의 세 필드만 수정
• 검색이 안 됨: 검색과 완료 조건을 함께 검사
• 병합 후 이전 화면: 완료 후 새로고침하고 직접 기능 검사

확인 질문

한 커밋에 화면 수정과 인증 정책 변경을 함께 넣으면 무엇이 어려운가?

검토와 오류 원인 추적, 일부 변경만 되돌리기가 어려워진다.

이 교시 발표 화면 열기 ↗

2일차 4교시 · Docker와 로컬 Supabase

분리된 로컬 DB에서 인증과 데이터 실험을 시작한다.

산출물: 로컬 Supabase 실행과 연결 확인

교시별 슬라이드 구성

실습 절차

1. Docker Desktop을 실행하고 docker info로 엔진 연결을 확인한다.
2. 새 수업용 프로젝트에서 Supabase CLI의 --help와 버전을 확인한다.
3. 프로젝트를 초기화하고 supabase start로 로컬 서비스를 실행한다.
4. CLI가 안내한 로컬 URL과 Studio·메일 확인 도구 주소를 기록한다. 키는 공개 화면에 출력하지 않는다.
5. 수업용 환경 파일에 로컬 접속 설정을 입력하고 앱과 연결한다.
6. docker ps로 컨테이너를 확인하고 한 서비스의 로그를 읽는다. 종료·재시작 후 설정과 데이터를 구분한다.

Docker와 Supabase CLI의 현재 상태를 읽기 전용으로 확인해줘. 기존 다른 프로젝트의 컨테이너와 포트를 보존해줘.
이 새 수업용 폴더에만 로컬 Supabase를 초기화하고 실행할 명령을 --help 기준으로 설명해줘. 다른 프로젝트와 포트가 겹치면 이 프로젝트 설정만 바꿔줘.
앱에 로컬 URL과 공개 가능한 키를 연결하는 방법을 알려주되 비밀값은 출력하지 마. 원격 DB 연결·초기화·컨테이너 전체 정리는 하지 마.

실행 실패의 원인을 Docker 엔진, 포트 충돌, 이미지 다운로드, 프로젝트 설정 순서로 확인해줘. 대상 프로젝트의 컨테이너와 로그만 읽고 원인을 설명해줘. docker system prune이나 다른 프로젝트 삭제로 해결하지 마.

완료 확인

• 수업용 로컬 프로젝트를 식별한다.
• 앱과 로컬 DB의 연결을 확인한다.
• 대상 서비스의 시작·로그·종료 방법을 설명한다.

자주 막히는 지점

• Docker 엔진에 연결 안 됨: Desktop 실행 상태와 권한을 확인한다.
• 포트 충돌: 실행 중인 다른 프로젝트를 종료하지 말고 수업용 포트를 조정한다.

확인 질문

로컬 Supabase에 만든 데이터가 클라우드에도 자동으로 생기는가?

서로 다른 환경이다. 스키마와 데이터 적용은 별도 절차와 검증이 필요하다.

이 교시 발표 화면 열기 ↗

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

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

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

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

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와 로그인은 이후 교시에서 별도로 연결한다.

자주 막히는 지점과 복구