감행 - #1 리팩토링 시작 및 일정 정리

(2025. 07. 15) 감행 프로젝트 리팩토링 시작 ✨

 

1. 프로젝트 개요

- 프로젝트명: 감행 (국내 항공/숙소 예약 통합 플랫폼)

- 목표 리팩토링 기간: 2025.07.15 ~ 2025.08.31 (총 6주)

- 프로젝트 유형: 기존 팀 프로젝트 → 개인 리팩토링 및 고도화 진행

- 목표: 단순 기능 구현을 넘어서 기존 구조/기능을 완전히 이해하고, 혼자 직접 설계 + 개발 및 최적화 + 테스트까지 경험하는 것

 

📄 기존 프로젝트 발표자료

- https://github.com/Gamhang (감행 Oraganization)

 

 

 

2. 리팩토링 및 고도화를 진행하게 된 배경

- 개발을 제대로 배우지 않고 처음 참여한 프로젝트였기 때문에 디자인 및 일부 간단한 프론트 구현만 맡아 한정적이었음.

- 디자인 및 발표 부분에서 많은 칭찬을 받았고 대상을 수상 했으나, 내가 맡은 기능이 제대로 없었기 때문에 리팩토링을 해보고 싶었음.

- 우리 Fisa 4기에서 제대로 배우고 프로젝트를 2번정도 진행한 경험이 생겼기 때문에 혼자서 프론트, 백엔드 고도화를 진행해보려고 함. 

 

 

 

3. 리팩토링 핵심 방향

[프론트엔드]

• 디렉토리 구조 개선: pages, components, hooks, api, stores 등으로 역할 분리
• 상태 관리 적용: React Query 도입
• 성능 개선: 코드 스플리팅, lazy-loading, Lighthouse 기반 최적화
• UI 개선: 공통 컴포넌트화, 반응형, 에러/로딩 UX 강화

[백엔드]

• 패키지 모듈화: domain, dto, event, exception 등으로 계층 분리
• 예외 처리 통일: 공통 Exception Handler + 표준 응답 구조
• 테스트 및 문서화: Cypress or Postman 문서 정비, 간단한 단위 테스트 추가

 

 

4. 세부 일정 계획

- 바뀔 수 있음.

기간		프론트엔드	백엔드
1주차 07.15(화) ~ 07.21(월)		- 기존 코드 분석 및 전체 구조 파악 - 디렉토리 구조 설계 (pages/components/hooks 등) - 라우팅 흐름 도식화	- 기존 도메인/패키지 구조 분석 - Controller/Service 흐름 파악 - Kafka, Reservation 흐름 정리
2주차 07.22(화) ~ 07.28(월)		- 공통 UI 컴포넌트 분리 (Header, Button, Modal 등) - 로그인/회원가입 흐름 정리 - 반응형 UI 기초 세팅	- DTO/Entity/Controller 리팩토링 - 유효성 검사 로직 정리 - Swagger 설정 점검
3주차 07.29(화) ~ 08.04(월)		- 예약/결제 페이지 리팩토링 - 상태 관리 도입 (Zustand, React Query) - API 호출 방식 개선	- 예약 흐름에서 enum 활용 - 예외 처리 일원화 (@ControllerAdvice) - Kafka Consumer 로직 정비
4주차 08.05(화) ~ 08.11(월)		- 반응형 UI 고도화 - 로딩/에러 처리 UI 개선 - UX 개선 및 사용자 흐름 다듬기	- Kafka 이벤트 구조 모듈화 - 공통 응답 포맷 설계 (code, message, timestamp) - 메시지 리스너 책임 분리
5주차 08.12(화) ~ 08.18(월)		- Lighthouse 점검 및 성능 개선 - 코드 스플리팅 (lazy, Suspense) 적용 - useMemo 등 최적화 적용	- Swagger API 문서 정리 - 간단한 단위 테스트 추가 (@WebMvcTest) - Docker 환경 개선 시도
6주차 08.19(화) ~ 08.25(월)		- 전체 코드 정리 및 리팩토링 마무리 - README/문서화 작성, 시연용 자료 제작 - 포트폴리오 정리 및 회고글 작성 - 코드 정리 및 주석 추가- GCP or 로컬 배포 확인 - CI/CD 환경 점검 or 도커 최종 빌드 확인
7주차 08.26(화) ~ 08.31(일)

 

 

 

5. 사용 기술 스택

• 프론트: React, JavaScript or TypeScript, React Router, Axios, Styled-Components
• 백엔드: Java, Spring Boot, JPA, Kafka, Spring Security
• 공통/도구: Docker, GCP, Postman, Lighthouse, GitHub, VS Code, IntelliJ

 

 

6. 리팩토링 구조 변경 (Before → After)

Front-end	Before	booking, structure 등 기능별 디렉토리가 섞여 있었음
	After	pages, components, api, hooks 등 역할 기반으로 재구성
Back-end	Before	screen/src/main/java/travel 내부에 모든 클래스 밀집
	After	domain, dto, event, exception 등으로 분리 및 역할 정의

 

 

7. 리팩토링 이후 추가 시도 예정

• Javascript를 TypeScript 전환 (프론트)
• CI/CD 흐름 구성 및 Dockerfile 정리
• API 응답 표준화 포맷 적용
• 테스트 코드 작성 및 커버리지 측정
• 회고 블로그 시리즈 작성 예정

 

 

8. 마무리

- 이번 리팩토링은 단순히 코드를 정리하는 작업이 아닌, "내가 직접 전체 프로젝트를 운영 가능한 수준까지 끌어올리는 것"을 목표
- 이전 팀 프로젝트에서 기획부터 배포까지 전 과정을 했기 때문에 설계부터 구현, 최적화와 문서화까지 모두 경험하고자 하며, 이 과정을 통해 실무에서도 자신 있게 프로젝트를 리딩할 수 있는 실력을 만들고 싶음.