AirQualityTool 디자인 재작업

2018년 8월에 아두이노를 이용해서 웹에서 집의 온도, 습도, 공기품질을 확인할 수 있는 프로젝트를 진행하였습니다.

당시에는 웹디자인을 부트스트랩으로 제작하였으며 각 그래프들을 한 페이지에 표시해 보기 편하지는 않았습니다.

그래프의 가독성을 조금이나마 높이고자 디자인을 변경해보았습니다.

기존에 쓰던 부트스트랩을 안쓰고 Bulma.io를 이용하였습니다.

Nuxt.js를 이용하여 프론트엔드를 제작하였으며 Express로 만들어진 백엔드를 JavaScript에서 TypeScript로 변경하였습니다.

본문과 사이드바를 나누어주었습니다.

사이드바는 컴포넌트로 분리하고 어느 페이지에 가도 항상 표시되기 때문에 layouts/default.vue에 넣어두었습니다.

마지막으로 본문에 그래프를 넣어 완성하였습니다.

온습도 센서가 오차율이 큰건지 값 변동이 심하긴 했습니다. 기회가 된다면 더 좋은 센서로 바꿔보는걸로...

대기오염 기준도 PM2, PM10으로 나누어 다시 작성해주었습니다. (WHO 기준을 참고함)

디자인 이후 Docker 이미지를 만들어 관리하기 편리하게 만들었습니다.

Docker로 열고 리버스 프록시 같은걸로 연결시켜주면 되니 간편합니다 :D

GitHub: https://github.com/SkyLightQP/AirQualityTool