- 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
-
도입 이유
- 복잡한 페이지 이동을 잘 관리하기 위해서 다음 사항을 고려하였습니다.
- 시각화 측면: 페이지 이동의 흐름이 코드 레벨에서 쉽게 파악될 수 있도록 함
- 응집도 측면: 각 컴포넌트에 관련 로직이 흩어져있지 않고, 하나의 상위 컴포넌트에서 페이지 이동 흐름과 데이터를 모두 관리할 수 있도록 함
- 추상화 측면: 해당 로직이 어떤 일을 하는지 추상화해 가독성과 재사용성을 높임
- 복잡한 페이지 이동을 잘 관리하기 위해서 다음 사항을 고려하였습니다.
-
보다 자세한 내용은 블로그에 정리해두었습니다. 블로그 포스트 링크
-
OverView
-
도입 이유
- 하위 컴포넌트들을 조립해 구축해야 하는 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로 변경해 도입 중입니다.