WEB SERVICE
Type288
행동과 동기를 함께 살펴 288가지 조합 중 나의 이야기를 만나는 성향 테스트
DEV NOTES & PROJECT STORIES
만들며 배운 것을
기록하고 공유합니다.
DailBit은 개발 기록을 쌓는 기술 블로그입니다.
문제 해결 과정, 설계 판단, 직접 만든 서비스를 운영하며 겪은 시행착오를 글로 정리합니다.
15Notes
29Project stories
01 · LATEST NOTES
최근 기록
제품을 만들고 운영하며 배운 기술, 비교와 선택의 기준, 점검 목록을 정리합니다.
MySQL 인덱스 기초를 100만 건으로 확인하기: 단일·멀티 컬럼·커버링 인덱스와 쓰기 비용
MySQL에서 더미 데이터 100만 건을 만들어 인덱스 전후 조회 속도를 비교하고, 인덱스를 많이 걸면 INSERT가 얼마나 느려지는지, 멀티 컬럼 인덱스의 순서와 커버링 인덱스가 왜 빠른지 정리합니다.
#Database#MySQL#Backend
무작위 짝 배정 코드를 다시 읽다: sort 셔플의 편향과 제한 조건이 만든 무한 루프
OTO의 짝·팀 배정 코드를 시뮬레이션으로 검증하며 발견한 세 가지 문제(sort 기반 셔플의 편향, 조건 불만족 시 스택 오버플로, 해답이 있어도 멈추는 팀 배정 루프)와 Fisher–Yates 셔플, 시도 횟수 제한, 백트래킹으로 고치는 방법을 정리합니다.
#TypeScript#Algorithm#Testing#OTO
Vite + React SPA를 사전 렌더링하는 30줄 스크립트: OTO와 토크잡이의 빌드 구조
프레임워크 없이 Vite의 SSR 빌드와 renderToString으로 주요 경로를 정적 HTML로 만든 방법, hydrateRoot로 이어 붙이는 방식, 그리고 경로별 title·canonical을 바꾸지 않으면 생기는 SEO 문제를 실제 빌드 결과로 정리합니다.
#React#Vite#SEO#OTO
MapLibre로 성경 인물의 이동 경로 애니메이션 만들기: 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#Type288
288개 결과 페이지를 정적으로 만들고 개인 점수만 얹기: Type288의 Next.js static export 설계
Type288의 288개 결과를 generateStaticParams로 미리 생성하고, 3MB 결과 데이터를 서버 컴포넌트에만 두어 번들에서 빼고, 테스트 직후의 개인 점수는 sessionStorage와 useSyncExternalStore로 덧입힌 구조를 정리합니다.
#Next.js#SEO#React#Type288
Next.js static export를 Cloudflare Pages에 배포하기: 19개 서비스를 운영하며 정리한 설정
output: export, trailingSlash, 이미지 최적화 해제부터 wrangler pages deploy, _headers 캐시 설정, 빌드 시 ads.txt 생성, 환경 변수가 번들에 들어가는 시점까지 DailBit 서비스들의 실제 설정을 기준으로 정리합니다.
#Next.js#Cloudflare#배포#포모동
02 · BROWSE BY TOPIC
주제별로 읽기
Frontend
Next.js 메타데이터 상속의 함정: 블로그 목록의 og:url이 홈을 가리킨 이유
dailbit.com에서 블로그 목록 페이지의 og:url이 홈 주소로, 글 상세의 트위터 카드가 사이트 기본값으로 나가던 원인을 App Router 메타데이터의 얕은 병합 규칙에서 찾고, 페이지별 메타데이터 헬퍼로 고친 과정을 정리합니다.
#Next.js#SEO
Next.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#인타바
Backend
MySQL 인덱스 기초를 100만 건으로 확인하기: 단일·멀티 컬럼·커버링 인덱스와 쓰기 비용
MySQL에서 더미 데이터 100만 건을 만들어 인덱스 전후 조회 속도를 비교하고, 인덱스를 많이 걸면 INSERT가 얼마나 느려지는지, 멀티 컬럼 인덱스의 순서와 커버링 인덱스가 왜 빠른지 정리합니다.
#Database#MySQL#Backend
무작위 짝 배정 코드를 다시 읽다: sort 셔플의 편향과 제한 조건이 만든 무한 루프
OTO의 짝·팀 배정 코드를 시뮬레이션으로 검증하며 발견한 세 가지 문제(sort 기반 셔플의 편향, 조건 불만족 시 스택 오버플로, 해답이 있어도 멈추는 팀 배정 루프)와 Fisher–Yates 셔플, 시도 횟수 제한, 백트래킹으로 고치는 방법을 정리합니다.
#TypeScript#Algorithm#Testing#OTO
성향 테스트 채점에서 동점을 공정하게 처리하는 법: Type288의 해시 타이브레이크와 node:test
Type288 채점 로직에서 완전 동점을 번호 순서가 아닌 응답 해시(FNV-1a)로 가르는 이유, 리커트·A/B 문항을 같은 무게로 합치는 방법, 의존성 없이 node:test로 채점 규칙을 고정한 과정을 정리합니다.
#TypeScript#Algorithm#Testing#Type288
03 · PROJECT STORIES
글로 이어지는 프로젝트
WEB SERVICE
포모동
집중력 향상을 위한 포모도로 타이머와 앰비언트 사운드
WEB SERVICE
인타바
운동의 흐름을 놓치지 않는 인터벌 타바타 타이머
WEB SERVICE
OTO
짝꿍과 팀을 빠르고 공정하게 구성하는 도구
04 · ABOUT DAILBIT
매일 쌓는 작은 기록과 코드가
하나의 빛이 됩니다.
DailBit은 Daily와 Bit의 조합입니다. 매일의 작은 생각을 기록하고, 코드 한 비트씩 쓸모 있는 도구로 연결한다는 뜻을 담았습니다. 이곳에는 개발자 mirr56이 화면, 백엔드, 배포와 관측까지 직접 다루며 배운 내용을 모아 둡니다. 소개 보기 →
05 · TECH STACK
기록하는
기술 주제
블로그와 프로젝트 이야기에서 다루는 기술 영역입니다. 화면 뒤의 시스템부터 배포 이후의 관측까지 정리합니다.
Frontend
React · React Native · Next.js · Remix
Backend
Python · FastAPI · Node · NestJS · Elysia · Fastify
Data
MySQL · MongoDB · Redis
Infra & Ops
Docker · Docker Compose · GitHub Actions · Prometheus · Loki · Grafana · Alloy
KEEP READING