단의 개발 블로그

동시편집 구현 방법OTOperational TransformationGoogle Docs, Wave, Ms office 입력한 순서에 따라 서버가 적절히 변형하여 전달하는 방식으로, 시간 순서를 고려하여 우선순위를 부여해서 앞에서 적용한 것과 다음 순위 변경사항을 보정함 동작모든 변경사항을 서버가 기록서버에 전부 전송변경사항을 순차적으로 병합사용자 화면에 출력 문제점서버 과부하 OT 구현 오픈소스SharedDBRustpadJot CRDTConflict-Free-Replicated Data TypesFigma, Redis, Riak, Workie, Apple Notes 현재 각광 받는 기술로, 문서를 편집하는 유저끼리 데이터를 교환하는 방식으로 사용함, 스트림 상의 각 문자에 고유한 ID를 부여하고, ..

웹 브라우저의 화면은 DOM이다. 브라우저의 엔진은 HTML를 해석하여 DOM 트리를 구성한다. HTML 구문은 웹 서버나 브라우저가 생성한다. 이때 웹 서버가 생성하는 것을 SSR, 브라우저가 생성하는 것을 CSR라고 부른다. SSRServer Side Rendering의 약자로, 서버에서 정적 파일을 렌더링 하는 것을 의미한다. SSG라는 개념이 종종 사용되기도 하는데 Static Site Generation으로 정적 화면만 제공할 때 사용하는 렌더링 방식을 의미한다. 장점초기 페이지 로딩 시간이 빠르다.검색엔진 최적화가 된다.보안이 좋다.실시간 데이터를 보여줄 수 있다단점서버 자원을 많이 사용한다.페이지 깜빡임이 발생한다CSRClient Side Rendering의 약자로, 클라이언트(브라우저)에..

💡 문제게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다."죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다.게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 "5 x 5" 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 "1 x 1" 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올릴 수 있습니다. 집어 올린 인형은 바구니에 쌓이게 되는 데, 이때..