수업 리플레이 (Lesson Replay)

라이브 코딩 수업에서 오늘 무엇을 어떤 순서로 만들었는지 자동 기록하고, 하루를 타임라인으로 복기하는 VS Code 확장.

• 저장(Ctrl+S)할 때마다 스냅샷 자동 기록 — 수업 중 할 일 없음
• 필기를 적으면 적은 시각의 코드 사이에 교차 표시
• 지웠다 다시 만든 흔적(♻️)은 전후 비교로 복기
• 하루치를 TIL 원자재 md로 내보내기 → AI에 붙여넣으면 초안
• 서버·계정 없음 — 데이터는 전부 내 폴더 안의 git·md 파일

VS Code 내장 Timeline과의 차이: 파일 단위가 아니라 하루 단위(시간표 위에 전체 파일+필기 재구성) + TIL 내보내기.

설치

• 확장 탭(Ctrl+Shift+X)에서 "수업 리플레이" 검색 → 설치 (vsix 파일이면 Ctrl+Shift+P → "Install from VSIX")
• git 필요: git --version으로 확인, 없으면 https://git-scm.com
• git이 처음이면: git config --global user.name "이름" · git config --global user.email "메일"

시작 (한 번만)

1. 실습 폴더 열기 — ⚠ 개인 연습 저장소 전용. git 저장소가 아니면 사이드바 [git 저장소 만들기] 클릭
2. 하단 상태바 ⊘ 수업 기록 꺼짐 클릭 → 기록 켜기
3. 설정(Ctrl+,)에서 lessonReplay.blocks를 내 수업 시간표로 변경 (기본값은 예시)

사고 방어 내장: 원격 연결 저장소는 켜기 전 1회 확인 · CRA 등이 만드는 중첩 git 저장소 감지 경고 · node_modules 자동 .gitignore

상태바 (좌하단)

기록 상태는 이 컴퓨터에만 저장된다 — 저장소를 공유해도 남의 VS Code에서 켜지지 않는다.

하루 흐름

• 수업 전: 상태바 ⏺ 확인 → 사이드바 ✍️ 오늘 필기(평일 아침 자동 생성) 탭을 한쪽에 열어 두기
• 수업 중: 코딩+저장만. 강사 설명 때 필기 파일의 해당 파트 아래 한 줄 적고 저장 — 시각이 자동 기록됨
• 복기: 사이드바 📅 오늘 날짜 클릭 →
  1. 스탯 줄·미니맵으로 하루 조감
  2. 파트별 "배운 것" 한두 줄 채우기
  3. 스탯 줄 ♻️ 클릭 → 갈아엎은 씬 전후 비교 (오늘의 트러블슈팅 소재)
  4. 빈 구간에 ＋ 필기 보충
  5. 파일 칩 클릭 → 핵심 파일의 하루 성장만 모아 보기
• TIL: [TIL 원자재로 내보내기] → 생성된 md를 통째로 AI에 붙여넣기 → 초안 (프롬프트는 lessonReplay.tilPrompt에서 내 문체로 수정)

화면 요소

FAQ

"안쪽에 별도 git 저장소" 경고가 떠요 — CRA 등이 자동 git init한 것. 경고의 안내대로 안쪽 .git 폴더만 휴지통으로 (코드는 그대로).

폴더를 바꿔 열면 기록이 꼬이나요? — 기준은 연 폴더가 아니라 그 폴더가 속한 git 저장소 루트. 같은 저장소면 한곳에 모인다.

VS Code를 닫으면? — 닫힌 동안은 기록 안 됨. 닫기 직전 저장분은 종료 시 남기려 시도하고, 실패하면 다음 첫 저장에 묶인다.

확장을 지우면? — 스냅샷=git 커밋, 필기=필기\날짜.md, 내보내기=복기\날짜-복기.md. 전부 남고, 어떤 서버로도 안 나간다.

설정

한계

• 기록 단위는 저장 — 저장 사이에 썼다 지운 것은 안 남는다
• VS Code가 켜져 있는 동안만 기록
• 멀티 루트 워크스페이스는 첫 폴더만
• 날짜 목록은 내 커밋(git user.email)만 집계
• 기록 대상은 내 편집기 — 강사 화면이 아니다

제거

확장 탭 → 제거. 코드·git 기록·필기·복기 전부 남는다.

개발

npm test                  # node --test, 27종
npx @vscode/vsce package  # vsix 생성

MIT License