복제 캐시 큰 그림
Replicache
Local First Software 를 구현하는 데 도움을 주는 프레임워크이다. Git가 유사하게 push, pull 을 통해서 싱크를 맞추는 작업을 구성하는데 도움을 준다.
Replicache 는 서버 데이터의 동기화를 뒤에서 비동기적으로 수행하여 Server의 Round trip을 없애고 즉각적인 UI변경을 가능하게 한다.
Replicache Parts
Replicache는 여러개의 요소로 구성된다.
Replicache
Replicache는 내부에 git 같은 동작을 포함하는 In browser Key-Value 스토어라고 볼 수 있다. 메모리에 먼저쓰고 나중에 동기화한다.
Your application
웹 어플리케이션 같은 우리가 만든 응용프로그램이다. Replicache에 상태를 저장하는 주체이다. Mutator 와 Subscription를 구현해서 상태의 변경과 대응을 한다.
Your server
가장 신뢰할 수 있는 데이터를 저장하기 위해 존재한다. 서버에 연결된 데이터베이스에 저장된 상태는 어플리케이션에 있는 상태보다 우선시 된다.
서버는 push(upstream)와 pull(downstream)을 구현해서 클라이언트의 Replicache와 소통해야한다.
push(upstream): Replicache 는 변경 사항을 push endpoint로 보낸다. 서버에도 어플리케이션과 같이 Mutator를 구현하는데 이 push endpoint는 이 mutator를 실행시켜서 database의 상태를 변경한다.
pull(downstream): 주기적으로 혹은 명시적으로 요청할 때, Replicache는 서버에 Pull 요청을 날린다. 서버는 클라이언트가 서버의 상태와 동일해지기 위해 필요한 변경사항을 반환한다.
poke: 주기적으로 클라이언트가 pull요청을 보내긴 하지만, 좀 더 realtime으로 보여주기 위해서 서버에 변경이 있을때, 서버가 클라이언트에게 pull 요청을 하라고 힌트를 주는 신호이다. 아무런 데이터를 수반하지 않는다.
Sync
어플리케이션과 서버가 최신의 상태로 동기화 한다. 아래 그림이 이 과정을 잘 보여준다. 서버에서 주기적으로 상태변화를 pull 받아서 UI를 업데이트하는 과정, 클라이언트에서의 상태변경이 먼저 UI를 업데이트하고 서버에 push 되는 과정을 보여준다.
출처
Clients, ClientGroups, Caches
메모리에 있는 Replicache를 Client 라고 한다.
import {Replicache} from "replicache"; const rep = new Replicache({ name: userID, ... }); console.log(rep.clientID);
클라이언트는 보통 한탭 당 하나 존재한다. 클라이언트는 휘발성이고 탭의 생명주기와 함께한다. 유일한 clientID를 가진다.
Client Group은 Local data를 공유하는 클라이언트의 집합이다. 이 클라이언트 그룹 안에 있는 클라이언트들은 오프라인 상태라도 상태를 공유한다.
Client Group은 Replicache의 생성자의 name parameter에 의해 구별되는 on-disk persistent cache를 사용한다. 같은 name을 가지는 Client Group에 속하는 모든 클라이언트는 같은 캐시를 공유한다.
The Client View
Client는 ordered map of key value pair 를 persistent cache에 가지고 있는데 이를 Client View 라고 부른다. Client View는 어플리케이션의 데이터이고 서버의 데이터와 싱크된다. Client View라고 부르는 이유는 서로 다른 클라이언트 마다 서버의 데이터를 다른 Client View로 가지고 있을 수 있기 때문이다. 각 클라이언트가 서버의 상태를 보는 게 다르다는 의미다.
Client View에 접근하는 것은 매우 빠르다. Read latency 는 1ms 미만이고 대부분의 장치에서 500MB/s 의 Throughput을 가진다.
React 같은 곳에서 useState로 따로 Client View를 카피해서 메모리에 올려서 사용하지말고, Client View에서 바로 읽어서 사용하길 권장한다. Client View에 mutator가 변경을 가하면 subscription이 발동되어 UI가 업데이트 되도록 하면 된다.
Subscriptions
Subscribe 함수는 ReadTransaction 인자를 받아서 Replicache에서 읽는 것을 구현한다. Replicache의 데이터가 변해서 이 subscription이 out of date 될때마다 subscribe 함수가 다시 수행된다. 만약 이 결과가 바뀐다면, 값이 업데이트되고 UI도 업데이트 된다.
Subscription을 통해 UI를 구성하면, 항상 최신의 상태로 유지할 수 있다.
import {Replicache} from "replicache"; const rep = new Replicache({ name: userID, ... }); console.log(rep.clientID);
Mutations
Mutation은 Replicache의 데이터를 변화시키는 작업을 뜻한다. Mutation을 받아서 실제로 데이터를 변화시키는 주체를 Mutator 라고 한다.
시작할 때 Replicache에 여러 Mutator를 등록하는데, 사실 그냥 named function이다. 아래 createTodo와 markTodoComplete는 모두 mutator로 WriteTransaction을 통해서 Replicache의 데이터를 변화시킨다.
const todos = useSubscribe(rep, async tx => { return await tx.scan({prefix: 'todo/'}).toArray(); }); return ( <ul> {todos.map(todo => ( <li key={todo.id}>{todo.text}</li> ))} </ul> );
Mutator는 아래와 같이 작동 시킨다. Mutator가 작동하면 데이터가 변경되고, 그와 연관된 subscription들이 트리거 되면서 UI 또한 변경된다.
const rep = new Replicache({ ... mutators: { createTodo, markTodoComplete, }, }); async function createTodo(tx: WriteTransaction, todo: Todo) { await tx.set(`/todo/${todo.id}`, todo); } async function markTodoComplete(tx: WriteTransaction, {id, complete}: {id: string, complete: boolean}) { const key = `/todo/${id}`; const todo = await tx.get(key); if (!todo) { return; } todo.complete = complete; await tx.set(key, todo); }
내부적으로 Mutator는 mutation이라는 것을 만든다. 수행 기록 같은건데, Replicache는 아래와 같은 mutation을 생성한다.
await rep.mutate.createTodo({id: nanoid(), text: "take out the trash"});
이 mutation들이 서버에 push 되어 완전히 sync되기 전까지 이 mutation들은 pending 상태로 표기된다.
Sync Details
이제 Replicache의 핵심이라고 할 수 있는 Sync의 자세한 내용이다. Sync는 서버에서 이루어진다.
The Replicache Sync Model
(이제부터 '상태'라는 표현은 여러 key과 value 쌍으로 된 데이터(key value space)의 상태를 뜻 한다.)
Replicache가 풀려고 하는 Sync 문제는 여러 클라이언트가 동시에 같은 상태를 변화시키는 상황이고 아래와 같은 조건을 가질 때 발생한다.
- 서버가 가지고 있는 상태가 source of truth이다. canonical(표준)이라고 표현한다.
- 클라이언트의 로컬 상태의 변화는 즉각적으로 반영된다. 이를 speculative(추측)라고 부른다.
- 서버는 변경사항을 정확히 한번만 적용해야하고 그 결과가 예측 가능해야한다. 서버에 적용된 변경사항이 클라이언트의 로컬 change와 합리적으로 병합될 수 있어야한다.
이 중에 마지막 항목에서 서버의 변화를 로컬 상태와 '합리적으로 병합'이라는 것은 흥미로운 주제이다. '합리적 병합'을 위해서 다음과 같은 상황들을 고려해야한다.
로컬의 변화가 아직 서버에 적용되지 않은 경우. 이 경우는 서버로부터 새로운 상태를 가져오더라도 로컬에서의 변경 사항이 앱의 UI에서 사라지지 않도록 해야 한다. 서버로부터 새로운 상태를 수신한 후, 기존의 로컬 변경 사항을 서버 상태 위에 다시 실행해야 한다.
클라이언트에서 발생한 로컬 변경 사항이 이미 서버에 전송되고, 서버 상태에 반영된 경우. 이 경우는 로컬 변경 사항을 중복 적용하는 것을 주의 해야한다. 로컬 변경 사항을 다시 적용하지 않아야한다.
동일한 상태에 대해 서버 상태를 변경한 다른 클라이언트가 존재하는 경우. 이 경우에도 첫번째 경우 처럼 서버에서 수신한 상태를 기준으로 로컬 변경 사항을 재 실행해야 한다. 하지만 같은 리소스에 대해서 충돌이 발생할 수 있기 때문에 병합 논리를 잘 짜야한다. Mutator 내부에 이 로직을 작성한다.
Mutator의 동작 과정을 따라가보자.
Local execution
로컬에서 Mutator 가 동작하고 mutator로직에 따라서 replicache의 값이 변경된다. 동시에 이 클라이언트에서 sequential하게 증가하는 mutationId를 가진 mutation을 생성한다. mutation은 pending mutation으로 queuing된다.
Push
Pending mutations은 server에 구현된 push endpoint(replicache-push)로 보내진다.
mutation은 서버에 구현된 mutator를 실행시켜서 canonical 상태를 변경한다. Mutation을 적용하면서 이 클라이언트의 last mutation id를 업데이트하고, 이 클라언트가 다음 pull을 할 때 어느 mutation부터 재 적용할지 알 수 있는 값이 된다.
로컬에 적용된 pending mutation은 speculative result를 생성하고, 서버에 적용된 mutation은 canonical result를 생성한다. 서버에 적용된 mutation은 confirmed 되어 다시 로컬에서 실행되지 않는다. 만약 같은 mutation이 다른 결과를 반환하더라도 server의 canonical result가 우선되므로 클라이언트의 결과는 바뀌게 된다.
Pull
Replicache는 최신 상태를 가져와 UI를 업데이트하기 위해서 주기적으로 pull endpoint(replicache-pull)로 요청을 보낸다.
Pull request는 cookie, clientGroupId를 담아서 요청하고, new cookie, patch, lastMutationIDChanges를 반환받는다.
cookie는 클라이언트가 가지고 있는 서버 상태를 구별하는데 사용한다. 서버와 클라이언트 상태가 얼마나 차이나는 지 추적할 수 있는 값이면 된다. 데이터베이스의 상태가 바뀔때마다 변경되는 global 'version'이라고 생각해도 된다. 아니면 좀 더 특정 범위의 데이터를 추적하는 쿠키 전략을 사용해도 된다.
lastMutationIdChanges는 각 클라이언트의 마지막으로 서버에서 적용된 mutation ID를 나타내는 값이다. 이 값보다 작은 mutationID를 가진 mutation은 모두 더 이상 pending이 아닌 confirmed로 간주해야한다.
Rebase
클라이언트가 pull을 받으면 로컬의 상태에 patch를 적용해야한다. 하지만 pending mutation이 현재 로컬 상태 영향을 줬을 것이기에 로컬 상태에 바로 patch를 적용할 수는 없다. 대신에 로컬의 pending mutation을 되돌리고 pull로 받은 patch를 먼저 적용한 후에 다시 로컬 pending mutation을 적용한다.
이런 되돌리기와 재적용을 가능하게 하기 위해서 Replicache는 깃과 유사하게 설계되었다. 서버의 상태가 main branch, 로컬에 팬딩된 mutation으로 변경된 상태를 develop 브랜치라고 생각하고 서버로 부터 main에 pull을 받고 develop을 main으로 rebase한다고 생각하면 된다.
리베이스하면서 발생할 수 있는 컨플릭트는 아래에서 따로 알아본다.
Poke
Poke는 위에서 설명했듯이 서버가 클라이언트에게 pull을 하라고 알려주는 힌트 메세지이다.
Conflict Resolution
Replicache과 같은 분산시스템에서 Merge conflict는 피할 수 없다. pull과 push과정에서 병합이 필요하다. 병합은 병합 결과가 예측 가능해야하고 앱의 목적에 맞는 방식으로 진행되어야한다.
만약 회의실 예약 앱 이라면, 컨플릭이 발생했을때 하나의 요청만 승인되어야 한다. 그렇기 때문에 먼저 예약한 클라이언트만 승인하는 병합 방법을 채택해야한다.
반대로 Todo 앱이라면, 투두리스트는 동시에 추가가 일어나더라도, 두 변경 모두 승인되는 것이 목적에 맞다.
Merge Conflict는 다음 두 상황에서 발생한다.
로컬 변경 사항이 서버에 적용될 시점. 로컬에서 적용할 때의 상태와 서버에서 적용할 때의 상태가 다를 수 있기 때문이다.
Rebase할 때. 역시 적용할때 상태가 다를 수 있기 때문이다.
Replicache는 앱의 목적에 따라 병합 방법을 다르게 구현해야 함을 인지하기 때문에, 개발자가 이를 구현할 수 있도록 한다. 개발자는 Mutator를 통해 이 로직을 구현하면 된다.
위 내용은 복제 캐시 큰 그림의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.

JavaScript를 배우는 것은 어렵지 않지만 어려운 일입니다. 1) 변수, 데이터 유형, 기능 등과 같은 기본 개념을 이해합니다. 2) 마스터 비동기 프로그래밍 및 이벤트 루프를 통해이를 구현하십시오. 3) DOM 운영을 사용하고 비동기 요청을 처리합니다. 4) 일반적인 실수를 피하고 디버깅 기술을 사용하십시오. 5) 성능을 최적화하고 모범 사례를 따르십시오.

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

동일한 ID로 배열 요소를 JavaScript의 하나의 객체로 병합하는 방법은 무엇입니까? 데이터를 처리 할 때 종종 동일한 ID를 가질 필요가 있습니다 ...

이 기사에서 시차 스크롤 및 요소 애니메이션 효과 실현에 대한 토론은 Shiseido 공식 웹 사이트 (https://www.shiseido.co.jp/sb/wonderland/)와 유사하게 달성하는 방법을 살펴볼 것입니다.

Console.log 출력의 차이의 근본 원인에 대한 심층적 인 논의. 이 기사에서는 Console.log 함수의 출력 결과의 차이점을 코드에서 분석하고 그에 따른 이유를 설명합니다. � ...
