대시보드 개발 하기 전 요구하는 언어나 프레임워크가 없었기 때문에 서버만 Spring Boot로 정해두고 통신 방법, 프레임워크, 언어, 라이브러리 등을 결정해야했다.
통신 방법
먼저 대시보드는 데이터베이스의 가장 최근 값을 서버에서 클라이언트에 지속적으로 보내줘야한다.
실시간으로 데이터를 주고 받을 수 있는 방법은 크게 3가지 방법이 있다.
1. Polling
클라이언트가 주기적으로 서버에게 데이터를 요청하는 방식으로 HTTP 프로토콜을 사용한다.
클라이언트가 일정한 간격으로 서버에 요청을 보내고, 서버는 새로운 정보가 있는지 확인한 후 응답을 보내는 방식이다.
이 때, 클라이언트는 주기적으로 새로고침을 수행해서 서버에 데이터를 요청하는 형태로 동작하기 때문에 실시간 통신을 구현할 수 있다.
하지만 불필요한 요청이 많아지고 실시간 통신이라고 하기에 부족함이 있을 수 있다.
2. SSE(Server-Sent Events)
단방향 통신으로, 서버에서 클라이언트로 실시간 업데이트를 보낼 수 있다.
HTTP 기반으로 동작하며, 서버와 지속적인 연결을 유지한다.
단방향 통신이기 때문에 새로운 게시물, 댓글, 좋아요 등 실시간 알림 기능에 사용하면 페이지를 새로고침하지 않고도 업데이트 된 데이터를 볼 수 있다.
3. WebSocket
양방향 통신을 지원하는 프로토콜로, 클라이언트와 서버 간 양방향 실시간 통신이 가능합니다.
웹소켓은 하나의 TCP 연결을 열고 그 연결을 계속 유지하면서 데이터를 주고받기 때문에 폴링보다 효율적이다.
한번 연결된 후에는 클라이언트와 서버 간에 언제든지 데이터를 주고받을 수 있기때문에 실시간 통신에 적합하다.
나는 데이터베이스에 매 초 쌓이는 데이터를 실시간으로 클라이언트에 전송해야 하고, 일부 제어 기능도 필요했기 때문에 웹소켓 통신을 선택했다.
라이브러리
구글에서 대시보드의 예시를 찾아보면서 직접 구현하기엔 어려운 레이아웃, 그래프 관련 라이브러리는 필수로 사용해야겠다는 생각이 들었다.
시간이 별로 없었기 때문에 ChatGPT와 구글에서 그래프에 많이 사용되는 라이브러리가 뭐가 있는지 한 번 훑어봤다.
✔️ recharts
Recharts는 React용으로 만들어진 간단하고 커스터마이즈가 용이한 차트 라이브러리이다. 다양한 종류의 그래프와 차트를 지원하며, 사용하기 쉽고 자유로운 커스터마이징이 가능하다.
✔️ react-chartjs-2
chart.js를 React 애플리케이션에 쉽게 통합할 수 있도록 도와주는 래핑된 라이브러리이다. Chart.js는 다양한 종류의 그래프를 생성할 수 있는 강력한 라이브러리로, react-chartjs-2를 통해 React 앱에서 쉽게 사용할 수 있다.
✔️ chart.js
JavaScript로 동작하는 간편하면서도 강력한 경량 차트 라이브러리로 대부분의 최신 브라우저에서 잘 동작하며, 필요한 최소한의 리소스로 빠르게 차트를 렌더링할 수 있다.
공식 문서와 예제 코드를 살펴보고 적용해보면서 chart.js 라이브러리를 선택했다.
리액트에서 사용하기에 react-chartjs-2가 최적화 돼있다고는 하나, 나는 간단한 그래프를 그리는 걸로 충분했고 무엇보다 공식 문서가 잘 정리되어 있는 chart.js를 사용하기로 했다.
프레임워크
프론트 개발은 html, css 등 기본적인 것만 알고 있었기 때문에 주로 사용하는 프레임워크 등을 찾아봤는데 결론적으로 react와 javascript를 사용했다.
현재 프론트 개발에 react를 가장 대중적으로 사용한다고 하며 부트캠프를 진행할 때도 프론트 팀이 react를 사용했다는 것은 알고 있다. 그만큼 많은 개발자들이 활발하게 활동하는 커뮤니티가 형성돼 있어서 문제에 대한 해결책이나 다양한 라이브러리, 도구들이 쉽게 얻을 수 있다는 장점이 있다.
단기간에 많은 정보가 필요했기 때문에 react를 선택할 충분한 이유가 됐다고 생각한다.
