프론트엔드 개발 (파트 리드)

한국농어촌공사 협업 시스템 구축

고객의 더 나은 협업 경험을 위한 노력

6,000명 사용자 규모 B2B 협업 시스템

프로젝트 개요

2024.01 ~ 2024.09

10명

프론트엔드 개발 (파트 리드)

약 6,000명 사용자 규모 협업 시스템에서 MobX 기반 3-Layer 구조 설계/공통화로 유지보수성을 높이고, 번들 최적화로 조회 성능을 개선한 프로젝트

ReactTypeScriptMobXWebpack5Yarn Berry (PnP)Faro/Grafana

프로젝트에서 해결한 주요 과제와 솔루션

복잡한 화면(상세/칸반/간트)에서 local state 폭증과 props drilling으로 유지보수가 어려웠습니다

MobX 기반 상태 관리와 View–Store–Repository–DTO 아키텍처를 설계하여 관심사를 분리하려고 했습니다.

한국농어촌공사 협업 시스템 구축의 핵심 기능과 인터페이스

드래그앤드롭으로 상태를 변경하는 칸반보드 UI

프로젝트를 통해 달성한 성과와 배운 점

55%

성능 개선

6000+

사용자 규모

20+

다이얼로그 구현 종류

복잡한 화면군을 Store 중심 구조로 표준화해 유지보수성과 확장성을 개선했습니다.

번들 구조를 개선하고 트리 쉐이킹을 적용해 초기 로딩 체감 성능을 크게 끌어올렸습니다.

Dialog 공통화로 변경 대응 비용을 낮추고 일관된 UX를 제공했습니다.

프로젝트에 사용된 기술과 도구

ReactTypeScriptMUIMobx

Webpack 5Yarn Berry (PnP)

FaroGrafana