[아두이노] IoT 시스템 기능 - 프론트엔드 설계

<본 블로그는 엘리스 IoT 1를 참고해서 공부하며 작성하였습니다 :-)>

(코드는 저작권상 공유 안됩니당!!)

 

🥑 프론트엔드 설계 

프로젝트 기획 : 디자인과 개발의 기준 설정

웹/앱 설계 : 디자인과 개발을 위한 구체적인 설계

디자인 : 기획/설계 기반 디자인 작업 및 리소스 제작

개발 : 기능 구현 및 배포/운영 환경 구축

 

 🍔프로젝트 협업 툴

: 소통 및 기록을 위한 다양한 툴

: 화면, 흐름, 특정 포인트에서 기능과 정책을 보다 쉽게 전달

EX) 피그마, Adobe XD, 스케치, 미로, 노션

 

🥑 레이아웃 설계

: 그림이나 글을 제한된 공간에 효과적으로 정리하고 배치

: 렌더링되는 컴포넌트 레이어를 배치 

: MUI 라이브러리에서 제공하는 기본 컴포넌트를 최대한 활용

히스토리 컴포넌트
: 디바이스 조회 후 드롭다운 메뉴 생성
: 날짜 선택 상태 관리

 

🥑 컴포넌트 설계

디바이스 실시간 데이터 조회 -> map 함수로 디바이스 상태 생성 -> 실시간 데이터 조회 인터벌 생성 -> 언마운트 시 인터벌 삭제 

 

🍔 실시간 대시보드 컴포넌트

- polling : 업데이트가 필요한지 서버에 주기적으료 요청하여 확인 후 업데이트 필요한 상황이 되면 데이터 조회 API로 데이터 업데이트

- pulling : 클라이언트가 주기적으로 데이터를 요청해서 업데이트

- websocket : 서버와 연결 후 데이터 수신 대기