• Overview
• Tech stack
• Getting started
• Description
• Point
• Convention

트렐로를 모티브로 해 드래그앤 드랍이 가능한 칸반보드를 구현했습니다.

카드를 드래그해 카드목록에서의 위치를 변경할 수 있습니다.

각 카드와 카드목록을 추가, 수정, 삭제할 수 있습니다.

start project

yarn start

run test

yarn test
yarn run cypress open

start storybook

yarn storybook

카드 조회	로그인 페이지 리다이렉트
카드 조회 요청 실패 시 error fallback UI 표시	401 에러 발생시 로그인 페이지 리다이렉트

카드 수정, 삭제, 추가	카드 목록 수정, 삭제, 추가

드래그앤 드랍	모달

• Vite는 번들을 생성하는 과정이 필요하지 않아 서버의 시작 속도가 빠르고, 개발자 역시 번들 없이 모듈화된 컴포넌트의 수정사항을 브라우저로 확인 가능하다는 장점이 있어 선택했습니다.
• 관련해 작성한 블로그 글 링크

Overview

• 컴포넌트 재사용성을 높이고 요구사항에 유연하게 대응할 수 있도록 Compound component 방식으로 설계하였습니다.
• Compound component 패턴에서는 여러 작은 하위 컴포넌트가 각각의 역할을 분담하며, 이들을 조립해 상위 컴포넌트를 만들어낼 수 있습니다. 또한 하위 컴포넌트들이 상위 컴포넌트 내부의 상태를 공유하면서 비즈니스 로직과 사용자 인터페이스와 관련된 부분을 구분하게 됩니다.
• Sider와 Drawer 컴포넌트의 공통 영역을 Compound component 방식을 사용해 재사용성을 높였습니다.
• *현재 다른 영역들도 리팩토링을 통해 적용중입니다.
• 도입 이유
  • 자율성: 변화에 유연하게 대응해야 하며 재사용성을 높여 조립하듯 ui를 구성해야 하는 영역은 해당 방식을 사용해 컴포넌트 합성의 자율성을 높일 수 있습니다.
  • 관심사 분리: 하나의 컴포넌트 안에 많은 Props를 한번에 전달하지 않고 서브 컴포넌트에 적절히 분배해 관심사를 분리할 수 있습니다.
• 관련 블로그 글 링크

• OverView

  • 칸반보드 프로젝트에서 사이드바의 메뉴 영역의 페이지 이동을 관리하기 위해 useFunnel 커스텀 훅을 만들어 적용하였습니다.

  • 다양한 메뉴를 클릭하면 여러 뎁스의 다양한 페이지로 이동할 수 있는 영역입니다.

• 도입 이유

  • 복잡한 페이지 이동을 잘 관리하기 위해서 다음 사항을 고려하였습니다.
    • 시각화 측면: 페이지 이동의 흐름이 코드 레벨에서 쉽게 파악될 수 있도록 함
    • 응집도 측면: 각 컴포넌트에 관련 로직이 흩어져있지 않고, 하나의 상위 컴포넌트에서 페이지 이동 흐름과 데이터를 모두 관리할 수 있도록 함
    • 추상화 측면: 해당 로직이 어떤 일을 하는지 추상화해 가독성과 재사용성을 높임

• 보다 자세한 내용은 블로그에 정리해두었습니다. 블로그 포스트 링크

• OverView

  • Background properties 영역의 특성에 따라 일관된 아키텍처를 통한 UI 작업 및 컴포넌트 설계를 협업을 고려해 적용하였습니다.

  • 협업을 통해 개발하는 상황을 가정하고, 필요한 요구사항에 따른 컴포넌트 계층을 우선 정의해 페이퍼 프로토타입으로 검증 후 구현하였습니다.

• 도입 이유

  • 하위 컴포넌트들을 조립해 구축해야 하는 ui를 다른 개발자들과 협업해 작업할 때, 아키텍처를 어떻게 설계하여 일관성을 유지하며 작업해나갈지를 고려하였습니다.

• 관련 블로그 글 링크

• msw의 delay 메서드를 사용해 API 요청에 대한 응답이 지연될 경우를 고려하여 skeleton 및 progress UI를 추가했습니다.

• React-query의 suspense option, React.Suspense를 사용하여 데이터에 대한 로드 상태를 선언적으로 처리할 수 있도록 코드를 작성했습니다.

• ErrorBoundary, QueryErrorResetBoundary를 활용해 에러 핸들링 및 쿼리 리셋 기능을 구현했습니다.

• modal props 타입 자동 추론이 가능하도록 했습니다.
• Context API를 사용해 클라이언트 전역 상태에 대한 관심사를 분리하고, 깔끔하게 모달 상태만을 관리할 수 있도록 했습니다.
• 여러 모달을 동시에 띄우고 닫을 수 있도록 useModal 훅을 만들어 사용하는 컴포넌트에서 모달 이름과 props만 전달해 간편하게 관리할 수 있도록 구현했습니다.
• loadable을 사용한 코드 스플리팅을 사용해 성능을 고려한 코드를 작성했습니다.
• 관련 블로그 글 링크

• Overview
  • unit test와 e2e test를 작성했습니다.
  • 실무에서 가장 필요한 테스트가 무엇인지를 고민하며 도입했습니다.
  • 테스트 코드 작성이 용이하도록 느슨한 결합도를 갖는 코드를 작성했습니다.
  • *좋은 테스트 코드 작성을 위해 학습하며 추가 작업을 진행하고 있습니다.
• event logging test
  • 실무에서 비즈니스 로직 외에도 중요하게 고려해야 할 점이 이벤트 로깅입니다. 이벤트 로깅을 정확하고 안전하게 테스트할 수 있도록 코드의 결합도를 낮추고 의존성을 주입하는 형태로 로직을 분리했습니다. 해당하는 이벤트 로그 발송 횟수와 이벤트명을 유닛테스트로 테스트하도록 했습니다.
  • 실무에서 여러 툴로 동시에 로그를 수집하거나, 이후에 다른 새로운 툴에 대한 로그 수집이 요청되는 경우를 고려하여 별도의 구현체를 만들고 유지보수가 용이하도록 작업했습니다.
• 자세한 내용은 블로그에 정리해두었습니다. 블로그 글 링크

• e2e test 자동화: pr 생성 및 push할 때 자동 테스트 되도록 설정
• unit test 자동화: husky를 사용해 precommit을 설정했습니다.

• 초기에는 Git-flow를 사용했으나, trunk-based-development로 변경해 도입 중입니다.

📘 Commit convention