Search for a command to run...
Series
러프하게 공부 내용을 정리합니다.
상황 정리 모노레포 프로젝트에서 어드민 앱(Vite, React.js)과 웹 앱(Next.js), React Native 모바일 앱 총 3가지 앱에서 공통으로 사용하는 types와 그 helper 들을 packages/database라는 공통 패키지로 관리하기 위해 리팩토링을 진행했습니다. 기존 코드는 ai를 적극 활용해서 만들어진 프로젝트라서, 속도감 있게 mvp 기능이 완성되었지만 QA를 진행하기 어려운 수준으로 구조가 망가져 있었거든요. ...
서론 JS의 reduce함수를 통해 누적합을 구현하는 방법을 알아보자. 본론 누적합이란? 누적합은 배열의 앞에서부터 현재 위치까지의 합을 미리 계산해 놓는 기법이다. 이를 통해 특정 구간의 합을 O(1) 시간에 구할 수 있다. 원본 배열: [1, 3, 5, 7, 2] 누적 배열: [0, 1, 4, 9, 16, 18] i번째 수부터 j번째 수 까지의 합 = prefix[j] - prefix[i-1] reduce를 활용한 구현 const crea...
문제 상황 전역적으로 애니메이션을 재사용하기위해 만든 ButtonBase 컴포넌트에서 button element의 모든 속성을 받을 수 있도록 개선하고 싶었다. interface ButtonBaseProps { children: React.ReactNode; className?: ClassValue; onClick: (e?: React.MouseEvent) => void; hoverSoundSrc?: string; ...
본문 clamp() CSS 함수는 min max 값으로 설정된 값의 사이에서 특정 값을 집어내는 역할을 하는 함수이다. 해당 함수는 세 가지 파라미터를 가진다 : 최솟값, 우선되는 값, 최대값 clamp(MIN, VAL, MAX)는 max(MIN, min(VAL, MAX))와 동일하게 동작한다. CSS 문법 clamp(min, preferred, max) min : Optional. 최솟값을 설정한다. preferred : Requir...
들어가며 Supabase Realtime은 WebSocket을 직접 구현하지 않고도 실시간 양방향 통신을 구현할 수 있게 해주는 강력한 기능이다. 이번 포스트에서는 Supabase Realtime의 핵심 개념들과 실제 오목 게임 구현했던 내용을 정리한다. 본론 1. Supabase Realtime 핵심 개념 Channel (채널) 채널은 실시간 통신을 위한 논리적 공간이다. 특정 주제나 그룹에 대한 이벤트를 주고받을 수 있다. // 방별로 고유...
이번 포스트에서는 함수의 시그니처를 커스텀 타입으로 정리하여 함수를 좀 더 편리하게 활용하기 위해 사용하는 커스텀 타입인 Handler 타입에 대해 알아보려고 한다. custom Handler 타입 export type Handler<T = void, R = void> = T extends void ? () => R : (arg: T) => R; 조건부 타입(Conditional Types)을 활용해서 매개변수가 있는 함수와 없는 함수...