🙇 인사 및 소개

안녕하세요. Web17 undefined에서 발표를 맡게된 김관경입니다.

저희 undefined는 부스트캠프 기간동안의 지속가능한 개발자로의 성장을 확인하고자 undefined만의 기술적인 도전과 근거있는 개선을 해보자라는 마음가짐을 가지고 프로젝트를 진행하였습니다.

저희는 이런 마음가짐을 가지고 실시간 데이터 시각화를 통해 커뮤니티 내 소그룹 관리를 돕는 와글와글이라는 서비스를 구현하였습니다.

이런 구현 과정 속에 저희가 경험한 기술적인 도전에 대해서 프론트엔드 / 백엔드 파트별로 나누어서 오늘 발표를 진행하도록 하겠습니다.

프론트엔드 파트에서는 저희 서비스의 핵심기능인 데이터 시각화를 제작하게 된 과정과 도전, 그리고 수치화할 수 있는 성능 개선 과정에 대해 발표히고

백엔드 파트에서는 실시간 서비스 구현과 테스트 코드, 유연한 구조를 만드는 과정에 대해 발표할 예정입니다.

🖥️ 프론트엔드

먼저 프론트엔드의 기술 도전 과정을 말씀 드리겠습니다.

프론트엔드에서는 서비스의 핵심 기능인 실시간 데이터 시각화를 직접 구현하고 수치화가 가능한 성능 개선 과정을 통해 지속가능한 개발자로서의 성장을 확인하고자 하였습니다.

키워드 버블차트 물리엔진 구현

먼저 발표할 것은 데이터 시각화를 위한 좌표연산 물리엔진 제작입니다.

Why?

처음에는 저희도 라이브러리 사용에 대해 고민했었습니다. 다만 프로젝트의 핵심기능을 외부 라이브러리에 의존하는 것이 좋지 않다고 생각했고, 외부 라이브러리를 사용하면 데이터 시각화에 대해 이해하는 것보다 해당 라이브러리에 대해 공부하게 될 수 있다고 생각되었습니다.

따라서 데이터 시각화를 직접 구현하는 것이 더 좋다고 판단했습니다.

좌표연산 물리엔진 제작기 1

실세계를 모델링하며 수치 조정과 디버깅에 용이하고자 역할과 책임을 분리한 객체의 형태로 구현하는 것이 적합하다고 생각했습니다.

Circle과 CircleContainer로 나누어 Circle은 크기와 속도와 같은 상태를 가지고, CircleContainer는 Circle에 힘을 가하여 Circle의 크기, 속도등의 상태를 변경시키는 역할을 하도록 설계하였습니다.

이후 연산될 좌표를 눈으로 확인하여 생산성을 높이기 위해 UI 컴포넌트를 먼저 구현 했습니다.