2022.06 ~ 현재
의료진을 위한 환자 데이터 관리 서비스인 레어데이터의 처음부터 함께 하고 있습니다.
레어데이터 | Raredata
구현한 기능 및 인사이트
- react-query 사용하여 API 응답 데이터 저장 및 호출 최적화
- 쿼리 키 구조를 수립하여 캐시 무효화 전략 도입
- optimtic update로 자주 발생하는 데이터 업데이트를 반영하는 데에 성능 개선
- stale time, cache time 등의 옵션에 룰을 도입하여 중요도 및 업데이트 빈도 등에 따라 캐싱 기준 다르게 적용
- Suspense와 Error Boundary를 적용하여 관심사 분리
- query와 mutation을 custom hook화하여 로직 및 재사용성 개선
- 연구자 초대 및 가입과 비밀번호 재설정을 위한 이메일링
- mjml을 사용한 이메일 템플릿으로 이메일 클라이언트의 스타일링 호환성 문제를 해결
- 이메일 템플릿에서의 화이트 라벨링을 위해 로고 부분의 image path를 백엔드 개발자와 합의하여 동적으로 주입
- 전역 상태 관리
- recoil을 도입하여 불필요한 props drilling을 최소화
- 부모 컴포넌트에서 의존성을 가지지 않는 데이터를 전역에서 관리함으로써 코드 가독성 및 이해도 개선
- react-table로 엑셀 뷰 도입
- 주요 컬럼 sticky화
- 컬럼 drag and drop으로 이동
- react-virtual로 row, column에 virtualization 적용하여 렌더 성능 개선
- 성능 개선
- lighthouse 및 performance API로 성능 측정 및 개선점 파악
- 프로파일링을 활용하여 useMemo, useCallback, React.memo 적용
- 타입 명료화
- API 요청, 응답 인터페이스를 서버와 동일하게 가져감으로써 데이터 타입의 정합성 일치
- 프론트엔드에서 관리하는 타입도 UI 로직과 비즈니스 로직을 분리하고 필요하면 합성하는 식으로 재사용성 향상
- 로직 상에서 타입을 구체화하여 컴파일 시점에서 타입 관련 에러 처리
- atomic design 패턴 사용
- block을 쌓듯이 atom부터 molecule, template까지 하위 단계의 컴포넌트를 합성하는 식으로 재사용성 제고
- Box, VStack, HStack 등의 레이아웃을 위한 공통 컴포넌트로 코드만 봐도 어떤 레이아웃인지 추상화
- CI/CD
- Sentry와 Github Actions로 버그 트래킹 및 배포 자동화
- 빌드 툴로 Vite를 채택하여 번들링 크기 및 빌드 타임 개선
사용 기술
Javascript (ES6+), Typescript, React, react-table, react-query, Stitches CSS 등