기업협업 1주차 2번째 과제 - 감지 센서 관리 프로그램 만들기

✅ 과제

<감지 센서 관리 프로그램 만들기>

 

1. 첫번째 페이지

• 목데이터를 이용해서 센서 정보가 나열된다.
• 데이터가 오름차순, 내림차순 정렬이 가능하며 필터 기능도 가능하도록 구현한다.
• hover효과를 구현하고, 센서데이터의 배터리가 20퍼센트 아래면 빨간색으로 표시한다.
• 반응형으로 구현한다.

2. 두번째 페이지

• API를 통해 받아온 데이터로 온도, 습도, 기압 세가지 그래프를 표시한다.
• 날짜를 선택하여 특정 날짜의 데이터(24시간)을 확인할 수 있다.
• x축 확대/축소 기능을 구현한다.
• 데이터를 csv로 export할 수 있다.
• 온도 그래프는 온도 값에 따라 색을 다르게 표시한다. (선택사항)

 

🗓 진행 기간 및 팀원

- 2022.10.07 ~ 2022.10.09(3일)

 

- 프론트엔드 5명

 

🛠 적용 기술

• JavaScript
• React.js
• react-router-dom
• styled-components
• fortawesome
• chart.js (차트 라이브러리)
• react-chartjs-2
• eact-zoom-pan-pinch (확대 축소 버튼 라이브러리)
• react-calendar (달력 라이브러리)
• react-datepicker
• date-fns
• moment
• react-csv (csv 라이브러리)
• gh-pages (배포라이브러리)

 

😀 내 역할

두번째 페이지

기온 그래프

 

 

습도, 압력 그래프

 

 

마우스 휠로 확대 가능, 아래의 버튼으로 화면 자체를 확대할 수 도 있다.

 

 

export 버튼을 누르면 csv 파일이 다운로드 됨

• 차트
  • 데이터에 기반한 기온, 습도, 압력 그래프
  • 온도에 따라 기온 그래프 색상이 다르도록 구현

• export
  • export 버튼 UI
  • export 버튼을 클릭하면 csv 파일 다운로드 기능 
• UI
  • 페이지 전체 레이아웃

 

 

👍 소감

문제 제시가 추상적이라서 알아서 해결하게 되는 부분이 있었다. 디자인이 다 있던 프로젝트들과는 다른 느낌이었다. 새로운 라이브러리를 접해보고 싶어서 그래프를 맡았는데 재밌었고 하길 잘했다고 생각했다. 마지막에 팀원들 모두 끝났다고 하고 마무리 지었는데 마음에 안차서 나는 조금 더 수정하고 재배포 하겠다고 했다. 1페이지 UI도 2페이지랑 맞춰서 색깔과 버튼 스타일 고치고, 그래프 확대 버튼은 요소 자체를 확대하는 기능이라서 그래프에 마우스 휠 그래프 확대 기능도 추가했다. 맡은 역할은 금방했는데 다른 팀원 도와준거랑 전체적으로 수정하는 것 때문에 시간을 비효율적으로 많이 쓴 것 같다..🤔

 

🤔새롭게 배운 점

차트라이브러리와 csv라이브러리라는 새로운 라이브러리를 접해볼 수 있어서 좋았다. 받아온 데이터를 원하는데로 이용하기 위해서 고민하는 게 알고리즘을 푸는 것 같았다. 문재해결능력 향상을 위해서 알고리즘을 열심히 풀어야겠다.