1. 코드 전체 구조 및 기능 요약

GitFolio 프로젝트는 크롬 확장 프로그램과 Node.js 서버(Express + Anthropic)를 연동해, 사용자의 GitHub 레포지토리를 분석하고 자동으로 포트폴리오를 생성하는 도구입니다.

1.1 크롬 확장

• manifest.json
  • 확장 프로그램 이름, 권한, 아이콘, 백그라운드 스크립트 등록 등 메타정보
• background.js
  • GitHub 페이지 접속 여부 확인
  • 팝업 스크립트와 메시지 교환 (현재 탭 URL에서 owner/repo 추출)
• popup.html & popup.js
  • 부트스트랩 기반 팝업 UI
  • 사용자가 “Analyze Repo” 등을 클릭하면 백엔드 서버로 API 호출
  • 응답받은 JSON/HTML 결과를 iframe으로 미리보기, 다운로드, 복사

1.2 Node.js 서버 (server/server.js)

• GitHub API
  • fetchRepoInfo, fetchReadme, fetchCommits, fetchUserContributions 등의 함수로 레포·README·커밋 정보를 가져옴
• Anthropic(Claude) API
  • 모델 "claude-3-haiku-20240307"를 사용해 자동 요약/분석 요청
• 주요 엔드포인트
  • /api/analyze-repo: 레포지토리 분석 → Claude에 “프로젝트 배경지식(JSON)” 생성
  • /api/analyze-contributions: 특정 사용자의 커밋 상세 분석 → Claude에 “기여도(JSON)” 생성
  • /api/generate-portfolio: 배경지식 + 기여도를 종합 → Claude에서 HTML 포트폴리오 반환
• 핵심 로직
  1. GitHub API로 레포/커밋 데이터 수집
  2. Claude에 “배경지식” or “코드 기여도” 요약 요청 (JSON 형식)
  3. “포트폴리오 HTML” 생성 요청 (최종 결과)
  4. 서버가 확장프로그램에 JSON/HTML 형태로 반환 → 팝업에서 표시

1.3 Webpack & 기타 설정

• webpack.config.js
  • background.js, popup.js, anthropic_bundle.js를 번들링 및 src → dist 폴더로 복사
• .env
  • ANTHROPIC_API_KEY 저장
• npm run build
  • 확장 프로그램 스크립트 번들링
• 헬스체크
  • /api/status, /ping 엔드포인트 제공

2. 지도 교수님 내용 요약 및 핵심 요구사항

“이력서/포트폴리오” 작성 시, GitHub 저장소(레포) 분석 결과를 활용하길 희망하며, 아래 점들을 강조하셨습니다.

1. 개발자로서 포트폴리오 작성
   • 레포별 기여도를 이력서에 반영 → 전체 기여도 계산
   • 변경된 코드까지 한 번에 분석하여 포트폴리오 생성
   • 노션(Notion) 등 플랫폼과 연동해 최신 트렌드 반영