클라이언트측(임시) ID

왜

최신 UI는 종종 오프라인 기능을 구현하거나 optimistic ui 패턴을 따릅니다. 이러한 경우 서버 응답(일반적으로 ID 포함)을 사용할 수 있기 전에 클라이언트 측 상태에서 새 엔터티를 처리해야 합니다. 이를 지원하려면 클라이언트 측에서 ID를 생성하는 것이 좋습니다.

클라이언트 측에서 ID를 생성할 때 다른 설정을 따를 수 있습니다.

기존 서버 서버는 클라이언트 측 ID에 대해 알지 못합니다. 클라이언트는 서버에서 생성한 ID를 "병합"합니다.

클라이언트 전용 서버는 ID를 생성하지 않지만 (모든) 클라이언트가 ID를 제공할 것으로 기대합니다. 일반적으로 UUID와 함께 사용됩니다.

서버측 매핑 클라이언트는 생성된 ID를 서버에 전파하지만 서버는 새 ID를 생성하고 두 ID를 모두 유지/생성(매핑)합니다(예: 속성client_id을 엔티티에 추가).

모든 설정이 합리적이지만(특정 컨텍스트에 따라 다름) 서버/API를 제어할 수 없는(또는 이를 변경하고 싶지 않은) 시나리오에는 "전통 서버"만 사용할 수 있음을 강조하고 싶습니다. .

다음 섹션에서는 기존 서버 설정에 초점을 맞추고 몇 가지 모범 사례를 문서화합니다. 뭔가 잘못되었거나 빠진 것 같으면 연락주세요!

임시 신분증을 보관하십시오

서버가 (영구) ID를 제공한 후에도 해당하는 임시 ID를 유지하는 것이 도움이 되는 경우가 많습니다. 적어도 클라이언트 상태에서 엔터티가 제거될 때까지입니다.

예를 들어 목록/테이블 항목을 추적할 때 유용합니다(예: Angular의 trackBy 함수 사용).

trackBy = (item, index) => item.temporaryId ?? item.id;

위의 내용은 temporaryId를 제거하지 않는 경우(id가 있는 경우에도) 개체를 지속적으로 식별할 수 있습니다.

참고: URL에 임시 ID를 사용하는 경우 페이지 새로 고침(클라이언트 상태가 일반적으로 재설정될 때)에서 엔터티를 다시 가져올 수 있도록 가능한 한 빨리 URL을 영구 ID로 교체해야 합니다. 서버.

별도의 속성 사용

클라이언트 생성 ID를 서버 생성 ID와 동일한 속성에 넣을 수 있습니다. 이 경우 클라이언트/로컬 ID와 서버 ID를 명확하게 구분하는 것이 좋습니다. 접두사 또는 음수를 사용하여.

일반적으로 클라이언트/로컬 ID를 별도의 속성(예: temporaryId . 이렇게 하면 "임시 ID 유지"(위 참조)가 가능할 뿐만 아니라 클라이언트와 서버 ID를 실수로 혼합할 수 없으므로 오류가 발생하기 쉽습니다.

Typescript에서는 인터페이스를 쉽게 정의할 수 있습니다.

interface HasTempId {
  temporaryId?: string;
}

이것을 모델에 결합하십시오.

const entity: YourEntity & HasTempId = {/* whatever */};

이렇게 하면 클라이언트 측에서 생성한 ID를 기존 코드에 소급하여 쉽게 추가할 수 있습니다.

물론 이것은 Java와 같은 경우nominally typed languages 쉽지 않습니다.

참조 일관성

엔터티가 다른 엔터티를 참조할 때 이러한 참조를 고려해야 합니다. 일반적으로 임시 참조를 보유하기 위해 추가 속성을 생성할 필요는 없지만 먼저 임시/클라이언트 ID를 원래 참조 속성에 넣고 사용할 수 있게 되면 영구 ID로 바꿀 수 있습니다. 물론 모든 관련 엔터티의 모든 참조가 업데이트되도록 주의해야 합니다.

이는 Redux와 같은 중앙 상태 패턴에서 자연스럽게 작동합니다.

안정적인 주문

자체적으로 ID가 있는 목록(UML "집계")으로 모델링된 하위 리소스가 있는 경우 모든 요소를 ​​일치시켜야 합니다. 클라이언트측 ID를 서버측 ID와 올바르게 연결하기 위한 가장 쉬운 방법은 이 목록(서버)의 순서를 보장하고 요소를 인덱스별로 연결하는 것입니다.

전자가 불가능한 경우에도 구조/값으로 요소를 식별할 수 있습니다. 요소를 구분할 수 없으면 올바른 순서가 중요하지 않습니다.

결론

클라이언트 측 임시 ID를 생성하고 유지 관리하면 약간의 복잡성이 추가됩니다. 구조화된 접근 방식과 Typescript 및 중앙 집중식 상태 관리와 함께 최신(웹) 스택을 사용하면 솔루션을 유지 관리할 수 있습니다.