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

클린 아키텍처 구조 적용

프로젝트의 유지보수성과 확장성을 높이기 위해 도입한 클린 아키텍처의 개념을 프로젝트 구조에 적용했습니다.

• 핵심 개념
  도메인(Domain) :  서비스의 순수한 비즈니스 로직. 외부 라이브러리(Prisma 등)에 의존하지 않는다.
  인프라(Infrastructure) : 데이터베이스, 외부 API 등 외부 세계와 소통하는 기술적인 세부 구현.
  관심사의 분리 (SoC) : 무엇을 할 것인가(도메인)와 어떻게 할 것인가(인프라)를 명확히 분리하여 한쪽의 변경이 다른 쪽에 영향을 미치지 않도록 설계한다.
  의존성 규칙 : 모든 의존성은 항상 바깥쪽(인프라)에서 안쪽(도메인)으로 향해야 한다는 원칙을 이해한다.
  
  
• 리포지토리 패턴(Repository Pattern) 적용
  인터페이스 정의 (/domains) : 먼저 RoutinesRepository 인터페이스를 만들어 데이터베이스로 수행해야 할 작업(생성, 조회, 수정, 삭제)을 추상적으로 정의했습니다. 이는 도메인 계층이 특정 DB 기술에 종속되지 않도록 합니다.
  구현체 작성 (/infrastructures) : 위에서 정의한 인터페이스를 PrRoutinesRepository 클래스가 구현(implements) 하도록 작업할 예정 입니다. 이 클래스 안에서만 실제 Prisma 코드를 사용하여 데이터베이스와 통신하는 로직을 작성해야 합니다.

'루틴' 기능 풀스택 설계 및 백엔드 구현

제가 담당한 '메인 대시보드 및 루틴 수행' 기능의 핵심인 '루틴' CRUD(생성, 조회, 수정, 삭제) 로직을 클린 아키텍처 구조에 따라 완성해야 합니다.

• DTO (Data Transfer Object) 정의
  클라이언트(프론트엔드)와 서버 간에 데이터를 주고받기 위한 규격인 CreateRoutineDto, UpdateRoutineDto를 먼저 정의했습니다.
  
• 도메인 엔티티(Domain Entity) 정의
  시스템의 핵심 객체인 Routine 엔티티를 순수한 TypeScript 인터페이스로 정의했습니다.
• 서비스(Service) 계층 구현
  Routines 클래스를 만들어 실제 비즈니스 로직을 처리하도록 했습니다.
• 의존성 주입(Dependency Injection) 
  레포지토리 패턴을 적용하여 RoutinesRepository 인터페이스에만 의존하도록 설계했습니다. 서비스 계층은 데이터베이스가 Prisma인지 다른 것인지 알 필요가 없습니다.
• 컨트롤러(Controller) 계층 구현
  Next.js API Routes를 사용하여 실제 API 엔드포인트(GET, PATCH, DELETE 등)를 구현해야 합니다.
  이 컨트롤러는 HTTP 요청을 받아 DTO로 변환하고, Routines를 호출한 뒤, 그 결과를 다시 HTTP 응답으로 변환해주는 역할을 수행하도록 해야 합니다.

네트워크 및 서버 환경 이해

로컬 개발 환경을 넘어서 실제 배포 환경을 고려한 네트워크 개념에 대하여 학습했습니다.

사설 IP와 공인 IP : 내부 네트워크에서 사용하는 주소와 외부 인터넷에서 사용하는 주소의 차이점을 이해했습니다.
포트 포워딩 : 외부에서 들어온 요청을 내부 서버로 연결해주는 공유기의 핵심 설정 방법을 이해했습니다. 이는 추후 개인 서버나 테스트 환경을 구축할 때 필수적인 지식입니다.

---

정리

추상적인 아키텍처 개념을 실제 동작하는 코드로 구현해내는 경험을 했습니다. 리포지토리 패턴과 의존성 주입을 통해 각 코드의 역할과 책임을 명확히 분리하여 클린 아키텍처가 유지보수와 테스트에 왜 유리한지 느낄 수 있었습니다.

이후 완성된 루틴 기능의 백엔드 API를 기반으로 프론트엔드 UI 개발을 해야합니다. UI 컴포넌트를 완성한 후, TanStack Query를 이용해 실제 API와 연동하여 메인 대시보드 기능을 최종적으로 완성할 예정입니다.