Code Changelog with Simple HTML Viewer

AI가 생성한 모든 코드 변경사항을 reviews 폴더에 기록하고, 간단한 HTML 뷰어로 브라우저에서 실시간으로 확인할 수 있는 솔루션입니다.

🎯 핵심 기능

✅ 자동 문서 생성: 매 수정마다 reviews 폴더에 MD 파일 생성
✅ 간단한 HTML 뷰어: 설치 불필요, Python만으로 작동
✅ 자동 index.html 업데이트: 새 문서 추가 시 자동으로 파일 목록 갱신
✅ 실시간 서버: http://localhost:4000에서 즉시 확인
✅ 다크 모드 UI: GitHub 스타일의 아름다운 문서 사이트
✅ 네비게이션: 자동 파일 목록 생성으로 쉬운 탐색
✅ Markdown 렌더링: 코드 하이라이팅 및 diff 표시
✅ 최신 문서 우선: 가장 최근 작성한 문서가 기본으로 표시됨

🚀 빠른 시작

1. 초기 설정 (최초 1회)

# 설치 불필요! Python만 있으면 OK
python3 create_changelog.py

2. 개발하면서 사용

from code_changelog_tracker import CodeChangeLogger

# 로거 생성
logger = CodeChangeLogger("프로젝트명", user_request="요구사항")

# 변경사항 기록
logger.log_file_creation("main.py", "코드", "이유")
logger.save_and_build()  # 저장!

3. 문서 서버 실행

# reviews 폴더에서 Python 서버 실행
cd reviews
python3 -m http.server 4000

# 브라우저에서 확인
# http://localhost:4000

또는 백그라운드 실행:

cd reviews && python3 -m http.server 4000 &

📁 프로젝트 구조

your-project/
├── reviews/                    # 문서 루트
│   ├── index.html             # HTML 뷰어 (자동 생성)
│   ├── README.md              # 홈페이지
│   ├── SUMMARY.md             # 네비게이션 (자동 생성)
│   │
│   ├── 20251020_140000.md    # 변경 이력 1
│   ├── 20251020_140530.md    # 변경 이력 2
│   ├── 20251020_141200.md    # 변경 이력 3
│   └── ...
│
├── code_changelog_tracker.py  # 로거 스크립트
└── create_changelog.py         # 변경사항 기록 스크립트

💡 사용 시나리오

시나리오 1: 연속 개발하면서 문서화

logger = CodeChangeLogger("로그인 기능")

# 첫 번째 작업
logger.log_file_creation("auth.py", "def login(): pass", "로그인 함수")
logger.save_and_build()
# → reviews/20251020_140000.md 생성
# → index.html 자동 업데이트 (파일 목록에 추가)
# → 기본 페이지가 20251020_140000.md로 변경

# 두 번째 작업
logger.log_file_modification("auth.py", "old", "new", "암호화 추가")
logger.save_and_build()
# → reviews/20251020_140530.md 생성
# → index.html 자동 업데이트 (파일 목록 갱신)
# → 기본 페이지가 20251020_140530.md로 변경

# 세 번째 작업
logger.log_file_creation("test_auth.py", "test code", "테스트")
logger.save_and_build()
# → reviews/20251020_141200.md 생성
# → index.html 자동 업데이트 (파일 목록 갱신)
# → 기본 페이지가 20251020_141200.md로 변경

# 브라우저에서 http://localhost:4000 방문
# → 최신 문서가 자동으로 표시됨!
# → 좌측 네비게이션에서 이전 버전들도 확인 가능

시나리오 2: 백그라운드 서버 실행

# 터미널 1: 문서 서버 실행 (계속 켜둠)
cd reviews && python3 -m http.server 4000

# 터미널 2: 개발 작업
python3 your_dev_script.py  # logger.save_and_build() 호출

# 브라우저 새로고침하여 최신 문서 확인!

시나리오 3: 팀 공유

# reviews 폴더를 팀원들과 공유
# GitHub Pages, Netlify 등에 배포
# 또는 내부 웹서버에 호스팅

🛠️ 구현 코드

code_changelog_tracker.py (메인 로거)

이미 생성된 파일 사용. 주요 메서드:

log_file_creation() - 파일 생성 기록
log_file_modification() - 파일 수정 기록
log_file_deletion() - 파일 삭제 기록
update_index_html() - index.html 파일 목록 자동 업데이트 ⭐ NEW!
save_and_build() - 저장 + SUMMARY 업데이트 + index.html 업데이트

reviews/index.html (HTML 뷰어)

자동으로 생성 및 업데이트됩니다! save_and_build() 호출 시 매번 최신 파일 목록으로 갱신됩니다.

제공 기능:

Markdown 자동 렌더링 (marked.js)
다크 모드 UI (GitHub 스타일)
파일 목록 네비게이션 (자동 업데이트)
코드 하이라이팅
최신 문서가 기본으로 표시됨
활성 링크 하이라이트

📋 간단한 사용법

1단계: 변경사항 기록

# create_changelog.py 예시
from code_changelog_tracker import CodeChangeLogger

logger = CodeChangeLogger(
    "Daily Signal App - 회원 가입 기능",
    user_request="이메일/비밀번호 기반 회원 가입 구현"
)

# 파일 생성 기록
logger.log_file_creation(
    "lib/screens/signup_screen.dart",
    "SignUpScreen 코드...",
    "회원 가입 화면 구현"
)

# 파일 수정 기록
logger.log_file_modification(
    "lib/providers/auth_provider.dart",
    "old code",
    "new code",
    "signUp 메서드 추가"
)

# 저장
logger.save_and_build()

2단계: 서버 실행

cd reviews
python3 -m http.server 4000

3단계: 브라우저에서 확인

http://localhost:4000

🎨 HTML 뷰어 특징

다크 모드 UI

GitHub 스타일의 마크다운 렌더링
코드 블록 하이라이팅
반응형 레이아웃

네비게이션

좌측에 파일 목록 자동 표시
날짜/시간별 정렬
클릭으로 쉬운 이동

Markdown 렌더링

제목, 목록, 코드 블록 지원
Diff 표시
이모지 지원

💻 명령어 가이드

서버 시작

cd reviews
python3 -m http.server 4000

포트 변경

python3 -m http.server 3000
python3 -m http.server 8080

백그라운드 실행

cd reviews && python3 -m http.server 4000 &

서버 종료

# 포그라운드: Ctrl+C
# 백그라운드: 프로세스 ID 찾아서 종료
lsof -ti:4000 | xargs kill -9

🔧 포트 설정

기본 포트: 4000

python3 -m http.server 4000
# → http://localhost:4000

다른 포트 사용

python3 -m http.server 3000
# → http://localhost:3000

포트 충돌 해결

# 다른 포트 사용
python3 -m http.server 4001

# 또는 기존 프로세스 종료
lsof -ti:4000 | xargs kill -9

🌐 배포 옵션

GitHub Pages

# reviews 폴더를 gh-pages 브랜치에 푸시
git subtree push --prefix reviews origin gh-pages

Netlify

# Netlify에 reviews 폴더 배포
# Build command: (없음)
# Publish directory: reviews

Vercel

# Vercel에 reviews 폴더 배포
vercel reviews

📝 Best Practices

서버 항상 실행: 개발 중에는 서버를 계속 켜두기
작은 단위: 각 작업을 작은 단위로 나누어 문서화
명확한 제목: 프로젝트명을 명확하게 작성
정기적 백업: reviews 폴더를 Git으로 관리
브라우저 북마크: http://localhost:4000 북마크 추가

🎓 활용 예시

회원 가입 기능 구현

logger = CodeChangeLogger(
    "Daily Signal App - 회원 가입",
    user_request="이메일/비밀번호 회원 가입 기능"
)

# CustomTextField 생성
logger.log_file_creation(
    "lib/widgets/custom_text_field.dart",
    "CustomTextField 코드...",
    "재사용 가능한 입력 필드 위젯"
)

# SignUpScreen 생성
logger.log_file_creation(
    "lib/screens/signup_screen.dart",
    "SignUpScreen 코드...",
    "회원 가입 화면 구현"
)

# AuthProvider 수정
logger.log_file_modification(
    "lib/providers/auth_provider.dart",
    "old code",
    "new code with signUp",
    "signUp 메서드 추가"
)

# 저장
logger.save_and_build()

# 서버에서 확인: http://localhost:4000

🚨 문제 해결

포트가 이미 사용 중

# 다른 포트 사용
python3 -m http.server 4001

# 또는 프로세스 종료
lsof -ti:4000 | xargs kill -9

파일이 표시되지 않음

# index.html이 있는지 확인
ls reviews/index.html

# 없으면 logger.save_and_build() 호출 시 자동 생성됨

중요: logger.save_and_build()를 호출하면 index.html이 자동으로 업데이트됩니다!

새 마크다운 파일 추가 시 파일 목록 자동 갱신
최신 파일이 기본 페이지로 자동 설정
브라우저 새로고침만으로 최신 문서 확인 가능

Markdown이 렌더링되지 않음

브라우저 캐시 삭제 (Cmd+Shift+R / Ctrl+Shift+R)
서버 재시작
index.html이 최신인지 확인 (save_and_build() 재실행)

🎯 장점

설치 불필요

Node.js, npm, HonKit 설치 불필요
Python만 있으면 즉시 사용 가능
의존성 없음

빠른 실행

1초 안에 서버 시작
즉시 문서 확인 가능

간단한 배포

reviews 폴더만 배포하면 끝
정적 사이트로 어디든 호스팅 가능

자동 업데이트 ⭐ NEW!

save_and_build() 호출 시 index.html 자동 갱신
수동 편집 불필요
항상 최신 파일 목록 유지
최신 문서가 기본 페이지로 자동 설정

📊 비교: HonKit vs Simple HTML

기능	HonKit	Simple HTML
설치	npm, Node.js 필요	Python만 필요
빌드 시간	5-10초	즉시
의존성	많음	없음
커스터마이징	높음	중간
검색 기능	있음	브라우저 검색
배포	_book 폴더	reviews 폴더

라이선스

MIT License

설치 불필요! Python으로 바로 실행하고 웹 브라우저에서 확인하세요! 🎉