개요이전 글에서는 상태 기반 CRDT에 대해서 알아보았다.2025.11.26 - [CS/자료구조(data structure)] - [자료구조] CRDT - 실시간 협업 애플리케이션을 위한 데이터 타입 [자료구조] CRDT - 실시간 협업 애플리케이션을 위한 데이터 타입개요요즘에 연구실 형과 새로운 프로젝트를 시작하였다. 프로젝트에 요구되는 기술 중 하나로 여러 사용자와 실시간으로 협업이 가능해야 한다는 항목이 있다. 우리는 실시간 협업 프로그램으mk-develop.tistory.comCRDT는 크게 두 종류로 나뉜다고 했다. 바로 작업 기반 CRDT와 상태 기반 CRDT이다. 본 글에서는 작업 기반 CRDT중 하나인 Protocol에 대해 다룬다. 본 글을 완벽하게 이해하기 위해선 이벤트소싱과 vecto..

개요요즘에 연구실 형과 새로운 프로젝트를 시작하였다. 프로젝트에 요구되는 기술 중 하나로 여러 사용자와 실시간으로 협업이 가능해야 한다는 항목이 있다. 우리는 실시간 협업 프로그램으로 노션, Figma, Google Docs와 같은 프로그램을 사용한다. 그렇다면 위와 같은 프로그램은 도대체 어떻게 실시간으로 협업이 가능하게 만들었을까? 이는 CRDT를 사용하였기에 가능하다. 그렇다면 CRDT가 무엇인가? 이에 대해 간단하게 알아보았고 이해하기 쉽게 정리해 보았다.본 글에서는 피어라는 용어가 등장한다.피어는 서로간의 컴퓨터라고 생각하며 읽으면 된다.CRDT - Conflict-free Replicated Data TypeCRDT는 Conflict-free Replicated Data Type의 줄임말이다...

개요클로저는 공식 문서에서 다음과 같이 설명된다.클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합입니다. 즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공합니다. JavaScript에서 클로저는 함수 생성 시 함수가 생성될 때마다 생성됩니다. 직관적으로는 다음과 같은 의미를 가진다. 클로저는 함수가 “자기 주변의 변수”를 기억해서, 나중에도 계속 사용할 수 있게 해주는 기능이다. 즉 클로저를 쓰면 다음과 같은 이점을 가질 수 있다.변수를 보호하고 감출 수 있다. (은닉)값을 유지할 수 있다. (상태 유지)콜백, 비동기 함수 등에서 엄청 유용하게 쓰인다.해당 내용들을 이해하기 위해선 먼저 자바스크립트의 스코프에 대한 이해가 필요하다.2024.01.03 - [C..

개요이벤트는 프론트엔드 프로그래밍의 핵심이다.때문에 프론트엔드에서 이벤트가 어떻게 처리되는지 흐름을 정리해 보았다.내용을 이해하기 위해 사전에 이벤트와 이벤트 핸들러가 무엇인지 알아야 한다.✅ 이벤트(Event)사용자가 어떤 행동을 했을 때 발생하는 사건.예) 클릭(click), 키 누름(keydown), 마우스 움직임(mousemove), 입력(input) 등✅ 이벤트 핸들러(Event Handler)이벤트가 발생했을 때 실행되는 함수.예) 버튼을 클릭하면 어떤 코드를 실행하고 싶을 때, 그게 핸들러이다.Event interface우리가 웹에서 실행하는 이벤트는 자바스크립트의 Event interface에 맞춰서 생성된 객체이다. 자바스크립트에서 이벤트는 다음 코드로 정의된다.interface Even..

개요HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜이다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트 - 서버 프로토콜이기도 하다. HTTP 프로토콜과 보안성을 높이고 지연 시간을 줄이기 위한 HTTP의 특징을 알아보려고 한다. 하나의 웹 문서는 HTTP 프로토콜로부터 불러온 텍스트, 레이아웃 설명, 이미지, 비디오, 스크립트 등의 하위 문서들로 구성된다.HTTP란?1990년대 초에 설계된 HTTP는 계속해서 진화해온 확장 가능한 프로토콜이다. HTTP는 애플리케이션 계층 즉 OSI 7계층에서 응용 계층에 속하는 프로토콜로, 신뢰 가능한 전송 프로토콜이라면 이론상으론 무엇이든 사용이 가능하지만 보통 TCP 혹은 암호화된 TCP인 TLS를 통해 전송된다..

개요사용자는 빠르고 상호작용이 원활한 컨텐츠로 이루어진 웹 경험을 원한다. 따라서 개발자는 이 두가지 목표를 달성해야 한다. 브라우저가 어떻게 동작하는지 이해한다면 향후 실제 성능을 향상시키는 고민을 할 때 큰 도움이 될 것이다.웹 성능의 두가지 문제점지연 시간웹을 빠르게 로드하는데 있어 지연 시간은 이겨내야할 중요한 문제이다. 네트워크 지연시간은 네트워크를 통해 컴퓨터가 바이트를 전송하는데 걸리는 시간을 의미한다. 웹을 빠르게 로드하기 위해 신경써야 할 것은 최대한 빠른 요청과 CDN을 통한 캐싱 및 지리적 분산, HTTP/2 이상 프로토콜 적용, 로드 밸런싱, 리소스 및 코드 최적화, 브라우저 캐싱, DNS 최적화 등 여러 요소가 있다.     브라우저는 싱글 쓰레드로 동작한다.대부분의 브라우저는 싱..

개요 Scope 는 범위라는 뜻을 가진다. Javascript에서 scope는 변수에 접근할 수 있는 범위를 뜻한다. 주로 동적 스코프, 정적 스코프(렉시컬 스코프), 블록레벨 스코프의 3가지 스코프가 있다. 동적 스코프 동적 스코프는 함수를 호출한 위치에 따라 상위 스코프를 결정한다. 결론적으로 말하자면 자바스크립트는 동적 스코프를 사용하지 않는다. 자바스크립트에서 함수와 스코프를 참조할 때에는 어디에서 호출되었는가만 보기 때문이다. 예시 코드 const func1 = () => { console.log(a); } const func2 = () => { let a = 2; func1(); } let a = 1; func2(); 위의 코드에서 func2 함수를 호출하면 콘솔에는 1가 출력된다. 간단하게 ..

개요 코드 블럭은 C++일수도 있고, 수도코드, 의사코드 일수도 있다. 점근적으로 n이 커질 때, 점근적 런타임과 점근적 메모리 문제의 크기를 설명하는 변수, n이던 아니던 vertex의 개수던 edge의 개수던 이런 parameter를 표현하는 것이 첫번째 단계이다. 알고리즘의 asymptotic behavior은 이 알고리즘이 n이 커졌을 때, 문제의 크기가 커졌을 때 어떻게 행동하는지, 과연 이 알고리즘이 n이 아주 큰 상황에서도 잘 동작하는지에 대한 정보를 제공한다. 예를 들어 A는 세타오브 n square이고 B는 n log n일 때 n의 값이 2k일 때는 A의 경우 4k square B의 경우 2k log k + 2k 이다. 하지만 2k에서 10k로 5배 증가시킨다면 A의 요구시간은 5 * 5..