개요

우리는 기술적 도전을 위해 라이브러리를 쓰지 않고 CRDT를 직접 구현했다

갖은 우여곡절 끝에 우리는 나름 멋있게 동작하는 CRDT 라이브러리를 완성할 수 있었으나, 기능이 동작하는 것을 우선적으로 작업한 결과 동작은 잘 하지만 개선의 여지가 많이 남아있게 됐다

CRDT 로직을 개선하면서 우리가 직접 만든 CRDT 라이브러리를 사용하는 데 있어 나타날 수 있는 성능 상의 문제를 해결하고자 한다

무엇이 문제인가?

작은 페이로드 단위

• 편집 내용이 각 클라이언트와 서버에 문자 단위로 전송되고 있다
• 문자가 입력될 때마다 서버와 통신하기 때문에 네트워크 요청 횟수가 너무 많아 네트워크 부하가 발생하고, 서버 처리량에 부담을 주며, 데이터베이스에 과도한 쓰기 작업이 들어간다
  • 텍스트를 복사 후 붙여넣기할 때, 붙여넣은 문자 개수만큼 서버와의 통신이 발생하고 있다

어떻게 개선하지?

배치 처리

• 짧은 시간 동안 들어온 연산들을 모아두었다가 일괄적으로 보낸다면 통신 횟수를 줄일 수 있을 것이다

설계

• 연산을 단위로 묶어서 전송하기
• 사용자의 입력이 들어오면 그 입력에 대한 연산을 배열에 저장해두고
• 일정 주기마다 연산 배열을 서버에 전송하면 서버는 일괄적으로 연산을 처리해 데이터에 적용하고
• 서버는 다른 클라이언트들에게 연산 배열을 전송해 각 클라이언트도 일괄적으로 연산을 처리한다

클라이언트

• BatchProcessor.ts
• useSocketStore.ts