5주차 요약
이번 주는 FE 리펙토링과 인프라 정리에 집중한 주였다. Calendar 기능을 Bulletproof 구조로 리팩토링하고, 레거시 코드(Python 백엔드, 푸딩캠프 브랜딩)를 정리했다. EC2 배포 관련 이슈도 여러 개 해결했다.
이제 드디어 서비스 다운 서비스가 되어가고 있다 !
PR 목록: 5주차 마일스톤
1. Calendar 기능 구현 (FE + BE)
한 일
- BE: 공개 캘린더 조회 API 3개 구현 (#150)
GET /calendar/{slug}- 호스트 캘린더 정보GET /calendar/{slug}/bookings- 월별 예약 목록GET /calendar/{slug}/bookings/stream- NDJSON 스트림
- FE: Calendar를 Bulletproof 구조로 리팩토링 (#151)
components/calendar/→features/calendar/로 이동- api, components, hooks, types, utils를 feature 단위로 통합
고민했던 점
- DTO 설계: 기존
BookingResponseDTO는timeSlotId(flat)만 반환하는데, FE는 nestedtimeSlot객체가 필요- 해결:
BookingPublicResponseDTO를 별도 생성하여 기존 DTO에 영향 없이 대응
- 해결:
- 경로 충돌:
/{slug}와/v1이 같은 컨트롤러에 공존- Spring MVC가 리터럴(
/v1)을 PathVariable보다 우선 매칭하므로 충돌 없음
- Spring MVC가 리터럴(
- 스트리밍 방식: SSE vs NDJSON
- FE의
fetch + ReadableStream파싱 방식에 맞춰 NDJSON 선택
- FE의
실수 & 삽질
- login이 안될 때 왜 안되는지 알려주지 않음 → 결국 비번을 까먹었었음
- BE에 endpoint를 안 만들어서
NoResourceFoundException에러 발생 → 호다닥 만듦 - CLI 로그 한글 깨짐 →
bootRun{jvmArgs = ['-Dfile.encoding=UTF-8']}추가 (#152)
2. Bulletproof React 구조 적용
한 일
- Calendar 관련 코드가
components/,hooks/,libs/,types/등 여러 폴더에 분산 features/calendar/하위로 통합 (34 files changed)
적용한 구조
features/calendar/
├── api/ # bookings, calendar, createBooking
├── components/ # Body, Navigator, Timeslots, BookingForm
├── hooks/ # useBookings, useCalendarNavigation 등
├── types/ # IBooking, ITimeSlot, ICalendar
├── utils/ # checkAvailableBookingDate, getCalendarDays
└── index.ts # Public API barrel export배운 점
- feature 단위로 코드를 모으니 응집도가 높아지고 유지보수가 편해짐
- 공용 타입(
~/types/base.d.ts)과 공용 함수(~/libs/utils.ts)는 그대로 유지
3. 인프라 & CI/CD 정리
GitHub Actions 정리 (#159)
- 중복/미사용 워크플로우 5개 삭제 (ci.yml, deploy-backend.yml, deploy-frontend.yml, deploy.yml, docker-build-push.yml)
- 현재 사용 중인
*-deploy-prod.yml2개만 유지
Docker 디스크 정리 추가
- EC2에서 Docker 빌드 시 디스크 공간 부족으로 빌드가 pending 상태로 멈춤
docker system prune -af --volumes를 빌드 전에 실행하도록 추가
Redis Docker 서비스 추가 (#186)
- EC2 직접 설치 vs Docker 방식 고민 → Docker Compose로 관리하면 배포/롤백 용이
redis:7-alpine+--appendonly yes+ 볼륨으로 데이터 영속성 확보
4. EC2 배포 이슈 해결
문제 (#148)
- 스크립트에
/home/ec2-user/cohi-chat이 하드코딩되어 있었음 - EC2 인스턴스가 Ubuntu AMI라서 SSH 접속 사용자가
ubuntu /home/ec2-user/디렉토리가 존재하지 않아 Permission Denied
해결
/home/ec2-user/→~(홈 디렉토리)로 변경- SSH 접속 사용자가 누구든 자신의 홈 디렉토리를 사용하므로 권한 문제 해결
실수 & 삽질
- ec2_user가 ubuntu라는 걸 몰랐음
- pem으로 접속하려고 할 때 자꾸 안 됨 → 사용자명 문제였음
비용 관련 고민
- EC2 비용이 너무 많이 나감 → 추후 최적화 필요
5. 레거시 정리
Python 백엔드 삭제 (#179)
- Spring Boot 마이그레이션 완료로
backend-python/디렉토리 전체 삭제 - 70+ 파일, 10,600+ 라인 제거
푸딩캠프 브랜딩 제거 (#170)
- favicon, og tags, title을 cohi-chat으로 변경
- 외부 CDN 의존성 제거
Claude Code 커스텀 설정 추가 (#193)
.claude/commands/,.claude/skills/추가.gitignore450줄 → 127줄로 정리
6. 이번 주 주요 실수 정리
| 실수 | 원인 | 해결 |
|---|---|---|
| Login 안됨 | 비번 까먹음 | - |
| BE endpoint 없음 | FE 먼저 만들고 BE 안 만듦 | 호다닥 만듦 |
| CLI 한글 깨짐 | Windows 기본 인코딩 문제 | JVM UTF-8 옵션 |
| EC2 Permission Denied | ec2-user vs ubuntu 혼동 | ~ 경로 사용 |
| Docker 빌드 멈춤 | 디스크 공간 부족 | prune 명령 추가 |
| pnpm install 실패 | lockfile과 package.json 불일치 | happy-dom 의존성 명시 |
| ESLint 에러 62개 | CI에 린트 검증 추가 후 발견 | 들여쓰기 통일, 미사용 변수 정리 |
7. 정리 문서
- MVVM 패턴 - Model-View-ViewModel 패턴 정리
- Bulletproof React - Feature 기반 React 아키텍처 정리
8. 다음 주에 할 것
- MVVM 패턴 정리
- Bulletproof React 문서 정리
- EC2 비용 최적화 방안 조사
- favicon.ico 로고 디자인 추가
- Redis 연결 테스트 (실제 배포 후)
하이하이