[멋쟁이사자처럼] 프론트엔드 41일차 정리

기능별로 다르게 구현되었던 코드 패턴을 통일하고 타입 안전성과 코드 품질을 개선하였습니다.

아키텍처 패턴 통일

프로젝트가 커짐에 따라 각 기능별로 달랐던 구현 방식을 하나로 통일하는 작업을 진행했습니다. 이는 팀원 모두가 서로의 코드를 쉽게 이해하고 예측 가능하게 만들기 위함입니다.

• UseCase 명명 규칙 표준화 : '생성'을 의미하는 UseCase의 접두사를 Create에서 Add로 통일했습니다. (예: CreateRoutineUseCase → AddRoutineUseCase) 이는 프로젝트 전반의 용어 일관성을 높여줍니다.
• Delete 로직 패턴 통일 : 삭제 UseCase가 단순히 ID 값만 받던 방식에서, Entity 객체를 받도록 변경했습니다. 또한, 반환 타입을 Promise<boolean>에서 Promise<void>로 변경하여, "성공하면 아무것도 반환하지 않고, 실패하면 에러를 던진다"는 규칙을 적용했습니다.

타입 안전성 강화

TypeScript를 활용하여 코드에 존재하던 타입 관련 허점들을 보완했습니다.

• 정확한 타입 적용 : Ant Design의 Checkbox 컴포넌트 이벤트 핸들러에 any 대신, 공식적으로 제공되는 CheckboxChangeEvent 타입을 적용하여 타입 추론의 정확성을 높였습니다.
• API 응답 타입 제네릭 도입 : API 응답 데이터에 무분별하게 사용되던 any 타입을, 제네릭 <T>를 사용한 공통 응답 타입으로 대체했습니다. 이를 통해 API를 호출하는 쪽에서 응답 데이터의 타입을 명확하게 알 수 있게 되어, 런타임 에러 발생 가능성을 크게 줄였습니다.

코드  개선

• 컨벤션 준수 : 변수명 컨벤션을 수정하여 IRoutinesRepository(클래스명처럼 보임)를 routinesRepository(인스턴스)로 변경하고, 파일 중간에 섞여 있던 import 문들을 모두 파일 상단으로 이동시켜 코드 구조를 깔끔하게 정리했습니다.
• 절대 경로 도입 : 복잡한 상대 경로를 절대 경로로 모두 변경했습니다. 이는 파일 위치가 변경되더라도 import 경로를 수정할 필요가 없게 만들어 리팩토링을 용이하게 합니다.

API 응답 구조 표준화

모든 API Route에 명시적인 Response 타입을 정의하여, 성공 시와 실패 시의 데이터 구조를 표준화했습니다. 챌린지 기능에서 사용된 우수한 패턴을 루틴 기능에도 동일하게 적용함으로써, 프로젝트 전체 API의 일관성을 확보했습니다.

---

정리

오늘은 새로운 기능을 추가한 날은 아니었지만 장기적인 안정성과 유지보수성을 위한 작업을 진행 했으며, 다음과 같은 작업을 진행 예정입니다.

로그인 후 로그인 한 유저의 개인 routines 가져오기 : 현재는 userId를 하드코딩하거나 쿼리 파라미터로 받고 있습니다. 실제 로그인 세션(NextAuth)과 연동하여, 인증된 사용자 본인의 루틴 데이터만을 안전하게 불러오는 기능을 구현해야 합니다.

인증샷 실제 업로드 기능 완성 : 지금은 소감과 인증샷이 UI상으로만 존재합니다. 사용자가 업로드한 이미지 파일을 실제 AWS S3 서버에 업로드하고, 반환된 proofImgUrl을 데이터베이스에 저장하는 기능을 완성하여 사진 인증 플로우를 마무리해야 합니다.