- React - 컴포넌트 기반의 UI 라이브러리여서 컴포넌트 재사용성을 극대화시킬 수 있고 방대한 생태계를 가지고 있어 선택하였습니다.
- Typescript - 정적 타입 검사를 통해 런타임환경 전에 버그를 미리 예방할 수 있고, type을 지정하여 코드에 직관성을 향상시켜주어 선택하였습니다.
- Emotion - css in js 라이브러리로서 직관적인 스타일링을 할 수 있고, css props를 활용해 동적 스타일링이 가능하여 선택하였습니다.
- Recoil - 클라이언트 상태관리 라이브러리이고, 리액트 hook과 유사한 구조로 사용되기 때문에 상태값 흐름을 잘 파악할 수 있어 선택하였습니다.
- React-Query(v5) - 서버 상태관리 라이브러리이고, data 동기화 및 업데이트, 캐싱, 에러 핸들링을 도와주고 선언적인 로직을 만들 수 있어 선택하였습니다.
- Storybook - 컴포넌트를 독립적으로 개발하고 테스트 할 수 있어 프로젝트의 복잡성을 줄일 수 있고, 컴포넌트에 관한 문서화를 작성할 수 있어 선택하였습니다.
- Firebase - 백엔드 개발 없이 인증, 데이터베이스, 스토리지와 같은 환경을 쉽게 구축할 수 있어 선택하였습니다.
- 확장성과 재사용성을 고려하여 컴포넌트를 구현하였습니다.
- 사용자가 서비스를 이용할 때 지치지 않도록 UI / UX를 설계하였습니다.
- 클라이언트, 서버 상태를 각각 나누어서 관리하여 코드의 복잡성 줄이는 방향을 선택하였습니다.
- 프로젝트의 맞는 적절한 기술을 선택하여 진행하였습니다.
- 트리쉐이킹을 지원하는 라이브러리를 사용하여 bundle 사이즈를 최적화하였고, webpack-bundle-analyzer를 통해 모니터링 하였습니다.
- 회원가입, 로그인은 Firebase auth를 사용해 구현하였고, Form 요소를 controlled 방식으로 값 제어를 하였습니다.
- 초기 렌더링 시 Layout Shift 현상을 방지하고 사용자경험 측면에서 시작적 안정감을 가질 수 있도록 Sekeleton UI를 적용하였습니다.
- 재사용성 극대화 및 Props-drilling을 방지할 수 있는 Composite 컴포넌트를 사용하여 카드 추천 리스트를 구현하였습니다.
- 계좌 개설 신청 Form 요소를 controlled 방식으로 값 제어해서 구현하였습니다
- 입출금 리스트를 볼 수 있고 전체, 입금, 출금 각각 필터링 할 수 있도록 구현하였습니다.
- 신용정보 조회를 할 수 있고 조회를 하는 동안 사용자가 지치지 않도록 준비 중, 진행 중, 완료, 실패 일 때 각각 다른 UI를 보여주도록 하였습니다.