Skill

code-changelog

Logs AI-generated code changes to MD files in reviews folder with diffs, auto-updates index.html navigation, and serves real-time dark-mode HTML viewer via Python server on localhost:4000.

Python

Html

Install

npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin bear2u-my-skills

Tool Access

This skill uses the workspace's default tool permissions.

Preview

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

Supporting Assets

README.txt

SKILL.md

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

139.2k

mcp-builder

9 files

Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).

anthropics-skills-13

124.2k

canvas-design

20 files

Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.

anthropics-skills-13

124.2k

Stats

Stars833

Forks201

Last CommitOct 23, 2025

Actions

View Source View Plugin View on GitHub View README

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으로 바로 실행하고 웹 브라우저에서 확인하세요! 🎉