개요
인트세인에서 수행한 인턴 관련 문서입니다.
사용 기술
•
Frontend : React.js, Next.js, TypeScript
•
Backend : Node.js, Express, MariaDB
•
etc : Git, Gitlab, Figma Design
수행 내용
온/습도 센서 관리 웹사이트 개발•
Setting
◦
tailwindCSS design system 구성
◦
API 명세 작성 후 구현
•
센서 데이터 통신 환경 구성
◦
센서와의 serial 통신 테스트 및 프로토콜 분석 후, Node.js socket 통신을 이용한 데이터 수신 및 파싱 환경 구성 (Node.js)
▪
데이터베이스 스키마 및 CRUD 설계 후 API 구현
•
센서 관리 페이지 개발
◦
기기 정보 및 이미지와 함께 관리할 기기 등록 기능 구현
◦
클러스터링 기반 기기 설치 위치 지도
▪
요구사항에 알맞는 기기 위치 클러스터링 기능 구현
▪
각 기기의 설치 위치 정보를 Tree 구조로 관리
•
Tree 탐색 및 각 Node 관련 변수와 함수를 Class 형태로 구현
•
Recoil을 이용한 전역 상태 관리
◦
기기 관리 대시보드
▪
전체 데이터 리스트, 평균/누적 데이터 리스트 등 Table Viewer 및 CSV 다운로드 기능 구현
▪
react-chartjs-2 를 이용한 카테고리별 분/일/월/년 단위 그래프 작성 구현
‘분’ 단위 그래프 : 데이터가 존재하지 않는 시각에도 ‘데이터가 없음’ 상태를 확인할 수 있게 됨
•
react-datepicker 를 이용한 그래프 데이터 기간 설정 기능 구현
•
기간에 맞는 데이터를 보여줄 수 있도록 시계열 데이터 형태로 가공 (결측치 처리)
▪
기기 정보를 Drag And Drop하여 설치 위치 이미지 위에 표시하는 기능 구현