pair2

👩‍💻지성경

• 역할: 메인 페이지 상품 리스트(이미지 캐루셀), 게시판 리스트, 게시글 상세 페이지(댓글 추가/삭제/수정, 페이지네이션(x))

👩‍💻함정우

• 역할: 헤더(nav bar), 푸터, 상품 목록 페이지, 상품 상세 페이지(장바구니, 검색, 페이지네이션, 댓글 추가)

🖼️레퍼런스

https://www.glossier.com/
위 페이지의 메인 페이지 디자인을 참고하여 전체적인 UI 틀을 잡은 후, 게시판 및 상세 페이지를 추가하여 프로젝트를 진행하였습니다.

💻구현 결과

• Main Page
  • 이미지 캐루셀
  • 게시판(게시글 상세 페이지, 댓글 추가/수정/삭제)
  • nav bar (상품 목록 페이지로 이동 가능)
    
  
  
• Product List Page
  • 카테고리별 상품 목록 페이지 연결
  • Add 버튼 클릭 시 장바구니에 추가 (상품 상세 페이지도 동일)
  • Logo 클릭 시 메인 페이지로 이동 (상품 상세 페이지도 동일)
    
  
  
• Product Detail Page
  • 개별 상품 클릭 시 각 상품에 해당하는 상품 상세 페이지로 이동
  • 리뷰 게시판 (댓글 추가, 검색, 페이지네이션)
    

⚙️관심사 분리 (Separation of Concerns)

이번 프로젝트에서 저희는 관심사 분리를 적용하여 코드의 유지 보수성과 가독성을 높이고, 기능을 재사용하기 쉽게 설계하기위해 노력했습니다.
각 컴포넌트와 모듈은 독립적으로 구성되어 하나의 역할을 수행하며, 서로 간의 결합도를 낮추는 것을 목표로 하였습니다.
저희가 적용하려고 했던 관심사 분리 원칙은 다음과 같습니다:

• 컴포넌트와 모듈의 단일 책임 원칙 (Single Responsibility Principle)
• 의존성 역전 원칙 (Dependency Inversion Principle)
• 인터페이스 분리 원칙 (Interface Segregation Principle)

각 컴포넌트와 모듈은 특정한 기능을 수행하고, 서로 간의 의존성을 최소화하며, 추상화를 통해 유연성을 어느 정도는 구현하였습니다. 이를 통해 코드의 가독성과 유지 보수성을 향상시키고, 기능을 추가하거나 변경하기 쉽게 만들어 보았습니다.

🛠️의존성 주입 (Dependency Injection)

저희는 DI에 대해 조사해보면서, DI를 사용한 설계를 통해 컴포넌트 간의 결합도를 낮추고, 테스트 가능한 코드를 작성할 수 있으며, 유연하고 확장 가능한 구조를 유지할 수 있다는 것을 알 수 있었습니다.
이러한 의존성 주입의 장점을 활용해보기 위해 이번 프로젝트에서는 주로 다음과 같은 방식으로 의존성 주입을 구현하였습니다:

• React 컴포넌트에서 useContext, redux의 initialState를 사용하여 의존성을 주입을 시도하였습니다.
• 비즈니스 로직을 외부로 분리하여 컴포넌트 내부에 의존성을 주입하는 형태로 설계해보았습니다.

📋이번 프로젝트에서 사용해본 라이브러리 목록

1. faker.js (게시글, 상품 상세 정보 생성)
2. React BootStrap
3. Grommet

• 시도했으나 실패한 라이브러리 목록

4. Slick (실패하여 직접 구현)
5. Tailwind CSS

😢부족했던 점

1. 급하게 프로젝트를 진행하느라 노션을 사용하지 못하였음
2. 프로젝트 기간 내에 구현하지 못한 기능이 있음
3. 기능 구현을 우선으로 하여 코드 리팩토링을 진행하지 못하였음
4. 코드 리뷰 메세지를 컨벤션에 맞추어 제대로 작성하지 못하였음