우든이 블로그

지난 포스팅에 이어 big-calendar 라이브러리를 사용해서 조금 더 다양한 기능을 구현해 보았다. 일정 드래그 앤 드롭 / 공휴일 정보 제공 / 스크롤에 따른 이동 등 구현한 기능에 대해 정리해보려고 한다. 나의 캘린더 컴포넌트는 아래와 같이 설정하였다. 이전에 구현했던 캘린더 기능에 몇 가지 기능을 추가하였다.  event.isDraggable} /** 4개의 슬롯으로 간격 */ timeslots={4} /** 15분 간격 */ step={15} onEventDrop={handleMoveEvent} onEventResize={handleResizeEvent} onDoubleClickEv..

오늘은 big-calnear 라이브러리에 대해 정리해보려고 한다. 최근 참여하고 있는 프로젝트에서 구글 캘린더와 같이 일정을 관리하는 기능을 구현해야하는 작업이 생겼다.원래에는 캘린더를 직접 구현해보려고 시도 중이었다. 그러나 개발 일정과 작업량을 고려했을 때, 캘린더에 너무 많은 시간을 할애할 것 같다는 생각이 들었다. 그래서 좀 더 효율적으로 작업할 수 있는 방법을 찾아보기로 했다. 기존의 라이브러리를 활용하면 시간을 절약하면서도 필요한 기능을 효과적으로 구현할 수 있을 것이라고 생각했다.  :D 라이브러리 선정이유 아래 세가지 라이브러리 중에 react-big-calendar를 선택한 가장 큰 이유는 react-big-calendar가 fullcalendar에 비해 UI 커스터마이징의 자유도가 높아..

MediaPipe와 Canvas를 사용하여 비디오에서 가상 배경을 구현했다. 이 과정에서 globalCompositeOperation에 대한 지식이 필요했고, 이 과정에서 공부한 내용을 기록해보려고 한다. 추가적으로 가상 배경에는 globalCompositeOperation를 어떻게 활용했는지도 정리해보려고 한다. Ɛ( ◕ _· ◕)3 :D CanvasRenderingContext2D Canvas API의 일부로, 요소의 드로잉 표면에 대한 2D 렌더링 컨텍스트를 제공한다. 이 인터페이스는 도형, 텍스트, 이미지 등의 객체를 그리는데 사용한다.  const canvas = document.createElement("canvas");const ctx = canvas.getContext("2d");  :D..

지금까지 타입스크립트를 다루면서 유틸리티 타입을 잘 사용하지 않는다는 것을 깨달았다. 특히, 유틸리티 타입에 대한 이해가 부족한 부분이 크다고 생각이 들었다. ｡° ૮₍°´ᯅ`°₎ა °｡ 이번 기회에 다시 공부하고 다루어보면서 앞으로는 타입스크립트를 더 잘 활용할 수 있게 노력해야겠다.  :D 유틸리티 타입(Utility Type) TypeScript에서 제공하는 특수한 형태의 타입을 의미한다. 이미 정의된 타입을 변환할 때 사용하는 문법으로, 유틸리티 타입을 활용하여 간결하게 타입을 정의할 수 있다. 이러한 타입은 크게 맵드 타입(mapped type)과 조건부 타입(conditional type)으로 나눌 수 있다. 맵드 타입(mapped type)이란, 기존에 정의된 타입을 새로운 타입으로 변환해주..

몇 개월간 webRTC 기반의 화상 서비스 개발에 참여해왔다. 당시에 공부했던 내용을 이번 기회에 차근차근 정리해보려고 한다. 오늘 포스팅에는 주요 개념에 대한 이론만 정리해보려고 한다. :D WebRTC(Web Real-Time Communication) 웹 브라우저와 모바일 애플리케이션이 중간 서버나 플러그인 없이 서로 직접 통신할 수 있도록 하는 표준과 프로토콜 집합이다. 오디오 및 비디오 통화를 포함한 실시간 데이터 전송을 지원하는 기술이며, P2P(Peer to Peer) 통신 모델을 사용한다. 아래 객체들을 통해 peer간 데이터 교환이 이루어지며, RTCPeerConnection 객체들이 적절하게 데이터를 교환할 수 있게 처리하는 과정을 시그널링(Signaling)이라고 한다.MediaStr..

오늘은 Jōtai 상태 관리 라이브러리에 대해 간단하게 정리해 보려고 한다. 사용방법보다는 공부하면서 새롭게 알게 된 내용이나 중요한 개념을 위주로 다루어 보려고 한다.  :D Jōtai를 사용한 이유많은 상태 관리 라이브러리가 존재하지만, Jōtai를 선택한 이유는 이번 프로젝트에서 전역적으로 관리할 데이터가 많지 않았기 때문이다. Jōtai는 가벼운 상태 관리 라이브러리로, 필요에 따라 간편하게 상태를 정의하고 사용할 수 있다. 특히, 일부 페이지에서 필요한 데이터를 가져오거나 전역 모달을 처리하는 용도로 사용하기에 효율적일 수 있다고 생각했다.   :D Jōtai Jōtai(조타이)는 bottom-up 접근법으로 작은 단위의 상태(atom)를 위로 전파할 수 있는 구조를 가진다. 또한, Contex..

최근에 진행했던 프로젝트에서 React Router와 Tanstack Query를 사용하여 애플리케이션 라우터를 설정했다. 오늘은 이를 적용하며 공부한 내용 중 React Router를 위주로 정리해보려고 한다. React Router v6.4에는 아래와 같은 라우터들이 추가되었다. 아래 라우터와 함께 action / errorElement / lazy / loader 등 data API도 함께 제공되고 있다. (공식 문서에서는 새롭게 추가된 라우터 중 하나로 업데이트 하는 것을 권장하고 있다. 추가적으로 data API는 현재 React Native에서는 지원하고 있지 않다.) createBrowserRouter - DOM History API를 사용하여 URL을 업데이트하고 히스토리 스택을 관리한다...

:D Route Matching tanstack Router는 Route Tree에 정의된 순서와 상관없이 아래와 같은 순서로 라우트 매칭을 정렬한다. Index RouteStatic Route (most specific to least specific)Dynamic Route (longest to shortest)Splat/Wildcard Routes  :D Outlets 중첩 라우트에서 컨텐츠를 어디에 렌더링 할지 알려주기 위한 방법이다. 즉, 아웃렛 컴포넌트는 매칭될 수 있는 자식 라우트를 렌더링 하는 데 사용한다. 라우트 트리 내 어디서든 렌더링 될 수 있으며, 매칭되는 자식 라우트가 없는 경우 null을 렌더링한다.import { createRootRoute } from '@tanstack/re..

오늘 포스팅에서는 Tanstack Router 설치 및 기본 설정, Router와 NotFound Error처리에 대해 정리해보려고 한다.  :D 설치 및 기본 설정 아래 명령어를 통해 설치할 수 있으며, 요구사항은 다음과 같다.React v18.x.xReactDOM v18.x.xTypescript v5.x.x (OPTIONAL)npm install @tanstack/react-router 만약, Vite나 다른 번들러를 사용한다면 아래 명령어를 이용해 설치한다.npm install --save-dev @tanstack/router-plugin @tanstack/router-devtools 설치 후에는 vite.config.ts 파일에 아래 내용을 추가한다. (해당 프로젝트에서도 Vite를 사용하고 있다..

:D Tanstack Router Modern and scalable routing for React applicationsA fully type-safe React router with built-in data fetching,stale-while revalidate caching and first-class search-param APIs.  Tanstack Router는 Typescript의 타입 시스템을 활용하여 라우팅을 관리하며 타입 안전성을 보장하는 것을 목표로 설계되었다. 즉, 개발자가 런타임 오류를 사전에 방지하고 코드를 더욱 안정적으로 유지할 수 있게 한다.  :D Code Splitting(코드 분할) Tanstack Router는 Code Splitting을 통해 애플리케이션 성능 ..