# Verity v1.0.0: 서버 진실을 보장하고 낙관적 업데이트를 없애는 데이터 레이어 완전 해설

---

# # 📌 서론 – 프론트엔드에서 흔히 겪는 “진실 혼합” 문제

현대 웹 애플리케이션은 **React**, **Vue**, **Svelte** 같은 프레임워크를 사용해 사용자 경험을 풍부하게 만들지만, 동시에 **클라이언트와 서버 간의 상태 관리**가 복잡해지는 부작용을 낳습니다.

- **서버‑소유 진실(state of truth)** : 데이터베이스에 저장된 최종값, API 응답 등 절대 변하지 않아야 할 값.

- **클라이언트‑소유 뷰(state of view)** : 사용자가 입력하거나 UI가 즉시 반영하기 위해 만든 임시값.

이 두 상태가 섞이면 **낙관적 업데이트(optimistic update)** 라는 패턴이 등장합니다. 사용자는 즉시 UI가 변하는 것을 보지만, 실제 서버와 동기화되지 않아 오류가 발생했을 때 복구 로직이 복잡해집니다.

> “내가 만든 UI가 서버와 다르면 어떻게 할까?”

> “에러가 났을 때 UI를 원래대로 되돌리는 코드를 매번 작성해야 하는데…”

이러한 고민을 해결해 주는 것이 바로 **Verity v1.0.0** 입니다. 이번 글에서는 Verity가 무엇인지, 어떻게 **서버‑as‑truth** 를 강제하고 **낙관적 업데이트** 를 없애는지 초보자도 이해하기 쉬운 예시와 함께 살펴보겠습니다.

---

# # 🔎 본론

## # 1️⃣ Verity란? – 프레임워크에 구애받지 않는 **데이터 레이어**

Verity는 **framework‑agnostic**(프레임워크 독립) 데이터 레이어입니다. 즉, React든 Vue든 상관없이 동일한 API로 데이터를 읽고 쓸 수 있습니다. 핵심 목표는 다음과 같습니다.

| 목표 | 설명 |

|------|------|

| **Server‑as‑Truth** | 모든 읽기·쓰기 연산은 서버를 직접 호출하고, 클라이언트에 저장되는 값은 언제나 서버 응답을 기반으로 합니다. |

| **Optimistic Update 제거** | UI는 서버 응답이 올 때까지 ‘대기’하거나 ‘플레이스홀더’를 보여주어, 잘못된 상태가 UI에 반영되지 않게 합니다. |

| **일관된 에러 처리** | 서버 오류가 발생하면 자동으로 UI를 롤백하고, 에러 정보를 중앙에서 관리합니다. |

이러한 설계 덕분에 **데이터 레이어** 가 애플리케이션 전반에 걸쳐 동일한 규칙을 적용하게 되며, 코드 중복과 버그 발생 확률이 크게 낮아집니다.

---

## # 2️⃣ 핵심 개념 – **읽기와 쓰기의 흐름**

### # 2.1 읽기(Read)

1. 컴포넌트가 `verity.read(query)` 를 호출합니다.

2. Verity는 **캐시**가 있으면 즉시 반환하고, 백그라운드에서 최신 데이터를 **fetch** 합니다.

3. 서버 응답이 도착하면 캐시를 업데이트하고, 구독하고 있는 모든 컴포넌트에 **자동 리렌더링** 을 트리거합니다.

> 👉 이렇게 하면 “서버와 UI가 일시적으로 다를 수 있지만, 최종적으로는 서버가 진실을 제공한다”는 원칙을 유지합니다.

### # 2.2 쓰기(Write)

1. `verity.mutate(mutation, variables)` 를 호출하면, **즉시 서버에 POST/PUT 요청** 을 보냅니다.

2. 요청이 성공하면 새로운 데이터를 캐시에 반영하고, 구독 중인 UI가 자동 업데이트됩니다.

3. 요청이 실패하면 **자동 롤백** 이 일어나며, 에러 객체를 반환해 UI에서 적절히 처리할 수 있습니다.

이 과정에서 **낙관적 업데이트** 를 전혀 사용하지 않으며, “잠시 동안 잘못된 UI가 보이는” 상황을 원천 차단합니다.

---

## # 3️⃣ 실제 적용 예시 – Todo 앱에 Verity 도입하기

아래 예시는 가장 흔한 **Todo 리스트** 애플리케이션에 Verity를 적용하는 방법을 보여줍니다.

```
js

// verity.js (공통 모듈)

import { createVerity } from 'verity';

export const verity = createVerity({

  endpoint: 'https://api.example.com/graphql',

});

// TodoList.jsx (React 예시)

import { useEffect, useState } from 'react';

import { verity } from './verity';

function TodoList() {

  const [todos, setTodos] = useState([]);

  // 1️⃣ 읽기

  useEffect(() => {

    const unsub = verity.read(`

      query { todos { id, title, completed } }

    `, data => setTodos(data.todos));

    return () => unsub(); // 구독 해제

  }, []);

  // 2️⃣ 쓰기 (완료 토글)

  const toggleTodo = async (id) => {

    try {

      await verity.mutate(`

        mutation($id: ID!) {

          toggleTodo(id: $id) { id, completed }

        }

      `, { id });

      // 성공 시 자동으로 UI가 업데이트됩니다.

    } catch (err) {

      alert('업데이트에 실패했습니다.');

    }

  };

  return (

    <ul>

      {todos.map(t => (

        <li key={t.id}>

          <input

            type='checkbox'

            checked={t.completed}

            onChange={() => toggleTodo(t.id)}

          />

          {t.title}

        </li>

      ))}

    </ul>

  );

}

```

**핵심 포인트**

- `verity.read` 로 데이터를 구독하면, **서버가 최신 데이터를 제공** 할 때마다 자동으로 `setTodos` 가 호출됩니다.

- `verity.mutate` 는 **서버 응답이 올 때까지 UI를 잠시 멈추게** 하며, 성공하면 캐시가 업데이트됩니다.

- 오류가 발생하면 **자동 롤백** 되므로, 사용자는 “버튼을 눌렀지만 상태가 바뀌지 않았다”는 혼란을 겪지 않습니다.

---

## # 4️⃣ Verity 도입 시 고려해야 할 점

| 항목 | 설명 | 권장 설정 |

|------|------|-----------|

| **네트워크 지연** | 서버 응답이 늦어지면 UI가 잠시 비어 보일 수 있습니다. | 로딩 스피너·플레이스홀더 UI를 준비 |

| **캐시 전략** | 캐시를 어떻게 유지할지 설계가 필요합니다. | `stale-while-revalidate` 혹은 `cache-first` 전략 선택 |

| **에러 핸들링** | 모든 `mutate` 호출은 `try/catch` 로 감싸야 합니다. | 전역 에러 로깅 서비스와 연동 |

| **SSR(서버 사이드 렌더링)** | 서버에서 미리 데이터를 받아 렌더링하려면 `verity.prefetch` 사용 | Next.js, Nuxt.js 등과 호환 가능 |

위 체크리스트를 참고하면 **Verity** 를 프로젝트에 무리 없이 통합할 수 있습니다.

---

# # 🎯 결론 – 지금 바로 Verity로 안정적인 데이터 흐름을 만들자

- **Server‑as‑Truth** 를 강제해 데이터 일관성을 확보

- **낙관적 업데이트** 를 배제해 UI 오류를 원천 차단

- 프레임워크에 구애받지 않는 **데이터 레이어** 로 재사용성·생산성 향상

프론트엔드 개발자는 이제 **“데이터가 언제 어디서 변했는가?”** 를 고민할 필요 없이 UI 구현에 집중할 수 있습니다.

> **🚀 행동 유도** : 오늘 소개한 Todo 예제를 그대로 복사해 프로젝트에 적용해 보세요. `npm install verity` 로 설치하고, 위 코드만 넣으면 바로 **서버 진실** 기반의 안정적인 앱을 만들 수 있습니다.

궁금한 점이나 적용 과정에서 마주친 문제는 댓글이나 GitHub 이슈에 남겨 주세요. 여러분의 피드백이 Verity를 더욱 성장시킵니다!

---

**SEO 키워드**: Verity, 데이터 레이어, 서버 진실