유피노트

프론트엔드/React

한 기능을 수직으로 덮는 테스트 피라미드: Weekly Report 기능의 50+ 테스트 사례 연구

주간 리포트 하나를 출시하는 데 유닛 41개 + E2E 10개 = 51개 테스트가 필요했다. 같은 기능을 왜 여러 층위에서 반복 검증하는가? 피라미드 각 층의 역할과 '어떤 테스트를 어디에 둘지'의 구체적 선택.

프론트엔드/Next.js

URL 쿼리로 토글하는 인라인 전체화면: Next.js App Router + useRouter().replace() 패턴

'별도 /fullscreen 라우트 만들지 말고, 같은 페이지에서 ?panel=full 쿼리로 토글합시다.' PR 리뷰 코멘트 하나로 페이지 전체가 단순해졌다. URL을 상태로 삼는 패턴과 그 한계.

백엔드/API설계

UI는 좁게, API는 넓게: 타임존 설정의 두 단계 검증 전략

조직별 타임존 설정에서 드롭다운은 6개만 보여주지만 API는 IANA 전체를 받습니다. 이 '좁은 UI, 넓은 API' 패턴이 왜 단순 화이트리스트보다 나은지, 그리고 Intl.DateTimeFormat으로 어떻게 구현하는지.

백엔드/API설계

메모 한 통에 10MB? API 입력 길이 제한으로 무제한 텍스트 남용 막기

리포트 메모 필드에 아무 제한 없이 문자열을 받고 있었다. 악의든 실수든 누군가 MB 단위 텍스트를 넣으면 DB와 네트워크가 먼저 비명을 지른다. 5분이면 추가할 수 있는 방어선을 PR 리뷰에서 발견한 기록.

백엔드/API설계

new Date(2026, 3, 6)의 9시간 드리프트: 테스트 픽스처는 왜 반드시 Date.UTC()여야 하는가

CI는 초록불인데 로컬에선 빨간불이 떴다. 원인은 테스트 픽스처의 new Date(2026, 3, 6) 한 줄. 로컬 타임존 생성자는 개발자 KST와 CI UTC 사이에서 9시간 어긋나고, 주차 경계 테스트를 조용히 깨뜨렸다.

백엔드/Prisma

Prisma $extends 테넌트 격리와 $transaction 사이의 타협: 수동 orgId 주입 전략

SaaS 모드에서 Project 쿼리에 organizationId를 자동 주입하던 $extends 확장이 $transaction 콜백 안에서는 동작하지 않았다. 테넌트 격리를 포기할 수도, 트랜잭션을 포기할 수도 없어서 '수동 orgId 주입' 패턴으로 절충한 기록.

백엔드/API설계

Active, Ongoing, Completed: 주차 기반 태스크 상태 쿼리의 3가지 의미론과 그 함정

'이번 주 진행중인 태스크'를 쿼리하는 방법이 세 가지나 있었다. '주 중에 전환된', '주 동안 어느 시점이라도', '주 시작 시점에'. 말로는 비슷하지만 SQL은 전혀 다르고, 틀리면 이전 주부터 계속 진행되던 태스크가 리포트에서 사라진다.

백엔드/API설계

과거 주차 조회에서 '그 당시 최신 스프린트'는 뭐였나: weekEnd 기준 latest sprint 설계

주간 리포트 API가 '이번 주의 latest sprint' 개념으로 태스크를 골라왔는데, 과거 주차를 조회하면 '그 당시'가 아닌 '지금의' latest sprint가 튀어나왔다. carry-over 없이 버려진 태스크까지 리포트에 다시 나타나는 버그였다.

백엔드/Prisma

순차 루프를 10배 빠르게: Promise.all 병렬화 + findMany distinct 배치화로 API 응답 시간 잡기

주간 리포트 API가 과제 수에 비례하여 느려졌다. for 루프의 sprint+task 쿼리를 Promise.all로 병렬화해 10배, findFirst N회를 findMany(distinct) + createMany 2쿼리로 바꿔 50배. 두 최적화를 한 커밋에 담은 기록.

백엔드/Prisma

과거의 진실을 기록하는 법: Append-only ProjectStatusLog로 구현한 historical 주간 리포트

이번 주 주간 리포트를 보는데, 지난 달에 완료된 과제가 목록에서 사라졌다. 현재 상태(status=완료)로 필터하면 과거 주차 리포트가 오염된다 — 이 문제를 append-only 로그로 해결한 방법.

백엔드/Prisma

findUnique → create의 함정: Prisma get-or-create 패턴의 P2002 레이스 컨디션과 3줄짜리 해법

'없으면 만들어'는 간단해 보이지만 동시 요청 2개가 들어오면 둘 다 'findUnique가 없다'를 거쳐 둘 다 create를 호출합니다. unique constraint에 걸려 P2002가 터지는 전형적인 get-or-create 레이스. try/catch 3줄로 우아하게 풀었습니다.

백엔드/API설계

Docker는 UTC, 사용자는 KST: Intl.DateTimeFormat만으로 만든 tz-aware ISO Week 유틸리티

주간 리포트의 주차 경계가 서버 컨테이너(UTC)와 사용자(KST) 사이에서 어긋났다. date-fns-tz나 luxon을 도입하는 대신, Node 22의 full-ICU Intl.DateTimeFormat만으로 IANA 타임존 ISO week 유틸리티를 구현한 기록.

도구/GitHub

Git from Hell 탈출기: checkout 버리고, 좀비 브랜치 자동 청소까지

아직 git checkout 쓰시나요? 현대적 Git 명령어와 좀비 브랜치 자동 청소 alias를 실전 경험 기반으로 정리했습니다.

AI/Claude Code

Rust TUI 스크린샷과 데모 GIF 만들기: ratatui와 Alternate Screen의 함정

Rust TUI 앱의 스크린샷과 데모 GIF를 만들려다 vhs와 asciinema가 모두 먹통이 되는 경험. 원인은 alternate screen buffer였고, TestBackend로 SVG를 직접 생성하는 접근과 alternate screen을 끄는 모드를 추가해 GIF 녹화를 살리는 두 가지 해결책을 정리합니다.

백엔드/인증-보안

Next.js에서 2FA/TOTP 인증 구현하기: 라이브러리 없이 RFC 6238 표준 준수

외부 라이브러리 없이 RFC 6238 TOTP 표준을 직접 구현했습니다. Dynamic Truncation 알고리즘 동작 원리와 Next.js 미들웨어에서 2FA를 강제하는 방법을 공유합니다.

백엔드/인증-보안

Next.js App Router에서 CSRF 토큰 관리하기: Double Submit Cookie 패턴

CSRF 공격을 방어하기 위해 Double Submit Cookie 패턴을 구현했습니다. Edge Runtime 호환, 타이밍 공격 방지, 그리고 useCsrfToken 훅까지의 경험을 공유합니다.

프론트엔드/크롬확장

크롬 확장 보안 강화: CSP와 최소 권한 원칙

크롬 확장은 강력한 권한을 가지므로 보안이 중요합니다. CSP로 인라인 스크립트와 동적 코드 실행을 차단하고, 불필요한 권한과 리소스 노출을 제거하여 공격 표면을 최소화했습니다.

프론트엔드/크롬확장

Chrome Alarms API로 자동 잠금 타이머 구현하기

Service Worker가 종료되면 setTimeout도 사라집니다. chrome.alarms API로 Service Worker 수명과 독립적인 자동 잠금 타이머를 구현했습니다.

프론트엔드/Next.js

Next.js 로컬 개발 환경 HTTP → HTTPS 전환 완전 가이드: mkcert, NextAuth v5 쿠키 문제 해결까지

로컬 개발 환경에서 HTTPS가 필요할 때 — mkcert 인증서 생성부터 NextAuth v5의 쿠키 프리픽스 문제 해결까지, 실전에서 마주치는 모든 함정과 해결법을 정리합니다.

AI/Claude Code

/last30days 플러그인 셋업부터 Reddit 댓글 무료 최적화까지 — Claude Code 리서치 자동화

Claude Code의 /last30days 스킬 셋업부터 코드 수정까지. 키체인 팝업 해결, NoneType 버그 수정, Reddit 댓글 무료 최적화 방법을 공유합니다.

프론트엔드/크롬확장

크롬 확장 다국어(i18n) 구현하기: 런타임 언어 전환까지

크롬 확장에서 다국어를 지원하려면 Chrome i18n API만으로는 부족합니다. 런타임 언어 전환, 선언적 번역 적용, 여러 페이지 동기화까지 지원하는 커스텀 i18n 모듈을 구현했습니다.

프론트엔드/크롬확장

Chrome Storage로 실시간 상태 동기화 구현하기

popup에서 잠금 해제했는데 options 페이지는 여전히 잠금 화면? chrome.storage.onChanged 이벤트로 여러 페이지 간 상태를 실시간 동기화하는 패턴을 정리했습니다.

AI/Claude Code

Claude Code iMessage 채널 연동: 터미널 없이 핸드폰으로 AI 코딩 어시스턴트 사용하기

Claude Code에 iMessage 채널을 연동해서 터미널 없이 핸드폰으로 AI 코딩 어시스턴트를 사용하는 방법. 설정 과정에서 만나는 bun 미설치, FDA 권한 등 흔한 함정과 해결법을 정리했습니다.

인프라/네트워크

Tailscale VPN 적용 후 GitHub Actions SSH 배포 복구하기

Oracle Cloud 서버에 Tailscale SSH를 적용했더니 CI/CD 배포가 깨졌습니다. appleboy/ssh-action에서 tailscale ssh로 전환하여 SSH 키 없이 안전하게 배포하는 전체 과정을 공유합니다.

백엔드/API설계

API 에러 처리 표준화: withErrorHandler 패턴으로 중앙집중화하기

API 엔드포인트가 늘어나면서 에러 처리 코드가 중복되고 응답 형식도 제각각이었습니다. withErrorHandler 래퍼와 세분화된 에러 클래스로 문제를 해결한 경험을 공유합니다.