DDC는 각종 센서값을 수집해 중앙 관리 서버로 보내는 역할을 하는 소형 장비입니다. 과거의 DDC는 현장에서 관리자가 CLI로만 제어해야 했기에 연결할 노트북이 반드시 필요했습니다. 따라서 관리가 필요한 기계실 곳곳을 항상 노트북을 소지한 채 돌아다녀야만 했습니다. 이러한 불편을 해결하기 위해 DDC 전면부에 디스플레이를 장착해 웹앱으로 GUI를 제공하여 관리자는 노트북 없이 즉시 현장 제어를 할 수 있는 환경을 만들었습니다. 이 새로운 DDC를 통해 각 센서의 위치는 어디인지 부저를 울려 확인할 수 있고, 새로 장착한 센서의 값은 정상적인지 모니터링 가능하며 펌웨어 업데이트 또한 가능합니다. 현재 일부 빌딩에 배치된 상태이며, 새로 시공되는 건물에 적용하고 있습니다.

개발에 활용한 언어는 JavaScript이며, Node.js, Express.js 그리고 MySQL를 활용해 서버를 구성했습니다. MySQL 스키마는 이미 정의되어 있던 과거 DDC의 데이터베이스에 추가적으로 몇 가지의 테이블을 추가했습니다. 프론트엔드는 React, Sass에 상태 관리는 Mobx로 진행했습니다. OS는 Ubuntu 18.04 LTS 입니다.

첫 번째로 React로 화면 구성을 어떻게 해야 하고, 컴포넌트간 데이터 공유는 어떻게 해야하는지 직접 구현해보면서 알아갈 수 있었다는 것입니다. 클래스형 컴포넌트 내에서 ComponentDidMount, shouldComponentUpdate, componentWillUnmount 등의 함수 등을 통해 각 컴포넌트의 생명주기 내에서 데이터를 어떻게 다루고 보여줘야 하는지, Mobx를 통해 어떤 상태를 글로벌 영역으로 빼내 브라우저에 영속화 시켜야 하는지, 많은 데이터를 보여줘야 하는 페이지를 무한 스크롤 등을 통해 최적화 하는 방법 등 React를 활용한 프론트엔드 구현 전반에 걸쳐 알게 됐습니다.

두 번째로 쿼리 작성, 테이블 생성, 파일 송수신, 웹소켓 통신, 로그인/로그아웃 및 사용자 세션 관리 등 서버의 전반적인 기능을 직접 구현해볼 수 있었다는 것입니다. MySQL과의 커넥션은 어떻게 맺고 쿼리는 어떻게 보내는지, 클라이언트와 웹소켓 커넥션은 어떻게 맺고 유지하는지, 사용자의 세션은 어떻게 관리해야 하는지, 로그인 처리를 어떻게 해야 하는지 등의 서버의 전반적인 기본 요구사항들을 직접 구현하면서 서버 개발 지식 함양에 많은 도움이 됐습니다.

프로젝트를 구현하면서 다소 아쉬웠던 점 중 하나는 프론트엔드와 백엔드 모두 Layer를 적절히 나누지 못했던 것입니다. 당시 Node.js에서 Layered Architecture를 어떻게 구성해야 하고, 의존 방향은 어떻게 흘러야 바람직한지, React 프로젝트는 어느 구조로 구성해야 적절한지 잘 알지 못했기 때문에 로직과 데이터는 정리되지 않은 채 다소 난잡하게 산재해 있었습니다. 그저 기능 개발에만 집중했기 때문에 기능 단위로 모듈을 구성했고, 계층을 나누지 않았기에 프로젝트 막바지에 유지보수에 약간의 어려움을 겪었습니다. 계층을 적절히 나누지 못한 것이 계속 마음 한 켠에 남아 AI Bidder, Nara Cloud-BMS 에는 Presentational & Container 패턴을, SMAT-mi Ver.2에는 MVVM 패턴을 적용시키는 계기가 되기도 했습니다.