DevLog 📝

개발자를 위한 일일 개발 로그 및 프로젝트 관리 시스템

DevLog는 개발자가 매일의 개발 활동을 기록하고, 프로젝트별로 관리하며, 통계를 통해 자신의 개발 패턴을 분석할 수 있는 웹 애플리케이션입니다.

📖 프로젝트 개요

개발 배경 및 의미

DevLog는 AI 코딩 에이전트와의 협력을 통해 구축된 풀스택 개발 로그 관리 플랫폼입니다. 이 프로젝트는 단순히 기능을 완성하는 것을 넘어, 현대적 소프트웨어 개발에서 AI가 어떻게 효과적으로 활용될 수 있는지를 보여주는 실제 사례입니다.

Claude Code와 AI 에이전트의 시너지

개발 과정에서 우리는 명확한 컨텍스트 엔지니어링의 중요성을 경험했습니다. CLAUDE.md라는 포괄적인 개발 가이드를 통해 AI 에이전트에게 프로젝트의 코딩 규칙, 아키텍처 원칙, 설계 철학을 정확하게 전달함으로써, AI와 개발자 간의 협력이 얼마나 효율적일 수 있는지 입증했습니다. Explore 에이전트로 코드베이스를 탐색하고, Plan 에이전트로 구현 전략을 수립한 후, 일반 목적 에이전트로 실제 개발을 진행하는 방식은 개발 속도와 품질을 동시에 향상시켰습니다.

도메인 지식과 AI의 협업

프로젝트가 진행되면서 우리는 첫 번째 초안을 검토한 후 더 날카로운 프롬프트로 반복하는 자기 강화 과정을 거쳤습니다. 데이터베이스 호환성 문제(PostgreSQL 컬럼명 소문자), UI 가시성 문제(Select 요소 색상), 차트 렌더링 문제 등을 체계적으로 파악하고 해결함으로써, 도메인 지식이 LLM과의 협업을 얼마나 향상시킬 수 있는지 확인했습니다. 이러한 피드백 루프는 진전을 더욱 생생하게 만들었고, 최종적으로 v1.1.0 완성도 100% 의 안정적인 시스템을 구축할 수 있게 했습니다.

실용적 워크플로우의 확립

개발 과정을 통해 탐색 → 계획 → 실행 → 검증 → 개선의 명확한 워크플로우가 확립되었습니다. 스크래치패드와 커스텀 명령어를 활용한 문서화, Git 기반의 버전 관리, 체계적인 테스트 케이스 정의 등은 AI 에이전트가 더욱 정밀하게 작업을 수행할 수 있도록 지원했습니다. 특히 10,000줄 이상의 기술 문서 작성을 통해 지식을 명확히 함으로써, 향후 유지보수와 확장이 용이한 구조를 만들 수 있었습니다.

최종 성과

결과적으로 DevLog는 37개의 REST API, 5개의 완성도 높은 사용자 인터페이스, 완벽한 Docker 배포 구성, 그리고 포괄적인 기술 문서를 갖춘 프로덕션 레벨의 애플리케이션으로 완성되었습니다. 이는 단순히 기술적 완성도뿐 아니라, AI 코딩 에이전트의 잠재력을 현실적으로 보여주는 사례이며, 향후 소프트웨어 개발의 새로운 패러다임을 제시합니다. 개발자는 AI에 정확한 지시를 내릴 수 있는 능력을 갖추고, AI는 그 지시를 효율적으로 실행함으로써, 진정한 협력 관계를 구축할 수 있음을 증명합니다.

✨ 주요 기능

📝 개발 로그 관리

일일 로그 작성: 마크다운 지원으로 풍부한 내용 작성
작업 시간 추적: 시작/종료 시간 기록으로 정확한 작업 시간 측정
감정 기록: 5단계 감정 상태로 작업 당시의 기분 기록
태그 시스템: 기술 스택 및 키워드 태그로 쉬운 분류

🗂️ 프로젝트 관리

프로젝트별 분류: 로그를 프로젝트별로 그룹화
프로젝트 상태 관리: ACTIVE, COMPLETED, ON_HOLD, ARCHIVED
진행률 추적: 프로젝트별 완료율 시각화
기술 스택 관리: 프로젝트에서 사용하는 기술 스택 기록

📊 통계 및 분석

대시보드: 주간 활동 요약 및 최근 로그 표시
주간 통계: 일별 작업 시간 그래프, 활동 요약
월간 통계: 월별 트렌드 분석, 프로젝트별 시간 분포
프로젝트 통계: 프로젝트별 상세 통계 및 기술 스택 분석
기술 스택 통계: 사용 빈도 및 작업 시간 분석

🔍 검색 및 필터링

키워드 검색: 제목 및 내용 전문 검색
날짜 범위 필터: 특정 기간의 로그 조회
프로젝트 필터: 프로젝트별 로그 필터링
무한 스크롤: 부드러운 페이징 경험

🎨 사용자 인터페이스

Glassmorphism 디자인: 현대적이고 세련된 UI
다크 테마: 눈에 편안한 어두운 배경
반응형 디자인: 모바일, 태블릿, 데스크톱 지원
인터랙티브 차트: Recharts 기반 시각화

📋 기능명세

1. 페이지별 기능

🏠 대시보드 (Dashboard)

경로: /

기능	설명
통계 카드	이번 주 작업 시간, 로그 개수, 활성 프로젝트 수, 목표 달성률
주간 일별 차트	Recharts 바 차트로 일주일 작업 시간 시각화
최근 로그 목록	최근 5개 로그 표시 (제목, 설명, 프로젝트, 작업 시간)
활동 요약	평균 작업 시간, 활동 일수, 총 로그 개수

📝 개발 로그 관리

로그 목록 (Logs) - 경로: /logs

기능	설명
날짜별 그룹화	로그를 작성 날짜별로 자동 분류
필터링	프로젝트, 날짜 범위, 키워드로 검색
무한 스크롤	IntersectionObserver로 자동 페이지 로드 (10개씩)
빠른 편집	각 로그 카드에서 즉시 편집/삭제 가능

로그 작성/편집 (LogForm) - 경로: /logs/new, /logs/{id}/edit

기능	설명
기본 정보	프로젝트 선택, 제목, 설명, 날짜 입력
작업 시간 추적	시작/종료 시간 입력, 자동 계산
상세 내용	성과, 도전 과제, 학습 내용, 코드 스니펫
기술 태그	기존 태그 선택 또는 새 태그 생성
기분 기록	5단계 이모지로 작업 당시 기분 기록
자동 저장	30초마다 Draft를 로컬스토리지에 저장

로그 상세보기 (LogDetail) - 경로: /logs/{id}

기능	설명
전체 정보 표시	제목, 설명, 기분, 날짜, 작업 시간, 태그
상세 내용 섹션	성과, 도전 과제, 학습 내용, 코드 표시
메타 정보	생성/수정 시간 (상대 시간 표시)
편집/삭제	편집 버튼과 삭제 버튼 제공

🗂️ 프로젝트 관리

프로젝트 목록 (Projects) - 경로: /projects

기능	설명
상태 필터	ACTIVE(진행중), COMPLETED(완료), ON_HOLD(보류), ARCHIVED(보관)
검색	프로젝트명, 설명으로 검색
프로젝트 카드	이름, 설명, 상태, 진행률, 로그 수, 작업 시간 표시
통계 통합	각 프로젝트의 통계 정보 실시간 표시
빠른 생성	"새 프로젝트 생성" 버튼으로 즉시 생성

프로젝트 작성/편집 (ProjectForm) - 경로: /projects/new, /projects/{id}

기능	설명
기본 정보	프로젝트명 (필수), 설명 입력
상태 관리	ACTIVE, COMPLETED, ON_HOLD, ARCHIVED 선택
날짜 설정	시작일, 종료일 입력 (유효성 검사)
진행률	0-100 범위의 슬라이더 또는 숫자 입력
유효성 검사	필드 길이 제한, 형식 검증

📊 통계 및 분석 (Statistics)

경로: /statistics

기능	설명
주간 통계	일별 작업 시간 바 차트, 주간 요약
월간 통계	일별 작업 시간 라인 차트, 월간 트렌드
프로젝트 분포	파이 차트로 프로젝트별 로그 분포
기술 스택 통계	기술 카테고리별 사용 빈도 (탑 10)
차트 인터랙션	마우스 호버로 상세 정보 표시

⚙️ 설정 (Settings)

경로: /settings (구현 대기)

기능	상태	설명
프로필 설정	계획 중	표시명, 이메일 관리
알림 설정	계획 중	이메일 알림, 주간 리포트
외관 설정	계획 중	테마 선택 (라이트/다크/자동)
데이터 내보내기	50% 구현	API 연동 필요
데이터 가져오기	50% 구현	API 연동 필요
데이터 삭제	50% 구현	API 연동 필요

2. REST API 엔드포인트

개발 로그 API

Base Path: /api/logs

메서드	엔드포인트	설명
GET	`/`	모든 로그 조회 (필터링 가능)
GET	`/{id}`	로그 상세 조회
POST	`/`	로그 생성
PUT	`/{id}`	로그 수정
DELETE	`/{id}`	로그 삭제
GET	`/search?q=keyword`	키워드로 검색
GET	`/calendar`	캘린더 데이터 조회
GET	`/recent`	최근 로그 조회
GET	`/statistics`	로그 통계

필터 파라미터:

projectId: 특정 프로젝트 로그만 조회
startDate: 시작 날짜 (YYYY-MM-DD)
endDate: 종료 날짜 (YYYY-MM-DD)
keyword: 검색 키워드

프로젝트 API

Base Path: /api/projects

메서드	엔드포인트	설명
GET	`/`	모든 프로젝트 조회
GET	`/{id}`	프로젝트 상세 조회
POST	`/`	프로젝트 생성
PUT	`/{id}`	프로젝트 수정
PATCH	`/{id}/progress`	진행률 업데이트
PATCH	`/{id}/status`	상태 변경
DELETE	`/{id}`	프로젝트 삭제
GET	`/statistics`	프로젝트 통계

필터 파라미터:

status: ACTIVE, COMPLETED, ON_HOLD, ARCHIVED
keyword: 검색 키워드

통계 API

Base Path: /api/statistics

메서드	엔드포인트	설명
GET	`/weekly`	주간 통계
GET	`/weekly/current`	이번 주 통계
GET	`/weekly/last`	지난 주 통계
GET	`/monthly`	월간 통계
GET	`/monthly/current`	이번 달 통계
GET	`/monthly/last`	지난 달 통계
GET	`/project/{projectId}`	프로젝트별 통계
GET	`/tech-stack`	기술 스택 통계
GET	`/dashboard`	대시보드 종합 통계

기술 태그 API

Base Path: /api/tech-tags

메서드	엔드포인트	설명
GET	`/`	모든 태그 조회
GET	`/{id}`	태그 상세 조회
POST	`/`	태그 생성
PUT	`/{id}`	태그 수정
DELETE	`/{id}`	태그 삭제
GET	`/popular`	인기 태그 조회
GET	`/search?q=keyword`	태그 검색
GET	`/statistics`	태그 통계
POST	`/{id}/increment`	사용 횟수 증가
POST	`/{id}/decrement`	사용 횟수 감소

헬스 체크 API

Base Path: /api/health

메서드	엔드포인트	설명
GET	`/`	API 상태 확인

3. 데이터 모델

DevLog (개발 로그)

{
  "id": 1,
  "projectId": 1,
  "title": "Spring Boot 초기 설정",
  "description": "프로젝트 초기 설정 작업 수행",
  "startTime": "09:00:00",
  "endTime": "11:30:00",
  "workMinutes": 150,
  "achievements": "기본 설정 완료",
  "challenges": "의존성 충돌",
  "learnings": "Spring Boot 빌드 과정 학습",
  "codeSnippets": "{ ... }",
  "logDate": "2025-01-20",
  "mood": "GOOD",
  "createdAt": "2025-01-20T11:30:00",
  "updatedAt": "2025-01-20T11:30:00"
}

Project (프로젝트)

{
  "id": 1,
  "name": "DevLog",
  "description": "개발자 로그 시스템",
  "status": "ACTIVE",
  "startDate": "2025-01-01",
  "endDate": "2025-03-31",
  "progress": 45,
  "createdAt": "2025-01-01T00:00:00",
  "updatedAt": "2025-01-20T11:30:00"
}

TechTag (기술 태그)

{
  "id": 1,
  "name": "Spring Boot",
  "category": "FRAMEWORK",
  "color": "#2E7D32",
  "usageCount": 25,
  "createdAt": "2025-01-01T00:00:00",
  "updatedAt": "2025-01-20T11:30:00"
}

TechTag 카테고리:

LANGUAGE: 프로그래밍 언어 (Java, Python, JavaScript 등)
FRAMEWORK: 프레임워크 (Spring Boot, React, Django 등)
DATABASE: 데이터베이스 (PostgreSQL, MongoDB 등)
TOOL: 개발 도구 (Git, Docker, Maven 등)
LIBRARY: 라이브러리 (Axios, Lodash 등)
PLATFORM: 플랫폼 (AWS, GCP, Azure 등)

DevLog Mood (기분):

TERRIBLE (😤): 최악
BAD (😓): 힘듦
NEUTRAL (😐): 보통
GOOD (😊): 좋음
GREAT (🔥): 최고

Project Status (상태):

ACTIVE (🟢): 진행중
COMPLETED (🔵): 완료
ON_HOLD (🟡): 보류
ARCHIVED (⚫): 보관

4. 주요 기능 특징

기능	특징
필터링	프로젝트, 날짜 범위, 키워드로 로그 검색
자동 계산	시작/종료 시간으로 작업 시간 자동 계산
기분 추적	5단계 이모지로 기분 상태 기록
기술 태그	사용한 기술 스택 태그화 및 통계
무한 스크롤	자동 페이지 로드로 부드러운 경험
자동 저장	로그 작성 시 주기적 Draft 저장
반응형 디자인	모바일, 태블릿, 데스크톱 모두 대응
차트 인터랙션	마우스 호버로 상세 데이터 표시

🛠️ 기술 스택

Frontend

React 18.2.0: 사용자 인터페이스 라이브러리
React Router 6.21.0: 클라이언트 사이드 라우팅
Tailwind CSS 3.4.0: 유틸리티 기반 CSS 프레임워크
Recharts 2.10.3: 차트 및 그래프 라이브러리
Lucide React 0.305.0: 아이콘 라이브러리
Axios 1.6.5: HTTP 클라이언트
React Markdown 9.0.1: 마크다운 렌더링

Backend

Spring Boot 3.2.1: 애플리케이션 프레임워크
Java 17: 프로그래밍 언어
MyBatis 3.0.3: SQL 매핑 프레임워크
PostgreSQL 15: 관계형 데이터베이스
H2 Database: 개발 환경용 인메모리 데이터베이스
Lombok: 보일러플레이트 코드 감소
SLF4J + Logback: 로깅

DevOps

Docker & Docker Compose: 컨테이너화
Nginx: 웹 서버 및 리버스 프록시
Maven: 빌드 도구
Node.js 18+: 프론트엔드 빌드 환경

📁 프로젝트 구조

devlog/
├── backend/                      # Spring Boot 백엔드
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/
│   │   │   │   └── com/vibecoding/devlog/
│   │   │   │       ├── controller/      # REST API 컨트롤러
│   │   │   │       ├── service/         # 비즈니스 로직
│   │   │   │       ├── mapper/          # MyBatis 매퍼
│   │   │   │       ├── domain/          # 도메인 모델
│   │   │   │       ├── dto/             # DTO 클래스
│   │   │   │       ├── config/          # 설정 클래스
│   │   │   │       └── exception/       # 예외 처리
│   │   │   └── resources/
│   │   │       ├── mapper/              # MyBatis XML 매퍼
│   │   │       ├── application.yml      # 애플리케이션 설정
│   │   │       └── schema.sql           # 데이터베이스 스키마
│   │   └── test/                        # 테스트 코드
│   ├── Dockerfile
│   └── pom.xml                          # Maven 설정
│
├── frontend/                     # React 프론트엔드
│   ├── public/                   # 정적 파일
│   ├── src/
│   │   ├── components/           # 재사용 컴포넌트
│   │   ├── pages/                # 페이지 컴포넌트
│   │   ├── services/             # API 서비스
│   │   ├── utils/                # 유틸리티 함수
│   │   ├── App.js                # 메인 앱 컴포넌트
│   │   └── index.js              # 진입점
│   ├── Dockerfile
│   ├── nginx.conf                # Nginx 설정
│   └── package.json              # NPM 설정
│
├── database/                     # 데이터베이스 관련
│   ├── schema.sql                # 스키마 정의
│   ├── seed-data.sql             # 초기 데이터
│   └── SCHEMA.md                 # 스키마 문서
│
├── docs/                         # 문서
│   ├── API_DOCUMENTATION.md      # API 문서
│   ├── UI_UX_GUIDE.md           # UI/UX 개발자 가이드
│   ├── OPERATIONS_MANUAL.md      # 운영자 매뉴얼
│   └── screenshots/              # 스크린샷
│
├── docker-compose.yml            # Docker Compose 설정
├── .env.example                  # 환경 변수 예시
├── CLAUDE.md                     # 개발 가이드
└── README.md                     # 프로젝트 소개 (이 파일)

🚀 빠른 시작

사전 요구사항

Docker 20.10 이상
Docker Compose 2.0 이상
(선택) Node.js 18 이상 (로컬 개발 시)
(선택) Java 17 이상 (로컬 개발 시)

1. 저장소 클론

git clone https://github.com/yourusername/devlog.git
cd devlog

2. 환경 변수 설정

# .env 파일 생성
cp .env.example .env

# 필요한 경우 .env 파일 수정
# 기본값으로도 동작 가능

3. Docker Compose로 실행

# 모든 서비스 시작 (데이터베이스, 백엔드, 프론트엔드)
docker-compose up -d

# 로그 확인
docker-compose logs -f

4. 애플리케이션 접속

프론트엔드: http://localhost:3000
백엔드 API: http://localhost:8080
API Base URL: http://localhost:8080/api
헬스 체크: http://localhost:8080/api/health

5. 서비스 중지

# 모든 서비스 중지
docker-compose down

# 데이터베이스 볼륨까지 삭제
docker-compose down -v

🔧 환경 변수 설정

.env 파일에서 다음 환경 변수를 설정할 수 있습니다:

# 데이터베이스 설정
POSTGRES_DB=devlog
POSTGRES_USER=devlog
POSTGRES_PASSWORD=devlog123

# 백엔드 설정
SPRING_PROFILES_ACTIVE=prod
SERVER_PORT=8080

# 프론트엔드 설정
REACT_APP_API_BASE_URL=http://localhost:8080/api

자세한 내용은 .env.example 파일을 참조하세요.

📚 API 문서

상세한 API 문서는 API_DOCUMENTATION.md를 참조하세요.

주요 엔드포인트

개발 로그

GET /api/logs - 로그 목록 조회
GET /api/logs/{id} - 로그 상세 조회
POST /api/logs - 로그 생성
PUT /api/logs/{id} - 로그 수정
DELETE /api/logs/{id} - 로그 삭제

프로젝트

GET /api/projects - 프로젝트 목록 조회
GET /api/projects/{id} - 프로젝트 상세 조회
POST /api/projects - 프로젝트 생성
PUT /api/projects/{id} - 프로젝트 수정
DELETE /api/projects/{id} - 프로젝트 삭제

통계

GET /api/statistics/weekly/current - 이번 주 통계
GET /api/statistics/monthly/current - 이번 달 통계
GET /api/statistics/project/{projectId} - 프로젝트별 통계
GET /api/statistics/tech-stack - 기술 스택 통계

📸 스크린샷

대시보드

주간 활동 요약, 최근 로그, 작업 시간 차트를 한눈에 확인할 수 있습니다.

로그 목록

날짜별로 그룹화된 로그 목록을 무한 스크롤로 탐색할 수 있습니다.

로그 작성/수정

마크다운을 지원하는 풍부한 에디터로 로그를 작성할 수 있습니다.

통계 페이지

주간/월간 통계, 프로젝트별 시간 분포, 기술 스택 분석을 시각화합니다.

프로젝트 목록

진행 중인 프로젝트와 완료된 프로젝트를 한눈에 관리합니다.

👨‍💻 개발 가이드

로컬 개발 환경 설정

백엔드

cd backend

# Maven 빌드
./mvnw clean install

# 애플리케이션 실행 (H2 데이터베이스 사용)
./mvnw spring-boot:run -Dspring-boot.run.profiles=dev

# 또는 PostgreSQL 사용
./mvnw spring-boot:run -Dspring-boot.run.profiles=prod

프론트엔드

cd frontend

# 의존성 설치
npm install

# 개발 서버 시작
npm start

# 프로덕션 빌드
npm run build

코딩 컨벤션

프로젝트의 코딩 컨벤션 및 개발 가이드는 다음 문서들을 참조하세요:

전체 개발 가이드: CLAUDE.md
UI/UX 개발 가이드: UI_UX_GUIDE.md - 프론트엔드 개발자 필독

커밋 메시지 규칙

feat: 새로운 기능 추가
fix: 버그 수정
docs: 문서 수정
style: 코드 포맷팅
refactor: 코드 리팩토링
test: 테스트 코드
chore: 빌드 설정 등

예시:
feat: Add weekly statistics API
fix: Fix dashboard statistics showing 0 values
docs: Update API documentation

🧪 테스트

백엔드 테스트

cd backend

# 모든 테스트 실행
./mvnw test

# 특정 테스트 클래스 실행
./mvnw test -Dtest=DevLogServiceTest

# 테스트 커버리지 확인
./mvnw test jacoco:report

프론트엔드 테스트

cd frontend

# 모든 테스트 실행
npm test

# 커버리지 리포트 생성
npm test -- --coverage

API 테스트

API 테스트 스크립트는 database/test-scripts/ 디렉토리에 있습니다:

# 헬스 체크
curl http://localhost:8080/health

# 로그 목록 조회
curl http://localhost:8080/api/logs

# 주간 통계 조회
curl http://localhost:8080/api/statistics/weekly/current

🚢 배포

Docker Compose를 이용한 배포

# 프로덕션 환경 시작
docker-compose -f docker-compose.yml up -d

# 특정 서비스만 재시작
docker-compose restart backend
docker-compose restart frontend

# 로그 확인
docker-compose logs -f backend
docker-compose logs -f frontend

개별 서비스 배포

백엔드

cd backend

# JAR 파일 빌드
./mvnw clean package -DskipTests

# Docker 이미지 빌드
docker build -t devlog-backend:latest .

# 컨테이너 실행
docker run -d -p 8080:8080 --name devlog-backend devlog-backend:latest

프론트엔드

cd frontend

# 프로덕션 빌드
npm run build

# Docker 이미지 빌드
docker build -t devlog-frontend:latest .

# 컨테이너 실행
docker run -d -p 80:80 --name devlog-frontend devlog-frontend:latest

자세한 배포 가이드는 OPERATIONS_MANUAL.md를 참조하세요.

🚧 미개발 항목

DevLog 프로젝트는 현재 안정적으로 작동하고 있으나, 다음의 항목들이 아직 완전히 구현되지 않았습니다:

1. Settings 페이지 - 데이터 관리 기능 (우선순위: 높음)

파일: frontend/src/pages/Settings.jsx

현재 Settings 페이지의 다음 기능들이 로컬스토리지에만 저장되고 API 연동이 되어있지 않습니다:

기능	상태	상세
데이터 내보내기	50% 구현	- 로컬스토리지에서만 데이터 가져옴 - API에서 실시간 데이터 가져오기 필요 (라인 50-51) - `devLogApi.getAll()`, `projectApi.getAll()` 호출 필요
데이터 가져오기	50% 구현	- 파일에서 JSON 읽기는 구현됨 - API에 데이터 저장하는 로직 필요 (라인 75) - `devLogApi.create()`, `projectApi.create()` 호출 필요
데이터 삭제	50% 구현	- 로컬스토리지만 삭제됨 - 백엔드의 모든 데이터 삭제 API 호출 필요 (라인 86) - 관리자 권한 확인 필수

구현 예시:

// 데이터 내보내기 - API에서 실제 데이터 가져오기
const handleExportData = async () => {
  try {
    const [logsRes, projectsRes] = await Promise.all([
      devLogApi.getAll(),
      projectApi.getAll(),
    ]);

    const data = {
      logs: logsRes.data,
      projects: projectsRes.data,
      settings: settings,
      exportDate: new Date().toISOString(),
    };
    // ... 다운로드 로직
  } catch (err) {
    showToast('데이터 내보내기 실패: ' + err.message, 'error');
  }
};

2. 백엔드 - 예외 처리 개선 (우선순위: 중간)

파일들:

backend/src/main/java/com/vibecoding/devlog/service/TechTagService.java
backend/src/main/java/com/vibecoding/devlog/service/DevLogService.java

현재 여러 Service 클래스에서 일반적인 RuntimeException을 사용하고 있습니다. CLAUDE.md 가이드라인에 따라 커스텀 예외 클래스 사용으로 개선이 필요합니다:

현재 코드:

if (result == 0) {
    throw new RuntimeException("Failed to create tech tag");
}

개선안:

if (result == 0) {
    throw new ResourceNotFoundException("Tech tag creation failed");
}

Service	메서드	상세
TechTagService	create()	라인 131 - RuntimeException 사용
TechTagService	update()	라인 159 - RuntimeException 사용
TechTagService	delete()	라인 182 - RuntimeException 사용
DevLogService	create()	라인 140 - RuntimeException 사용
DevLogService	update()	라인 177 - RuntimeException 사용
DevLogService	delete()	라인 211 - RuntimeException 사용

3. 프론트엔드 - 디버깅 코드 제거 (우선순위: 낮음)

파일: frontend/src/pages/LogForm.jsx

위치: 라인 136

임시 디버깅용 console.log() 코드가 남아있습니다:

// 현재
const saveDraft = () => {
  localStorage.setItem('logDraft', JSON.stringify(formData));
  console.log('Draft saved'); // ← 프로덕션에서 제거
};

// 개선안
const saveDraft = () => {
  localStorage.setItem('logDraft', JSON.stringify(formData));
};

미개발 항목 통계

카테고리	개수	총 복잡도
API 연동 미완성	3개	중간
예외 처리 개선	6개	낮음
디버깅 코드 정리	1개	매우 낮음
총계	10개	-

🔍 문제 해결

일반적인 문제

1. 데이터베이스 연결 실패

# PostgreSQL 컨테이너 상태 확인
docker-compose ps postgres

# PostgreSQL 로그 확인
docker-compose logs postgres

# 컨테이너 재시작
docker-compose restart postgres

2. 프론트엔드 빌드 실패

# Node 모듈 재설치
cd frontend
rm -rf node_modules package-lock.json
npm install

# 캐시 클리어 후 빌드
npm run build -- --no-cache

3. 백엔드 API 오류

# 백엔드 로그 확인
docker-compose logs backend

# 특정 오류에 대한 로그 검색
docker-compose logs backend | grep ERROR

4. 대시보드 통계가 0으로 표시됨

PostgreSQL의 경우 컬럼명이 소문자로 반환됩니다
MyBatis 매퍼 파일에서 컬럼 별칭이 소문자인지 확인하세요
자세한 내용은 CLAUDE.md의 "데이터베이스 규칙" 섹션 참조

5. 브라우저 캐싱 문제

하드 리프레시: Ctrl + Shift + R (Windows/Linux) 또는 Cmd + Shift + R (Mac)
시크릿/프라이빗 브라우징 모드로 테스트
브라우저 캐시 완전 삭제

더 많은 문제 해결 방법은 OPERATIONS_MANUAL.md를 참조하세요.

📄 라이선스

이 프로젝트는 MIT 라이선스 하에 배포됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.

👥 기여

기여를 환영합니다! 다음 절차를 따라주세요:

이 저장소를 포크합니다
새 브랜치를 생성합니다 (git checkout -b feature/amazing-feature)
변경사항을 커밋합니다 (git commit -m 'feat: Add amazing feature')
브랜치에 푸시합니다 (git push origin feature/amazing-feature)
Pull Request를 생성합니다

📞 문의

프로젝트에 대한 질문이나 제안사항이 있으시면:

이슈 등록: GitHub Issues
이메일: your.email@example.com

🙏 감사의 말

Spring Boot - 강력한 Java 프레임워크
React - 사용자 인터페이스 라이브러리
Tailwind CSS - 유틸리티 CSS 프레임워크
Recharts - 차트 라이브러리
Lucide - 아이콘 라이브러리

DevLog로 당신의 개발 여정을 기록하세요! ✨

Name		Name	Last commit message	Last commit date
Latest commit History 15 Commits
.github		.github
backend		backend
database		database
docs		docs
frontend		frontend
scripts		scripts
.env.example		.env.example
.gitignore		.gitignore
CLAUDE.md		CLAUDE.md
DEPLOYMENT_COMPLETE.md		DEPLOYMENT_COMPLETE.md
GITHUB_COMPLETE_GUIDE.md		GITHUB_COMPLETE_GUIDE.md
GITHUB_GUIDE.md		GITHUB_GUIDE.md
GITHUB_PUSH_INSTRUCTIONS.md		GITHUB_PUSH_INSTRUCTIONS.md
LICENSE		LICENSE
PROJECT_RETROSPECTIVE.md		PROJECT_RETROSPECTIVE.md
README.md		README.md
docker-compose.yml		docker-compose.yml

Folders and files

Latest commit

History

Repository files navigation

DevLog 📝

📖 프로젝트 개요

개발 배경 및 의미

Claude Code와 AI 에이전트의 시너지

도메인 지식과 AI의 협업

실용적 워크플로우의 확립

최종 성과

📋 목차

✨ 주요 기능

📝 개발 로그 관리

🗂️ 프로젝트 관리

📊 통계 및 분석

🔍 검색 및 필터링

🎨 사용자 인터페이스

📋 기능명세

1. 페이지별 기능

🏠 대시보드 (Dashboard)

📝 개발 로그 관리

🗂️ 프로젝트 관리

📊 통계 및 분석 (Statistics)

⚙️ 설정 (Settings)

2. REST API 엔드포인트

개발 로그 API

프로젝트 API

통계 API

기술 태그 API

헬스 체크 API

3. 데이터 모델

DevLog (개발 로그)

Project (프로젝트)

TechTag (기술 태그)

4. 주요 기능 특징

🛠️ 기술 스택

Frontend

Backend

DevOps

📁 프로젝트 구조

🚀 빠른 시작

사전 요구사항

1. 저장소 클론

2. 환경 변수 설정

3. Docker Compose로 실행

4. 애플리케이션 접속

5. 서비스 중지

🔧 환경 변수 설정

📚 API 문서

주요 엔드포인트

개발 로그

프로젝트

통계

📸 스크린샷

대시보드

로그 목록

로그 작성/수정

통계 페이지

프로젝트 목록

👨‍💻 개발 가이드

로컬 개발 환경 설정

백엔드

프론트엔드

코딩 컨벤션

커밋 메시지 규칙

🧪 테스트

백엔드 테스트

프론트엔드 테스트

API 테스트

🚢 배포

Docker Compose를 이용한 배포

개별 서비스 배포

백엔드

프론트엔드

🚧 미개발 항목

1. Settings 페이지 - 데이터 관리 기능 (우선순위: 높음)

2. 백엔드 - 예외 처리 개선 (우선순위: 중간)

3. 프론트엔드 - 디버깅 코드 제거 (우선순위: 낮음)

미개발 항목 통계

Packages