센서 데이터 모니터링 서비스

개요

온습도, 적외선온도, 명도, 진동 등등 여러 센서에서 오는 다양한 형태의 데이터를 시각화하고 알람 설정 및 데이터를 관리할 수 있게하는 대시보드 형태의 웹 서비스입니다.

2021년 1월부터 PoC 단계에서 참가하여, React/TypeScript로 프로젝트 셋업부터 시작해서 지금까지 개발 및 운영해나가고 있습니다.

성과

그래프 로딩 속도 최적화를 통해 고객들이 많이 사용하는 기능에서 불편함을 없앴습니다. PoC에서 사용하던 API가 데이터가 쌓여감에 따라 느려져 모든 데이터를 받는데 까지 최대 약 13초까지 소요가 되었습니다. 백엔드 팀과 논의 하여 첫 화면을 보이기 위한 API와 전체 데이터 API를 분리하고, 프론트에서 첫 API를 통해 빠르게 그래프 화면을 보여준 후 이후에 사용자가 불편하지 않게 뒤에서 API를 추가로 불러오는 형태로 개선하였습니다.

• 그래프 화면 표시까지 걸리는 시간 약 13초 -> 3초

프론트엔드 CI/CD의 파이프라인 속도와 비용을 개선해나갔습니다. Playwright를 통해 image regression test를 진행하였는데, 테스트가 늘어남에 따라 CI/CD 테스트 시간과 서버 비용이 급격하게 늘기 시작하였습니다. 직렬 적으로 테스트하던 파이프라인을 병렬적으로 처리하게 변경하여 속도를 개선하였습니다. 또한 사용자가 많은 브라우저와 적은 브라우저를 확인하고 사용자가 적은 브라우저는 하루에 한번 테스트하여 개발팀이 확인할 수 있게 자동으로 PR을 생성하는 방식을 만들어 CI/CD 서버의 비용을 개선했습니다.

• image regression test 테스트 시간 약 12분 -> 3분
• 월 CI/CD 비용 약 400$ -> 200$

API 에러처리를 공통화하여 버그 발생을 줄였습니다. API들마다 발생하는 에러를 각 페이지 혹은 컴포넌트에서 매번 처리하다보니 API를 변경하는 경우 개발 중인 페이지 외에서 문제가 생기는 등, 팀원들이 고민이 생기게 됩니다. 이러한 고민이 생기지 않게 공통적으로 처리해야 하는 에러와 직접 처리해야 하는 에러를 분리하여, 공통적인 에러는 Redux-Thunk를 통해 스토어에 저장되는 경우 스토어를 구독하고 있는 핸들러가 처리를 하게하여 개발을 원할하게 할 수 있도록 하였습니다.

• Redux 스토어에 생기는 에러를 처리해주는 공통 핸들러를 만들어 에러 처리 공통화

사용 기술

React, TypeScript, Redux, Tanstack-Query(React-Query)

웹툰 커뮤니티 플랫폼

웹툰 플랫폼들의 데이터를 모아 자체 점수를 제공하고 좋아하는 웹툰을 투표할 수 있는 웹툰을 좋아하는 사람들을 위한 커뮤니티 플랫폼을 만들었습니다.

Next.js를 AWS에 배포하여 개발, QA, 운영 환경을 구축하였습니다. 여러 환경을 구축해두어 개발자들이 바로 운영 환경에 배포하지 않게 되어 배포가 좀 더 쉬워졌습니다.

• Serverless Framework를 통해 AWS Lambda@Edge로 배포

React-Native를 통해 웹뷰를 구축했습니다. 구글 플레이 스토어에 배포하여 실제 사용자들이 다운로드 받을 수 있게 하였습니다.

• react-native-cli를 통해 프로젝트를 셋업하고 앱을 플레이 스토어에서 심사과정에서 생기는 문제들을 해결하고 배포함

Mixpanel, Hotjar, Google Analytics를 이용해 사용자들이 어떤 화면과 어떤 기능을 좋아하는 지 데이터를 수집하여 기능 추가 및 개선에 사용할 수 있게 기반을 마련했습니다.

• Mixpanel에 특정 화면이나 버튼의 이벤트를 전송해 데이터를 수집

Sentry를 이용하여 프론트엔드에서 발생하는 에러 로그를 수집했습니다. QA시에 발견 못 하는 버그들을 잡기 위해 Sentry를 사용하여 사용자들이 겪고 있는 에러들을 확인하고 버그를 고쳐나갔습니다.

• Senrty에서 발생하는 에러 로그들을 슬랙 웹훅으로 연결하여 팀원들이 확인할 수 있게 함

웹 레포: https://github.com/depromeet/antoon-web
앱 레포: https://github.com/depromeet/antoon-app
프로젝트 설명 ppt : https://www.behance.net/gallery/147262623/-ANTOON-l-Webtoon-Community-Service?locale=ko_KR