레퍼런스 CRDT: https://crdt.tech/
RPC: https://www.techtarget.com/searchapparchitecture/definition/Remote-Procedure-Call-RPC
WASM: https://developer.mozilla.org/en-US/docs/WebAssembly

| 목표 | 웹개발 개념들에 대해서 간단히 알아보자. | | -------- | --------------------------------------- | | 학습내용 | CRDT, RPC, WASM | | 난이도 | 🥚🐣 |

자투리 공부 👉 궁금해요: CRDT, RPC, WASM

1. CRDT, Confilct-free Replicated Data Type

Conflict-free Replicated Data Type는 충돌이 없는 복제 데이터 타입을 의미합니다.

CRDT란?

분산 데이터 스토리지 시스템과 다중 사용자 간의 동시성과 일관성을 유지하면서 데이터를 복제하고 동기화하기 위해 애플리케이션을 단순화하는 데이터 구조입니다. CRDT는 다수의 노드가 네트워크를 통해 통신하고 동시에 데이터를 변경할 수 있는 분산 환경에서 일관성을 유지하기 위해 개발되었습니다.

분산 환경에서는 네트워크 지연, 패킷 손실, 노드 장애 등의 이유로 데이터 동기화에 문제가 발생할 수 있습니다. 문제가 생길 수 있는 애플리케이션 예시는 다음과 같습니다.

| 애플리케이션 예시 | 설명 | | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | | 로컬 데이터 | 로컬 장치에 데이터를 저장하고, 동일한 사용자의 다른 장치와 데이터를 동기화해야 하는 경우 ex) 캘린더, 메모, 연락처 또는 알림 애플리케이션 | | 오프라인 | 일부 복제본이 오프라인인 경우에도 시스템이 올바르게 작동하도록 데이터의 여러 복제본을 유지 관리하는 분산 데이터베이스의 경우 | | 협업 툴 | 여러 사용자가 동시에 동일한 파일이나 데이터를 변경할 수 있는 협업 툴의 데이터 동기화 문제 ex) Google Docs, Trello, Figma 등의 협업 소프트웨어 | | 대규모 데이터 처리 | 글로벌 확장성을 위해 데이터를 복제하는 대규모 데이터 저장 및 처리 시스템에서의 데이터 동기화 |

데이터 수정을 처리하는 복제 방법

CRDT(Conflict-free Replicated Data Types)는 충돌 해결을 처리하는 낙관적 복제 시스템에서 사용됩니다. CRDT는 서로 다른 복제본에서 어떤 데이터 수정이 이루어지더라도 데이터가 항상 일관된 상태로 병합될 수 있도록 합니다. 이 병합은 특별한 충돌 해결 코드나 사용자 개입 없이 CRDT에 의해 자동으로 수행됩니다.

다음은 강력하게 일관된 복제 Strongly consistent replication와, 낙관적 복제 Optimistic replication의 비교표입니다.

| | 강력하게 일관된 복제 | 낙관적 복제 | | ----------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------ | | 조정 및 수정 사항 | 복제본이 서로 조정하여 수정 사항을 결정 | 사용자가 복제본을 독립적으로 수정하고, 충돌은 통신 시에 해결 | | 일관성 모델 | 직렬화 가능한 트랜잭션, 선형화 가능성 등의 강력한 일관성 모델 지원 | 충돌 해결을 통해 일관성 유지 | | 성능 저하 | 조정을 기다리는 동안 성능이 저하될 수 있음 | 성능과 가용성을 극대화 | | 네트워크 연결 해제 동안 데이터 변경 | 복제본은 네트워크 연결 해제 동안 데이터 변경이 불가능함 | 복제본은 독립적으로 데이터 변경이 가능함 | | 충돌 처리 | - | 복제본 간 충돌은 통신 시에 해결해야 함 |

접근 방식별 CRDT

| | 상태 기반 CRDT | 연산 기반 CRDT | | ----------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | | 접근 방식 | 각 복제본은 자체 상태를 유지 / 상태는 복제본 간에 전파 | 각 복제본은 조작에 대한 연산 로그를 유지 / 연산 로그는 복제본 간에 공유 | | 로컬 조작 | 로컬 조작은 해당 상태를 변경하고 다른 복제본에 상태를 전파 | 로컬 조작은 연산 로그로 표현되며 이 로그는 다른 복제본과 공유, 병합 | | 데이터 전파 | 병합 시 충돌하는 상태는 CRDT의 충돌 해결 규칙에 따라 해결 | 병합에는 로그에서 연산을 적용하고 충돌이 발생하는 경우 해결하는 과정이 포함 | | 동기화 | 상태 업데이트 전파 | 연산 로그 동기화 | | 장점 | 현재 상태만 공유 / 구현 간단, 네트워크 트래픽이 줄어듦 | 더 세밀한 제어가 가능 / 실행 취소, 다시 실행 작업을 지원 특정 시나리오에서 구현이 더 쉬움 | | 단점 | 병합 과정에서 중간 상태를 저장하기 위해 추가적인 저장소가 필요 | 연산 로그 공유로 인해 더 많은 네트워크 트래픽이 발생, 복잡한 충돌 해결 전략이 필요 |

---

2. RPC, Remote Procedure Call

RPC란?

원격 프로시저 호출 Remote Procedure Call은 클라이언트-서버 모델을 기반으로 작동합니다. (요청 프로그램은 클라이언트이고 서비스 제공 프로그램은 서버입니다.)

분산 컴퓨팅 환경에서 클라이언트는 로컬 프로시저를 호출하는 것처럼 원격 서버에 존재하는 다른 프로시저를 호출할 수 있습니다. 프로시저 호출은 함수 호출 function call **또는 **서브루틴 호출** subroutine call이라고도 합니다. 로컬 프로시저 호출과 마찬가지로 RPC는 원격 프로시저의 결과가 반환될 때까지 요청 프로그램을 일시 중단해야 하는 동기 작업입니다.  그러나 동일한 주소 공간을 공유하는 경량 프로세스 또는 스레드를 사용하면  여러 RPC를 동시에 수행할 수 있습니다.

사용 예시

| 사용 예시 | 설명 | | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | 클라이언트-서버 통신 | RPC는 클라이언트와 서버 간의 통신을 처리하기 위해 일반적으로 사용. 클라이언트는 원격 서버에 요청을 보내고 서버에서 작업을 실행하도록 요청 | | ex) 로그인 인증 결과 요청 | | 원격 서버 호출 | 클라이언트가 원격 서버에 요청을 보냄 ⇒ 서버에서 작업을 수행하고 결과를 반환 | | ex) 특정 상품의 정보요청 | | 마이크로서비스 아키텍처 | 마이크로서비스 아키텍처에서 서비스 간 통신에 사용, 각 마이크로서비스는 RPC를 통해 다른 서비스와 데이터를 교환하고 작업을 조정 | | ex) 결제 시스템 |

---

3. WASM, WebAssembly

WASM이란?

WASM은 "WebAssembly"의 약자로, 웹에서 실행되는 이진 형식의 포터블 프로그래밍 언어입니다.

웹 브라우저에서 실행되는 JavaScript 외의 다른 프로그래밍 언어로 작성된 코드를 실행하기 위해 설계되었습니다. WASM은 웹 플랫폼에서 높은 성능과 보안을 제공하며, 다양한 언어로 개발된 소스 코드를 웹 애플리케이션에서 실행할 수 있도록 합니다.

WASM의 장점

| 장점 | 설명 | | -------------- | ------------------------------------------------------------------------------------------------------------ | | 이식성 | 다양한 프로그래밍 언어로 작성된 코드를 WASM으로 컴파일하여 실행. | | 성능 | WASM은 효율적인 기계 코드로 변환되므로 웹에서 높은 성능을 제공 | | 보안 | 격리된 실행 환경을 제공하여 웹 보안 취약점을 최소화하고 악성 코드의 침투를 방지 | | 웹 플랫폼 통합 | WASM은 웹 플랫폼의 일부로 채택되어 모든 주요 웹 브라우저에서 지원되며 네이티브 코드의 실행과 상호작용이 가능 |

WASM을 사용하여 웹 애플리케이션에서 높은 성능이 필요한 작업을 처리하고, 웹에서 다른 언어로 작성된 코드의 실행이 가능해집니다.

사용 예시

1. WASM 모듈 컴파일

   • C, C++, Rust 등의 언어로 작성된 코드를 WASM 형식으로 컴파일 합니다. 해당 언어의 도구 또는 컴파일러를 사용하여 WASM 모듈 파일(.wasm)을 생성합니다.

2. JavaScript에서 WASM 모듈 로드

   • WebAssembly.instantiate() 또는 WebAssembly.instantiateStreaming() 함수를 사용하여 WASM 모듈을 로드합니다. 이 함수들은 WASM 모듈 파일을 가져와 메모리에 로드하고, JavaScript와의 상호작용을 위한 인스턴스를 생성합니다.

   // WASM 모듈 로드
   fetch("example.wasm") // WASM 모듈 파일을 가져옴
     .then((response) => response.arrayBuffer()) // 배열 버퍼로 변환
     .then((buffer) => WebAssembly.instantiate(buffer)) // WASM 모듈 인스턴스 생성
     .then((module) => {
       // WASM 모듈 실행
       const result = module.instance.exports.myFunction(); // WASM 모듈의 함수 호출
   
       console.log(result); // 결과 출력
     })
     .catch((error) => {
       console.error("Error:", error);
     });
   

   • 위의 예시에서는 fetch() 함수를 사용하여 WASM 모듈 파일을 가져온 다음, arrayBuffer()를 사용하여 데이터를 배열 버퍼로 변환합니다. 그 후, WebAssembly.instantiate() 함수를 호출하여 WASM 모듈을 로드하고 인스턴스를 생성합니다. 마지막으로, 해당 모듈의 함수를 호출하여 결과를 얻고, 콘솔에 출력합니다.