검색 서비스 코드 품질 개선 여정: 민첩하고 유연한 컴포넌트 설계

기존 검색 서비스 코드의 문제점 분석

• 초기 PC 코드는 추상화 및 재사용을, 모바일 코드는 컬렉션별 독립 설계를 따랐으나, 63개의 컬렉션 증가로 UI 일관성 저하 및 관리 복잡성이 증대되었습니다.
• 중복 코드 제거 시 강한 의존성 발생, 미제거 시 관리 포인트 증가로 민첩성과 유연성을 갖춘 구조 개선이 시급했습니다.
• 검색 도메인의 빠른 변화에 대응하기 위해 변화에 최소 비용으로 대응 가능한 아키텍처 수립이 목표였습니다.

컴포넌트 재설계 및 책임 분리

• 리스팅 컴포넌트 책임 분리: 상품명, 가격 정보, 배송 정보 등 정책의 최소 단위로 컴포넌트를 추상화하여 명확한 책임을 부여했습니다.
• Props 설계 원칙: item 전체 전달(4개 이상 props 시)과 필요한 값만 명시적 전달(하위 컴포넌트) 방식을 병행하여 유연성과 명확성의 균형을 맞췄습니다.
• 상품 정보 노출 책임: CollectionVisibilityManager를 도입하여 상품 종류 및 탭별 노출 여부를 일관되게 제어하고, 불필요한 코드 제거를 용이하게 했습니다.
• 조건부 렌더링: 복잡한 조건은 부모 컴포넌트에서, 독립적인 조건은 자식 컴포넌트 내부에서 처리하는 상황에 맞는 설계를 적용했습니다.

컬렉션의 확장 가능성 확보 전략

• 중복과 분리의 균형: 리스팅과 완전히 동일한 UI를 가지지 않는 컬렉션은 중복 코드가 있더라도 새로운 컴포넌트를 만들어 변경 용이성을 확보했습니다.
• ItemPrice와 같은 최소 단위 요소는 재사용하되, 컬렉션 고유 정책에 따라 필요한 경우 새 컴포넌트를 생성하는 방식을 채택했습니다.
• Wrapper 컴포넌트 도입: Thumbnail, HeadLine, GridRow, GridColumn 등 레이아웃 마크업을 공통화하여 재사용성 및 유지보수성을 강화했습니다.
• GridColumn 예시처럼 클래스명 및 태그 구조를 동적으로 관리하여 다양한 레이아웃 요구사항에 유연하게 대응할 수 있도록 설계했습니다.

계층 간 책임 명확화 및 의존성 감소

• PC 코드 계층 구조: MobX 기반의 repository, model, store, view로 구성, Model에서 데이터 정제 및 상태 할당을 수행했습니다.
• 모바일 코드 특징: Model 계층 없이 React Hooks를 활용하여 컴포넌트 내부에서 데이터를 독립적으로 처리, 단순하고 독립적인 구조를 지향했습니다.
• Custom Hook 활용: 동영상 재생, 타이머 등 복잡한 로직을 Custom Hook으로 분리하여 재사용성, UI/로직 책임 분리, 테스트 용이성을 증대시켰습니다.
• 불필요한 의존성과 코드 복잡성을 줄여 유지보수성과 확장성을 확보하며, 검색 컴포넌트의 품질을 향상시켰습니다.