📅 오늘 하루 개발 일지 요약
1. 작업 분포
| 카테고리 | 비중 | |
|---|
| 결제/주문서 아키텍처 | 35% | ██████░░░░ |
| 프론트엔드 구현/연동 | 30% | █████░░░░░ |
| 인프라/DevOps | 20% | ████░░░░░░ |
| 프로젝트 관리/문서화 | 15% | ███░░░░░░░ |
2. 집중 영역 / 시간 소모 포인트
🟢 생산적 작업
- 결제 아키텍처 고도화: 기존 결제 모달 방식을 이커머스 표준 흐름인 ‘주문서(Checkout) 페이지’ 방식으로 변경.
timedeal-order 신규 레포지토리를 생성하여 주문 도메인을 독립적으로 관리하는 구조로 설계함.
- Mock PG 실서버 연동: 단순 시뮬레이션을 넘어, 포트원 스펙 호환 Mock PG 서버와 실제 통신하도록
PGSimulator 로직 수정 및 setupProxy.js를 통한 프록시 설정 완료.
- 프론트엔드 인증 로직 리팩토링: 백엔드 API 명세에 맞춰 로그인/회원가입 로직을 ID 기반에서 Email 기반으로 변경하고,
auth.js, Login.jsx, Register.jsx를 수정하여 실제 API 연동 준비 완료.
- 어드민 기능 보강: 상품 특징(
features) 필드 추가, 미리보기 모달 구현, 실시간 유효성 검사(재고, 날짜) 및 인증 헤더 자동 첨부 로직을 구현하여 관리 편의성 증대.
🔴 삽질/시간 소모 포인트
- Docker 빌드 및 포트 충돌: 백엔드 도커 실행 시
gradlew 실행 권한 문제로 빌드가 실패(RUN chmod +x gradlew 추가로 해결), 로컬 Mock PG 서버와의 8080 포트 충돌(8081로 변경 해결) 등 환경 설정 이슈 다수 발생.
- Redis 트랜잭션 롤백 분석:
@Transactional이 DB 롤백만 수행하고 Redis 감소 로직을 되돌리지 못하는 문제를 K6 테스트 결과가 놓쳤던 사실을 발견하고 원인을 파악하는 데 시간 소요.
- CORS 및 타임스탬프 이슈: 외부 Mock PG 서버 호출 시 CORS 에러 발생하여 프록시 설정으로 해결; 주문 완료 페이지에서 리렌더링 시
Date.now()가 호출되어 시간순이 꼬이는 문제를 useRef를 사용하여 해결함.
3. 타임라인
| 시간대 | 주요 작업 내용 |
|---|
| 09:10 | 🦦 결제 시스템 대세(결제 완료 선착순 vs 단기 락) 논의 및 현재 아키텍처 분석 |
| 09:22 | 🦦 K6 테스트에서 완판이 가능했던 이유 분석 및 Redis 차감 후 DB 실패 시 재고 증발 문제 식별 |
| 10:19 | 🦦 pposiraegi-ecommerce 백엔드 레포 클론 및 도커 실행 시도 |
| 10:21 | 🦦 Dockerfile에서 gradlew 권한 오류 수정 및 포트 충돌(8080→8081) 해결 |
| 10:39 | 🦦 Redis Queue vs SQS 비교 및 프로젝트 적용성 검토 |
| 11:21 | 🦦 테라폼 인프라 구조(ALB, EC2, RDS) 리뷰 및 IP 하드코딩 지양 권고 |
| 16:14 | 🦦 auth.js, Login.jsx, Register.jsx 파일을 ID 기반에서 Email 기반으로 리팩토링 |
| 16:27 | 🦦 백엔드 담당자에게 전달할 API 명세서 작성 및 DB 시딩용 데이터 정리 |
| 17:28 | 🦦 백엔드 딜레이 대응 Plan B(타임딜 목록만 실제 연동, 주문/결제 Mock) 수립 |
| 20:52 | 🦦 프론트엔드 어드민 페이지(feature/admin-page) 업데이트 확인 및 리뷰 |
| 21:14 | 🦦 어드민 페이지에 재고/날짜 실시간 검증 로직 및 상품 미리보기 모달 구현 |
| 21:46 | 🦦 Mock PG 서버 실연동을 위해 PGSimulator.jsx 수정 및 OrderResult.jsx에 응답 데이터 표시 로직 추가 |
| 22:03 | 🦦 CORS 에러 해결을 위해 setupProxy.js 생성 및 useRef를 활용한 타임스탬프 고정 로직 적용 |
| 22:18 | 🦦 결제 플로우 대변경(모달 → 주문서 페이지), timedeal-order 신규 레포 생성 및 라우팅 구현 |
| 22:50 | 🦦 주문서 페이지와 뽀시페이 시뮬레이터의 중복 정보 제거 및 UI 정리 |
| 23:23 | 🦦 주문서 페이지 내 재고 선점 시점 및 품절(409) 처리, 적립 포인트 표시 기능 추가 |
4. 해결한 문제와 인사이트
해결한 문제
- Redis/DB 데이터 불일치 잠재 버그:
@Transactional 내에서 Redis 재고를 먼저 차감한 뒤 DB 저장에 실패할 경우 롤백이 되지 않는 문제를 식별하고 원인을 파악함.
- Docker 빌드 및 포트 충돌:
gradlew 권한 문제를 Dockerfile 수정으로 해결하고, 로컬 서버와의 포트 충돌을 docker-compose.yml 매핑 변경으로 해결함.
- 프론트 인증 호환성 및 CORS: 백엔드 Email 기반 인증에 맞춰 프론트 로직을 수정하고, 외부 Mock PG 서버 호출 시 발생하는 CORS 이슈를
setupProxy.js 생성을 통해 해결함.
- 결제 플로우 및 UI 개선: 결제 모달을 주문서 페이지로 분리하여 사용자 경험을 개선하고, 결과 페이지의 타임스탬프 꼬임 현상을
useRef로 해결하여 정확한 처리 순서를 보여줌.
인사이트
- MSA를 고려한 레포지토리 분리: 대규모 아키텍처 변경 시 기존 레포에 커밋하는 것보다 독립 레포를 생성하는 것이 향후 마이크로서비스 전환 시 유리하며 깔끔한 이력 관리가 가능함.
- K6 테스트의 한계: K6 시나리오가 항상 ‘Happy Path’만 수행하여, 주문 생성 후 이탈하는 현실적인 상황에서의 재고 누수 문제를 발견하지 못함을 인지함.
- React 빌드 타임 환경변수:
REACT_APP_* 환경변수는 빌드 시점에 값이 고정되므로, S3 배포 시에는 빌드할 때 API URL을 주입해야 함을 확인함.
- 팀 프로젝트 시간 관리: 백엔드 작업이 지연될 경우를 대비해, 프론트에서는 Mock 데이터를 유지하며 핵심 기능(인증, 목록 조회)만 먼저 연동하는 전략이 유효함.
Supported by ai-log-sync & GLM-4.7