aiblog

1주차 계획

• 환경 설정
  • React (Vite) 및 Express 프로젝트 폴더 구조 확립
  • 프록시 설정 완료 (클라이언트 ↔ 서버 통신)
  • .env 파일 생성 및 .gitignore에 추가.
• Github 연동
  • Express에 /api/github/activities 라우터 구현
  • Server-Side Fetching 로직 구현 (토큰 인증)
• UI
  • 레포 입력 폼 컴포넌트 (RepoInput.jsx) 제작
  • 커밋 목록 렌더링 컴포넌트 (ActivityList.jsx) 제작
  • 가져온 커밋/PR 데이터를 UI에 간결하게 표시

2주차 계획

• 서버

• /api/blog/generate 엔드포인트 생성

• commitMessage + diff 받아서 prompt 만들기

• OpenAI 호출 로직 생성

• blogRoutes를 server.js에 연결

• 프론트

• ActivityList에 블로그 생성 버튼 추가

• 버튼 클릭하면 POST api/blog/genetrate 요청

• 결과 블로그 글을 화면에 렌더링

for gemini

개발 계획

기능

기능	세부 설명	구현 방법
인증	GitHub OAuth를 이용한 회원가입/로그인/로그아웃	GitHub OAuth 연동 (가장 안전하고 효율적)
데이터 연동	GitHub Repo 검색 및 커밋/PR 기록 가져오기	Express 서버를 통한 GitHub API 호출
AI 콘텐츠	유저가 선택한 커밋/PR에 대한 LLM 요약 및 블로그 글 생성	OpenAI API 사용 (예: GPT-4o)
데이터 관리	생성된 블로그 글 저장/불러오기/수정/삭제	MongoDB
UI/UX	아기자기한 디자인, 로딩 UI, 설정(settings) 페이지	Tailwind CSS

개발 환경

영역	스택	용도 및 설명	학습 포인트
프론트엔드 (Core)	React + Vite	빠르고 효율적인 개발 환경(Dev Server) 구축 및 싱글 페이지 애플리케이션(SPA) 구성.	Vite를 사용한 React 프로젝트 초기화 및 기본 폴더 구조 설정.
타입 안정성	TypeScript (권장)	API 요청/응답 형식, 컴포넌트 Props, 상태 등을 엄격하게 관리하여 프로젝트 규모가 커져도 안정성을 유지.	TypeScript 기본 문법 학습 및 React/Express 환경에 적용 방법.
서버 상태 관리	React Query (TanStack Query)	GitHub 데이터, LLM 생성 결과, DB CRUD 등 서버에서 가져오는 비동기 데이터의 캐싱, 동기화, 로딩/에러 상태 관리를 자동화하여 복잡한 로직 해소.	React Query의 useQuery, useMutation 훅 사용법 및 비동기 데이터 최적화 원리.
클라이언트 상태	Zustand	UI 테마, 전역 설정, 로그인 유저 정보 등 클라이언트 자체 UI 상태를 간결하게 관리하는 경량 전역 상태 라이브러리.	Zustand의 create 함수를 사용한 Store 정의 및 컴포넌트 연결 방법.
스타일링/디자인	Tailwind CSS	아기자기하고 모던한 디자인을 유틸리티 클래스 기반으로 빠르게 구축. 반응형 디자인(Responsive Design) 구현에 용이.	Tailwind CSS 설치 및 React 프로젝트에 통합하는 방법, 기본 유틸리티 클래스.
백엔드 (Core)	Node.js + Express	GitHub 및 OpenAI API 호출, 인증(OAuth), 그리고 데이터베이스 연동을 담당하는 REST API 서버 구축.	Express 기본 라우팅, 미들웨어(Middleware) 설정 및 사용 방법.
데이터베이스	MongoDB + Mongoose	생성된 블로그 글을 영구 저장하고 관리할 NoSQL 데이터베이스. Mongoose는 데이터 구조(Schema) 관리를 도움.	MongoDB 설치 (또는 Atlas 사용), Mongoose를 사용한 스키마 정의 및 CRUD 로직 구현.
인증	Passport.js (추가 권장)	Express에서 GitHub OAuth와 같은 다양한 인증 전략을 표준화하여 구현할 수 있도록 돕는 미들웨어.	Passport.js의 개념 및 GitHub Strategy를 Express에 적용하는 방법.
보안/유틸리티	dotenv	GitHub Token, OpenAI API Key 등의 민감 정보를 서버 환경에 안전하게 주입.	.env 파일 구성 및 Express 서버에서 process.env로 접근하는 방법.
	axios 또는 fetch	Express 서버에서 GitHub/OpenAI API로, React에서 Express 서버로 HTTP 요청을 보내는 범용 클라이언트.	각 라이브러리의 비동기 요청 및 에러 처리 방식.

세부 계획

1주차 - Base Setup & Data Fetching

목표	세부 실행 계획 (Action Items)	학습/미션 가이드
1. 환경 설정	1. React (Vite) 및 Express 프로젝트 폴더 구조 확립.	**package.json**에 필수 의존성 (express, react, dotenv 등) 설정.
	2. 프록시 설정 완료 (클라이언트 ↔ 서버 통신).	학습 키워드: Vite proxy 설정 또는 CORS 미들웨어 사용법.
	3. .env 파일 생성 및 .gitignore에 추가.	GitHub PAT (개인 접근 토큰) 발급 및 .env에 저장.
2. GitHub 연동	1. Express에 /api/github/activities 라우터 구현.	학습 키워드: GitHub REST API (/repos/{owner}/{repo}/commits 및 /pulls).
	2. Server-Side Fetching 로직 구현 (토큰 인증).	fetch 또는 axios를 사용하여 서버에서 GitHub API 호출.
3. UI/UX	1. Repo 입력 폼 컴포넌트 (RepoInput.jsx) 제작.	사용자 입력 상태 관리 (useState).
	2. 커밋 목록 렌더링 컴포넌트 (ActivityList.jsx) 제작.	**로딩 상태 (isLoading)**에 따라 스피너/데이터 조건부 렌더링.
	3. 가져온 커밋/PR 데이터를 UI에 간결하게 표시.	map 함수를 사용한 목록 렌더링.

2주차 - LLM Integration & Prompt Engineering

목표	세부 실행 계획 (Action Items)	학습/미션 가이드
1. LLM API 연동	1. OpenAI API Key 발급 및 .env에 저장.	학습 키워드: OpenAI Node.js SDK 설치 및 서버에서 초기화.
	2. Express에 /api/generate/blog 라우터 구현.	클라이언트로부터 선택된 커밋 상세 내용을 요청 본문으로 받음.
2. 프롬프트 엔지니어링	1. 요약 요청 프롬프트 설계.	미션: "당신은 개발 블로그 작가입니다. 다음 커밋 내용을 보고 독자가 이해하기 쉬운 300자 이내의 블로그 글로 요약해 주세요. 말투는 친근하게..." 와 같이 구체적인 페르소나와 형식을 정의하세요.

3주차 - Persistence & CRUD

목표	세부 실행 계획 (Action Items)	학습/미션 가이드
1. DB 시스템 결정/설정	1. DB 선택: MongoDB, Firestore 등 중 택일. (Express 기반이므로 MongoDB 추천)	학습 키워드: Mongoose 또는 MongoDB Driver 설치 및 Express 연동.
	2. 블로그 글 데이터의 스키마(Schema) 정의.	title, content, githubActivityId, createdAt, updatedAt 등 포함.
2. CRUD 구현	1. Express에 저장/불러오기/수정/삭제 라우터 구현.	/api/blog, /api/blog/:id 엔드포인트 설계.
	2. 데이터베이스 CRUD 로직 구현.	DB에 글을 저장하고 ID로 특정 글을 불러오는 함수 작성.
3. UI/UX	1. 블로그 글 저장/수정 폼 및 버튼 구현.	저장 성공 후 피드백 제공 (토스트 메시지 등).
	2. 저장된 글 목록 페이지 (/posts) 구현.	글 목록을 불러와서 리스트로 보여주고, 클릭 시 상세 페이지로 이동.