DAILBIT NOTES
매일의 생각을
한 비트씩 기록합니다.
제품 개발, 문제 해결, 운영 과정에서 배운 내용을 정리합니다.
MySQL 인덱스 기초를 100만 건으로 확인하기: 단일·멀티 컬럼·커버링 인덱스와 쓰기 비용
MySQL에서 더미 데이터 100만 건을 만들어 인덱스 전후 조회 속도를 비교하고, 인덱스를 많이 걸면 INSERT가 얼마나 느려지는지, 멀티 컬럼 인덱스의 순서와 커버링 인덱스가 왜 빠른지 정리합니다.
#Database #MySQL #Backend무작위 짝 배정 코드를 다시 읽다: sort 셔플의 편향과 제한 조건이 만든 무한 루프
OTO의 짝·팀 배정 코드를 시뮬레이션으로 검증하며 발견한 세 가지 문제(sort 기반 셔플의 편향, 조건 불만족 시 스택 오버플로, 해답이 있어도 멈추는 팀 배정 루프)와 Fisher–Yates 셔플, 시도 횟수 제한, 백트래킹으로 고치는 방법을 정리합니다.
#TypeScript #Algorithm #Testing #OTOVite + React SPA를 사전 렌더링하는 30줄 스크립트: OTO와 토크잡이의 빌드 구조
프레임워크 없이 Vite의 SSR 빌드와 renderToString으로 주요 경로를 정적 HTML로 만든 방법, hydrateRoot로 이어 붙이는 방식, 그리고 경로별 title·canonical을 바꾸지 않으면 생기는 SEO 문제를 실제 빌드 결과로 정리합니다.
#React #Vite #SEO #OTOMapLibre로 성경 인물의 이동 경로 애니메이션 만들기: BibleFlow 지도 구현기
BibleFlow에서 경로를 따라 인물 아이콘을 움직이기 위해 위도 보정을 넣은 거리 기반 보간을 만들고, requestAnimationFrame으로 진행률을 관리하며, 줌 단계에 따라 래스터 지도를 교차 페이드한 과정을 정리합니다.
#Next.js #Animation #MapLibre #BibleFlow한글 행맨 만들기: 유니코드로 자모를 분해하고 IME 입력을 게임에 연결하기
홀리맨에서 한글 단어를 자음·모음 칸으로 나누기 위해 유니코드 음절 공식을 쓴 방법, 쌍자음과 겹모음을 다르게 다룬 이유, 조합 중인 한글 입력을 즉시 반영하며 생긴 겹모음 문제를 정리합니다.
#TypeScript #Hangul #React #홀리맨React로 만드는 작은 실시간 게임 루프: 뚝뚝의 requestAnimationFrame과 경과 시간 제한
물을 채우는 타이밍 게임 뚝뚝에서 requestAnimationFrame 루프를 React 훅으로 만든 방법, 프레임 사이 경과 시간을 40ms로 제한한 이유, ref와 상태를 나눠 쓴 구조를 정리합니다.
#React #Animation #Performance #뚝뚝브라우저에서 결과 화면을 이미지로 저장하는 세 가지 방법: 인생그래프·OTO·Type288 비교
canvas에 직접 다시 그리기, html2canvas로 DOM 캡처하기, canvas로 그린 이미지를 파일로 저장하고 Web Share API로 공유하는 방법(공유 시트는 이후 제거됨). 세 서비스에서 실제로 쓴 방식을 코드와 함께 비교하고 각각의 함정을 정리합니다.
#React #Canvas #인생그래프 #Type288성향 테스트 채점에서 동점을 공정하게 처리하는 법: Type288의 해시 타이브레이크와 node:test
Type288 채점 로직에서 완전 동점을 번호 순서가 아닌 응답 해시(FNV-1a)로 가르는 이유, 리커트·A/B 문항을 같은 무게로 합치는 방법, 의존성 없이 node:test로 채점 규칙을 고정한 과정을 정리합니다.
#TypeScript #Algorithm #Testing #Type288288개 결과 페이지를 정적으로 만들고 개인 점수만 얹기: Type288의 Next.js static export 설계
Type288의 288개 결과를 generateStaticParams로 미리 생성하고, 3MB 결과 데이터를 서버 컴포넌트에만 두어 번들에서 빼고, 테스트 직후의 개인 점수는 sessionStorage와 useSyncExternalStore로 덧입힌 구조를 정리합니다.
#Next.js #SEO #React #Type288Next.js static export를 Cloudflare Pages에 배포하기: 19개 서비스를 운영하며 정리한 설정
output: export, trailingSlash, 이미지 최적화 해제부터 wrangler pages deploy, _headers 캐시 설정, 빌드 시 ads.txt 생성, 환경 변수가 번들에 들어가는 시점까지 DailBit 서비스들의 실제 설정을 기준으로 정리합니다.
#Next.js #Cloudflare #배포 #포모동Next.js 메타데이터 상속의 함정: 블로그 목록의 og:url이 홈을 가리킨 이유
dailbit.com에서 블로그 목록 페이지의 og:url이 홈 주소로, 글 상세의 트위터 카드가 사이트 기본값으로 나가던 원인을 App Router 메타데이터의 얕은 병합 규칙에서 찾고, 페이지별 메타데이터 헬퍼로 고친 과정을 정리합니다.
#Next.js #SEONext.js static export에서 한글 OG 이미지 빌드하기: next/og, woff2 문제, 폰트 서브셋
dailbit.com의 블로그 글과 프로젝트 페이지마다 1200×630 공유 이미지를 빌드 시점에 생성한 방법을 정리합니다. Satori가 woff2를 읽지 못하는 문제, Google Fonts의 text 파라미터로 필요한 글자만 받는 방법, 네트워크 실패에 대비한 폴백까지 다룹니다.
#Next.js #SEO #Cloudflare오디오 파일 없이 운동 타이머 비프음 만들기: OscillatorNode와 상태 업데이트의 함정
인타바의 운동·휴식 전환음을 Web Audio API의 OscillatorNode로 만든 방법과, setState 업데이트 함수 안에서 소리를 재생하면 생기는 문제, 오디오 시계로 음을 예약하는 개선안을 정리합니다.
#React #Web Audio #인타바브라우저 카운트다운 타이머가 밀리는 이유: 포모동·인타바 타이머를 다시 설계하며
setInterval로 1초씩 빼는 타이머가 백그라운드 탭과 화면 꺼짐에서 실제 시간과 어긋나는 이유를 살펴보고, 종료 시각을 기준으로 남은 시간을 계산하는 방식으로 바꾸는 방법을 코드와 함께 정리합니다.
#React #Performance #포모동 #인타바포모동 앰비언트 사운드 믹서 구현기: HTMLAudioElement로 여러 트랙 섞기
빗소리·카페·벽난로·밤 방 네 트랙을 동시에 재생하고 볼륨을 따로 조절하는 믹서를 React 훅으로 만들며 겪은 비동기 재생 경쟁, 페이드 문제, localStorage 저장 방식을 정리합니다.
#React #Web Audio #포모동