Daas 운영 지원 도구 개발기 (Material-UI Template)
이 글을 기본적인 ReactJS 내용 및 개발 환경 구축은 다루지 않습니다. Daas 운영 지원 도구 목적, Material-UI를 사용한 이유, 운영 지원 도구 페이지 만드는 방법, 소소한 팁에 대한 내용을 다룹니다.
Daas 운영 지원 도구 목적
늘어나는 배송 물량으로 인해 물류팀에서는 실시간 데이터 조회와 대한 다양한 데이터 시각화가 필요했습니다. 이미 BI 도구로 훌륭한 ‘Holistics’를 사용하고 있지만 실시간 데이터를 기반의 대시보드를 지원하지 않았고 물류팀의 요구사항을 풀어주기 위해서 다소 어려운 부분이 있었습니다.
물류팀의 요구사항
- 실시간 데이터 조회
- 조회된 데이터를 클릭하면 클릭한 데이터의 상세 정보로 이동
- 배송 라이더 정산 시스템의 간소화
- 배송 라이더 관리 (등급, 블랙리스트 등)
- 지도 기반으로 배송 아이템 데이터를 시각화 (Holistics도 맵 기반의 데이터를 제공하지만 상세 정보는 볼 수 없음)
아주 무모하지만 물류팀의 업무 효율 개선과 새로운 기술 및 도구를 활용해 보고 싶어 제가 직접 운영 지원 도구를 개발하기로 결정했습니다.
(무모한 도전의 시작..)
Daas 운영 지원 도구 주요 기능
운영 지원 도구는 TypeScript 언어를 기반으로 제작되었으며, Backend는 NestJS, Frontend는 React(MUI)로 개발되었습니다. 그리고 많이 사용하는 REST대신 GraphQL을 사용했습니다.
위의 기술 스택을 사용하게 된 이유는 이전 회사에서 비슷한(Backend 제외) 기술 스택으로 Admin 도구를 개발한 경험이 있습니다.
주요 기능
- 버니(배송 라이더) 정산 간소화
- 버니 정보 조회
- 배송 물품 실시간 조회 (관제)
- 배송 박스 실시간 조회 (관제)
- 배송 물품 포인트맵 개선 (개발 중)
Material-UI를 사용한 이유
Material-UI는 React Component 형태로 제공하는 UI Framework
훌륭한 문서화
- https://mui.com/material-ui/getting-started/installation/
- 예제를 중심으로 설명이 잘되어있으며 패키지 설치만으로 바로 적용 가능
전문 Front-end 개발자가 아니여도 개발 가능
- 필자도 전문 Front-end 개발자가 아니지만 Material-UI에서 제공해주는 Component로 전문가가 만든 느낌의 화면 구성 가능
유/무료 Template 지원
- 개발 속도 향상
- 다양한 형태의 Template 지원
꾸준한 업데이트 및 인기있는 React UI Framework 중 하나
새로운 도구에 대한 도전
- 필자는 데이터, 클라우드 엔지니어지만 서비스에 대한 이해를 높이기위해 어렵고 힘들 것 같지만새로운 것에 대한 도전
운영 지원 도구 페이지 만드는 방법
Typescript로 작성하기위해 https://mui.com/store/items/minimal-dashboard/ 에서 Standard Plus로 구매했으며, 아래의 내용은 Minimal Template에서 페이지 만드는 방법입니다.
Minimal — Client & Admin Dashboard 유료
Minimal Free — Client & Admin Dashboard 무료
Minimal Template를 사용한 이유
1.문서화가 잘되어 있음
2.다양한 Component (그래프 차트 포함)
- 각 Component에 대해 문서화가 되어있고 그래프 차트가 다양함
- Mimimal Template에 있는 그래프 차트 적용한 운영 지원 도구
3.Typescript 기반의 Template
4.모든 페이지에 Responsive Web 적용
- Material-UI에 기본적으로 적용되어 있지만 Minimal에서 만든 컴포넌트에도 적용되어 있음
5.예시 페이지가 다양하고 코드 가독성이 좋은 편
- 다양한 예시 페이지가 존재하며, 코드 가독성도 좋은편
- 다양한 예시 페이지 (왼쪽 메뉴 참고)
메인 페이지에 새로운 페이지 만들기
src폴더 내에 있는 폴더 기준으로 설명하겠습니다.전체적인 구조는 위의 ‘Minimal Free — Client & Admin Dashboard 무료’를 다운받고 진행하면 됩니다. 그리고 무료의 경우 Typescript는 아니니 참고해서 봐주시기 바랍니다.
1.새로운 페이지 만들기
2.Route 추가
- index.tsx → paths.ts 순서로 추가
- paths.ts 는 추후 다른 컴포넌트에서 URL 불러올 때 활용
3.메인 메뉴에 ‘메뉴’ 추가하기 (navbar config 설정)
4.생성된 페이지 확인
React(Material-UI) 소소한 팁
GraphQL을 사용하는 경우 GraphQL Code Generator(codegen) 사용 권유
- 오타 방지 (입력 자동화 가능)
- GraphQL 스키마에 대한 타입 정의
- codegen docs → https://www.graphql-code-generator.com/docs/getting-started
useForm 사용 권유
React에서 From을 쉽게 만들기 위한 라이브러리
- Typescript를 기본적으로 지원
- 기존의 Form 데이터를 다루는 코드보다 코드의 양이 적음
- Fast Mounting
사용 방법
useForm
yarn build 시 에러
- yarn build 시 ‘public/index.html’ 문법 문제 일 수 있음 (특히 href 주변 오타)
해결 방법
- ‘public/index.html’에 문법적으로 문제가 없는지 확인
글을 마무리하며
Daas 운영 지원 도구 개발기 (Material-UI Template)에 대해 간단히 알아보았습니다. 다음은 Daas 운영 지원 도구에 Google maps를 사용하는 방법에 대해 알아보겠습니다.
많이 부족한 글을 읽어주셔서 감사합니다.
