개발자

프론트엔드 개발 관련 서버와 동기화 문제로 인해 질문 남깁니다!

2024년 03월 13일조회 114

안녕하세요! 초기 스타트업에서 현재 notion과 같은 블록 에디터 기반 기능을 가진 보고서 서비스를 만들고 있습니다. 먼저 문제가 발생하기 전까지의 과정을 말씀드리면 1. 작성되어 있는 글 사이에 새로운 글을 작성하기 위해 글 사이룰 개행하여 새로운 블록을 만든다. 2. 만들어진 블록에 글을 작성하고 Enter를 누른다. 3. 변화된 블록들의 객체를 서버에 전송한다. 4. 서버에서 현재 상태에 대해 DB를 최신화하고 프론트에 전송한다. 여기서 문제가 발생하는데 3~4번의 과정 중에 유저가 빠르게 새로운 블록을 재생산하거나 기존의 에디터 상태와 DB에서 최신화된 에디터 상태가 다른 경우 새로운 블록을 재생산한 화면에서 DB를 최신화한 블록 상태로 변경되는 이슈가 있습니다. 해결하기 위해 떠오르는 여러 가지 방법들 (ex. 캐싱과 webworker )을 적용하기 전에 이런 상황들을 경험했을 선배 개발자분들께 먼저 고견을 여쭙고 진행하는 것이 현명하다고 생각하여 질문을 먼저 올렸습니다! ( 사수가 없는 상황입니다..! ) 이런 비슷한 경험을 어떻게 해결했는지 경험이라도 공유해주시면 너무너무 감사하겠습니다! :) 좋은 하루 보내세요! ( 메일 : reblackraven@gmail.com )

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 1

포크코딩님의 프로필 사진

적어주신 내용만 보면 캐싱이나 부가적인 동작보다 디바운싱이나 쓰로틀 로직만 만져줘도 문제를 해결하지 싶습니다. P.S Liveblocks의 솔루션들을 참고해 보세요. 여러 문제에 대해 영감을 얻기에 충분할듯 합니다. https://liveblocks.io/

곽세진님의 프로필 사진

곽세진

작성자

프론트엔드 개발자2024년 03월 21일

답변을 늦게 봤습니다! 말씀하신 디바운싱 쓰로틀 적용, 메모이제이션, 낙관적 업데이트 등의 기술로 해결했습니다! 답변 감사합니다 :)

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 03월 13일

문제 상황을 정확히 이해했다면, 서버-클라이언트 간의 동기화 문제로 보입니다. 즉, 사용자의 입력이 너무 빠르거나 연속적이여서 서버의 응답을 기다리지 않고 새로운 변경사항을 요청하는 경우, 서버의 데이터 상태와 클라이언트의 데이터 상태가 일치하지 않아 발생하는 문제로 짐작됩니다. 해결책은 여러 가지가 있겠지만 한 가지 방법은 optimistic UI 업데이트입니다. 이 접근법 때는 클라이양트는 서버에 데이터 변경사항을 보내고 동시에 UI를 업데이트합니다. 이렇게 하면 사용자는 자신의 행동이 즉시 반영된 것처럼 느낍니다. 그런 다음 서버에서 응답을 받으면 UI를 해당 응답으로 기반하여 최종적으로 다시 업데이트하고 필요한 경우 에러 처리를 합니다. 그러므로 유저가 블록을 추가할 때마다 실질적 변경 후 그것을 화면에 바로 반영하고 백엔드에서도 그 변화를 저장하며, 만약 저장에 실패한다면 사용자에게 알려주고 표시된 내용을 롤백하는 방식으로 적용해볼 수 있을 것 같습니다. 다만 이 방법도 완전한 것은 아니며 잘못된 사용자 경험을 유발할 수도 있기 때문에 신중하게 접근해야 합니다. 여러 해법 중에서 최적의 해결책이 될 수 있지만, 다른 방법들도 고려해 볼 만합니다. 동시에 발생하는 요청들을 queue에 담아 순차적으로 처리하는 방법 또는 서버와 클라이언트 간의 시간 동기화를 위해 Lamport timestamps 같은 알고리즘이나 벡터 시계를 사용하는 방법 등이 있습니다. 결국 가장 적절한 솔루션은 애플리케이션의 특정 요구 사항과 일관성 수준, 그리고 유저 경험 등을 종합적으로 고려하여 결정해야 할 것입니다. 또한 이 문제는 분산 시스템이나 협업 툴에서 자주 나타나는 문제로 CRDT(Conflict-free Replicated Data Type) 이라는 데이터 구조를 사용하여 해결되곤 하는데요. 이 알고리즘을 사용하면 여러 클라이언트가 동시에 데이터를 수정하더라도 일관성을 유지할 수 있는 장점이 있습니다. 마지막으로, 해결 방법을 선택하기 전에 구체적인 요구사항과 문제를 명확히 이해하고 있어야 합니다. 그래서 위에서 언급한 해결책들 중 하나가 문제에 적합한지 확인하고 테스트하는 것이 중요합니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!