카테고리

프론트엔드

63개의 글

프론트엔드

법률정보 화면에 출처와 기준일을 남기는 프론트엔드 원칙

법령·판례 검색 화면에서 출처와 기준일이 빠지지 않게 만드는 컴포넌트 타입 설계, 확인 중 상태, 날짜 표시 함정을 정리했어요.

2026년 10월 14일6분 읽기

프론트엔드

AI가 '실행됨'과 '검증됨'을 섞지 못하게 만드는 상태 UI

AI 에이전트 작업 기록에서 실행과 검증을 분리한 상태 모델과 배지 컴포넌트를 1인 개발 관점으로 구현한 과정이에요.

2026년 10월 13일5분 읽기

프론트엔드

제10조가 제2조 앞에 오는 정렬 버그, 조문 번호 natural sort로 고치기

법령 조문 목록에서 제10조가 제2조 앞에 오는 문자열 정렬 버그를 Intl.Collator numeric 옵션과 '조의2' 파싱으로 해결한 프론트엔드 구현기예요.

2026년 10월 12일5분 읽기

프론트엔드

계산기 결과 화면, 저장 버튼 대신 다음 결정 버튼 만들기

금융계산기 결과를 저장만 하고 끝내지 않고, 비교 카드와 URL 복원으로 사용자가 다음 결정을 내리게 돕는 프론트엔드 구현 방법을 정리했어요.

2026년 10월 11일5분 읽기

프론트엔드

하루 2번 자동 발행 블로그에서 열어둔 탭이 ChunkLoadError를 내는 이유

자동 발행 블로그에서 오래 열어둔 탭이 ChunkLoadError로 깨지는 원인과 error.tsx 한 파일로 1회 새로고침 가드를 넣는 방법을 정리했어요.

2026년 10월 10일5분 읽기

프론트엔드

AI 에이전트 성공 응답을 믿지 않는 프론트엔드 설계

AI 에이전트의 성공 문자열 대신 멱등키와 화면 상태로 쓰기 요청을 안전하게 다루는 프론트엔드 구현 기록입니다.

2026년 10월 2일5분 읽기

프론트엔드

계산기 결과 URL 공유, 입력값 검증 설계법

계산기 결과를 URL로 공유할 때 입력값을 안전하게 복원하고 화면에서 안내하는 프론트엔드 구현 원칙을 정리합니다.

2026년 10월 1일4분 읽기

프론트엔드

shadcn v4 Base UI에서 asChild를 render로 바꾸는 법

shadcn Base UI 전환 뒤 사라진 asChild를 render prop으로 옮겨 버튼과 링크를 합성하는 화면 구현 방법입니다.

2026년 9월 30일4분 읽기

프론트엔드

농구 동호회 운영 화면, 모바일 정보 밀도 설계법

출석·라인업·경기 기록을 모바일 한 화면에서 빠르게 확인하도록 컴포넌트 우선순위와 터치 흐름을 설계하는 방법입니다.

2026년 9월 29일5분 읽기

프론트엔드

폼 제출 중복 클릭, disabled만으로 막기 어려운 이유

폼 제출 버튼의 disabled 처리만으로는 막기 어려운 중복 요청을 화면 상태와 UX 관점에서 정리해요.

2026년 9월 27일4분 읽기

프론트엔드

마음기록 앱 AI 대화에 'AI입니다' 고지를 어디에 넣을까

EU AI Act 50조 고지 의무를 마음기록 앱 채팅 화면에 구현할 때, 온보딩·상단 라벨·말풍선 배지 3곳과 React 컴포넌트 1개로 푸는 방법을 정리했어요.

2026년 9월 26일6분 읽기

프론트엔드

벡터 검색은 권한을 모른다: RAG 필터를 서버에 둔 프론트엔드 계약

RAG 검색 화면에서 user_id를 클라이언트가 보내면 안 되는 이유와, 프론트엔드가 query만 보내도록 요청 계약을 바꾼 과정을 적었어요.

2026년 9월 25일6분 읽기

프론트엔드

세션 중간에 CLAUDE.md를 고쳤더니 캐시가 사라진 이유, 화면으로 잡기

프롬프트 캐시 무효화는 로그를 눈으로 훑어서는 안 보여요. cache_read 비율을 턴별로 그리는 작은 React 패널로 원인을 찾은 과정을 정리했어요.

2026년 9월 24일7분 읽기

프론트엔드

제품은 여럿, 로고는 2개만: 1인 개발 브랜드 자산 프론트 구현

제품마다 로고를 그리는 대신 워드마크 컴포넌트와 SVG 심볼 하나, 시맨틱 토큰으로 브랜드 자산을 코드에서 파생시킨 프론트엔드 구현 기록이에요.

2026년 9월 23일5분 읽기

프론트엔드

MDX slug 중복, 빌드 깨지기 전에 잡는 30줄 검증 스크립트

MDX 프론트매터 slug가 겹치면 빌드가 깨지거나 페이지 하나가 조용히 사라져요. Node 기본 모듈만으로 30줄 안에 빌드 전 중복을 잡는 스크립트를 정리했어요.

2026년 9월 22일7분 읽기

프론트엔드

minimumReleaseAge 7일이 왜 10080일까, 분 단위 설정값을 화면에 보여준 이야기

pnpm-workspace.yaml의 minimumReleaseAge는 분 단위라 7일이 10080입니다. 이 숫자를 사람이 읽는 값으로 바꿔주는 입력 컴포넌트를 직접 만들어 봤어요.

2026년 9월 21일6분 읽기

프론트엔드

CI는 초록불인데 화면은 깨져 있었어요 — 프론트 훅이 조용히 건너뛰는 문제

로컬에선 잡히던 프론트엔드 검사가 자동 실행 환경에서만 통과하는 false-green 현상을 추적하고, 화면 단에서 증거를 남기는 구조로 바꾼 기록이에요.

2026년 9월 20일6분 읽기

프론트엔드

pnpm minimumReleaseAge 7은 7분입니다 — 단위와 설정 위치 함정

프론트엔드 의존성 추가 전 숙성 대기를 걸었는데 단위가 분이라 7분만 기다렸고, 글로벌 설정은 조용히 무시됐던 이야기예요.

2026년 9월 19일5분 읽기

프론트엔드

모바일 100vh가 주소창에 잘리는 문제, svh/dvh로 끝낸 기록

모바일 브라우저에서 100vh가 주소창 높이만큼 잘리는 이유와 svh·lvh·dvh 단위로 JS 없이 해결한 과정을 정리했어요.

2026년 9월 18일8분 읽기

프론트엔드

프로젝트마다 DB가 따로면 프론트는 뭐가 달라지나

서비스별로 DB를 분리하면 프론트엔드 화면에서는 클라이언트 인스턴스와 로딩 상태 설계가 달라집니다. 실제로 겪은 구현 패턴을 정리했어요.

2026년 9월 16일7분 읽기

프론트엔드

블롭·일러스트 없이 빈 화면 채우기: 데코 없는 empty state 컴포넌트

데코 금지 브랜드에서 그림 없이 빈 목록 화면을 설계하는 법. 상태 3종 분리, 3조각 컴포넌트, 틴트·1px 보더·8px 간격으로 채우는 구현을 정리해요.

2026년 9월 12일5분 읽기

프론트엔드

MCP 도구 스키마가 컨텍스트를 먹는다면, 화면으로 먼저 재보세요

MCP 도구 스키마를 번들 크기처럼 화면에 올려 재고, 스키마 크기와 호출 빈도 2축으로 어떤 도구를 CLI로 내릴지 정하는 프론트엔드식 기준을 정리해요.

2026년 9월 11일5분 읽기

프론트엔드

FastAPI 응답을 camelCase로: Pydantic CamelModel 하나로 Next.js 필드명 통일

Pydantic to_camel alias 생성기를 베이스 모델에 한 번 걸어 FastAPI 응답을 camelCase로 바꾸고, Next.js 컴포넌트에서 변환 유틸을 지우는 방법을 정리했어요.

2026년 9월 10일5분 읽기

프론트엔드

탈퇴 화면, 결제 이력은 어떻게 보여줘야 할까

결제 이력이 남는 탈퇴 플로우를 프론트에서 어떻게 설계했는지, 화면 구성과 컴포넌트 분리 기준을 정리했어요.

2026년 9월 9일7분 읽기

프론트엔드

Supabase Free 7일 잠듦과 무한 스피너, Cron keepalive

Supabase 무료 프로젝트는 7일 비활동이면 멈춰요. Cloudflare Workers Cron으로 깨워 두는 법과, 잠든 서버를 만난 화면이 무한 로딩 대신 보여줄 것을 정리했어요.

2026년 9월 7일6분 읽기

프론트엔드

launchd에서만 죽는 프론트 빌드 스크립트, 환경변수 휘발 디버깅기

터미널에선 잘 되던 Next.js 빌드·OG 이미지 스크립트가 launchd에선 죽는 이유와, 환경변수 휘발을 잡는 3단계 점검법을 정리했어요.

2026년 9월 6일5분 읽기

프론트엔드

대시보드 숫자가 덜덜 떨리는 이유, tabular-nums 한 줄로 잡기

실시간으로 바뀌는 숫자가 좌우로 미세하게 흔들리는 원인은 비례폭 숫자예요. font-variant-numeric: tabular-nums 한 줄로 잡는 방법을 정리했어요.

2026년 9월 5일5분 읽기

프론트엔드

경기 일정이 하루 밀렸다? date-only 문자열과 new Date()의 UTC 함정

달력엔 14일인데 화면엔 13일로 뜨는 버그, 원인은 new Date()의 UTC 파싱 규칙이에요. date-only 문자열을 다루는 프론트엔드 해법을 정리했어요.

2026년 9월 4일4분 읽기

프론트엔드

차트가 리사이즈를 안 따라올 때, window.resize 대신 ResizeObserver

사이드바를 접어도 차트가 그대로일 때, window.resize 대신 ResizeObserver로 컨테이너 크기를 직접 관찰해 해결하는 방법을 정리했어요.

2026년 9월 3일4분 읽기

프론트엔드

'미검증' 배지, 프런트 단일 소스로 관리한 이유

실시간 리서치 대시보드에서 화면마다 어긋나던 '미검증' 배지를 유틸 1개와 컴포넌트 1개로 모은 과정과 이유를 정리했어요.

2026년 9월 2일5분 읽기

프론트엔드

CJK 캡션 잘림 방지: 캔버스 자동 줄바꿈과 축소 구현기

캔버스에는 word-break가 없어요. measureText와 Intl.Segmenter로 CJK 캡션 자동 줄바꿈·폰트 축소를 구현한 과정을 정리했어요.

2026년 8월 23일5분 읽기

프론트엔드

Plan-C localStorage 스키마 검증 이유

Plan-C 플래너에서 localStorage를 그대로 믿지 않고 스키마 검증과 버전 업그레이드를 붙인 이유를 프론트엔드 UX 관점에서 정리했어요.

2026년 8월 22일4분 읽기

프론트엔드

macOS엔 timeout이 없다 — 프론트 자동화가 127로 멈춘 날

macOS에서 timeout 명령이 종료 코드 127로 실패하는 이유와, 프론트엔드 자동화 스크립트를 gtimeout·Node 타임아웃으로 고친 과정을 정리했어요.

2026년 8월 21일5분 읽기

프론트엔드

탭 안 볼 때 폴링 멈추기, visibilitychange로 요청 절반 줄이기

탭이 백그라운드일 때도 계속 나가던 대시보드 폴링을 visibilitychange 이벤트로 멈추고, 복귀 시 즉시 갱신해 요청을 줄이는 방법을 정리했어요.

2026년 8월 16일4분 읽기

프론트엔드

한글 입력 중 Enter가 두 번 실행될 때, IME composition 이벤트 처리법

한글 입력창에서 Enter가 두 번 발동하는 IME composition 이슈의 원인과 isComposing 가드 한 줄로 해결하는 방법을 정리했어요.

2026년 8월 15일4분 읽기

프론트엔드

라이브러리 없이 모달 focus trap 구현, 접근성 함정 3개

모달 focus trap을 직접 구현하며 만난 숨은 요소 수집, 포커스 복귀 누락, 스크린리더 가상 커서 함정 3개와 해결 방법을 정리했어요.

2026년 8월 14일4분 읽기

프론트엔드

웹훅 안전하게 받기: HMAC 서명검증·재전송 방지·멱등 처리 3종 세트

Next.js Route Handler로 웹훅을 받을 때 필요한 HMAC 서명검증, 타임스탬프 재전송 방지, 멱등 키 처리를 프론트엔드 개발자 관점으로 정리했어요.

2026년 8월 13일5분 읽기

프론트엔드

제품 라인을 미리 여는 프론트엔드 구조: plan-a~z 네이밍

제품 이름을 plan-a~z로 미리 열어두면 화면 쪽도 준비가 필요해요. 레지스트리 한 곳과 공유 셸로 새 플랜을 몇 분 만에 붙이는 프론트엔드 구조를 정리했어요.

2026년 8월 12일5분 읽기

프론트엔드

'알아서 렌더'에 맡겼다가 요청이 12배 늘어난 이야기

컴포넌트마다 알아서 처리하라고 맡기면 기본값이 가장 무거운 쪽을 골라요. 화면 단위로 명시해서 요청과 비용을 줄인 과정을 정리했어요.

2026년 8월 11일5분 읽기

프론트엔드

debounce 자동저장, 화면을 떠날 때 마지막 입력이 사라진다면

화면 전환이나 탭 종료 순간 debounce 타이머가 취소돼 마지막 입력이 저장되지 않는 문제를 flush와 sendBeacon으로 막는 방법을 정리했어요.

2026년 8월 10일5분 읽기

프론트엔드

textarea 자동 높이, 떨림 없이 늘리는 법

키 입력마다 height를 auto로 리셋하면 화면이 떨려요. 마음기록 에디터를 만들며 scrollHeight를 떨림 없이 다루는 방법을 정리했어요.

2026년 8월 9일4분 읽기

프론트엔드

감정 기록 잔디 히트맵, CSS grid로 만들고 스크린리더까지

한 해의 감정 기록을 잔디처럼 한 화면에 보여주는 히트맵을 CSS grid로 만들고, 색맹·스크린리더 사용자까지 챙기는 접근성 처리를 정리했어요.

2026년 8월 8일5분 읽기

프론트엔드

긴 법률 문서 목차 스크롤스파이, 깜빡임 없이 하이라이트하기

조항이 수십 개인 긴 문서에서 목차 활성 항목이 튀는 깜빡임을 IntersectionObserver의 rootMargin 밴드로 잡는 프론트엔드 구현 방법을 정리했어요.

2026년 8월 5일5분 읽기

프론트엔드

컴포넌트를 늘리지 말고 쳐내기: 성숙기 프론트엔드 정리법

컴포넌트를 자꾸 새로 만들면 화면이 무거워져요. 도구 정리에서 배운 '쳐내기' 원칙을 프론트엔드 컴포넌트에 적용한 실전 기록이에요.

2026년 8월 4일4분 읽기

프론트엔드

삭제하는 앱이 신뢰를 얻는 법: 미리보기와 되돌리기 UI

파일 삭제 앱의 신뢰를 만드는 미리보기 패널과 되돌리기 스낵바를 프론트엔드 관점에서 구현하는 방법을 정리했어요.

2026년 8월 3일5분 읽기

프론트엔드

법률 앱에 '자문 아님' 문구, 거슬리지 않게 심는 법

법령·판례 검색 화면에 법률 자문 아님 고지를 놓치지 않으면서도 방해되지 않게 넣는 프론트엔드 구현 방법을 정리했어요.

2026년 8월 2일4분 읽기

프론트엔드

금융계산기 슬라이더와 숫자 입력, 값이 튀는 이유

슬라이더와 숫자 입력을 양방향으로 묶으면 값이 튀는데요, 원인 세 가지와 프론트엔드에서 안정적으로 동기화하는 방법을 정리했어요.

2026년 8월 1일6분 읽기

프론트엔드

Zustand persist가 SSR hydration mismatch를 터뜨리는 이유

Zustand persist가 Next.js SSR에서 hydration mismatch 경고를 만드는 원인과 마운트 플래그, skipHydration 해결법을 정리했어요.

2026년 7월 30일4분 읽기

프론트엔드

next-themes 없이 다크모드 깜빡임(FOUC) 없애는 법

다크모드 새로고침 때 화면이 번쩍하는 FOUC를, 라이브러리 없이 head 인라인 스크립트 몇 줄로 없애는 방법을 정리했어요.

2026년 7월 29일5분 읽기

프론트엔드

기록 수백 개에서 스크롤이 버벅일 때, 리스트 가상화 도입기

기록이 수백 개로 늘며 버벅이던 스크롤을, 안 보이는 항목은 안 그리는 리스트 가상화로 매끄럽게 만든 프론트엔드 구현기예요.

2026년 7월 28일4분 읽기

프론트엔드

React Query 낙관적 업데이트로 참석 토글 UX 매끄럽게 만들기

참석 여부를 누르는 순간 화면이 바로 바뀌고, 서버가 실패하면 원래대로 되돌리는 낙관적 업데이트 패턴을 프론트엔드 구현 관점에서 정리했어요.

2026년 7월 27일5분 읽기

프론트엔드

금융 계산기 입력창, 천단위 콤마에 커서가 튀는 문제 해결

숫자 입력창에 천단위 콤마를 넣으면 커서가 맨 뒤로 튀는 문제를, selectionStart로 자릿수를 세서 커서 위치를 되돌리는 방법으로 정리했어요.

2026년 7월 26일5분 읽기

프론트엔드

useEffect에 이름을 붙이면 코드가 달라지는 이유

useEffect를 이름 있는 함수나 커스텀 훅으로 빼면 React 동작보다 컴포넌트 경계와 디버깅 방식이 먼저 달라져요.

2026년 7월 25일6분 읽기

프론트엔드

로그인은 됐는데 새로고침하면 풀려요? 세션 유지 구현법

새로고침만 하면 로그아웃되는 원인을 토큰 보관·세션 복원·라우트 가드 세 갈래로 나눠 프론트엔드에서 고치는 방법을 정리했어요.

2026년 7월 24일4분 읽기

프론트엔드

n8n 블로그 글 자동 발행 워크플로우, 프론트엔드 설계법

n8n으로 블로그 글을 자동 발행할 때 프론트엔드가 준비할 frontmatter 스키마, publish 게이트, MDX 컴포넌트 화이트리스트를 직접 만든 경험으로 정리했어요.

2026년 7월 6일4분 읽기

프론트엔드

Next.js 로그인, Supabase로 붙일 때 정리해둔 것

Next.js App Router에 Supabase 인증을 붙일 때 환경변수, 클라이언트 분리, 세션 유지, RLS 순서로 정리한 실전 메모예요.

2026년 7월 2일5분 읽기

프론트엔드

Next.js에서 Claude API 연결하는 가장 쉬운 예제

Next.js App Router에서 Anthropic SDK로 Claude API를 붙이는 최소 예제를 라우트 핸들러 코드와 함께 정리했어요.

2026년 7월 1일5분 읽기

프론트엔드

Tailwind v4와 oklch로 1인 개발자 브랜드 색 만들기

보라색 그라디언트로 도배된 'AI가 만든 듯한' 화면에서 벗어나고 싶었어요. Tailwind v4와 oklch로 차분한 브랜드 색을 잡고 라이트·다크를 한 번에 푼 방법을 정리했어요.

2026년 6월 30일4분 읽기

프론트엔드

Next.js로 랜딩페이지 만들기, 배포까지 30분 실전 가이드

Next.js로 랜딩페이지를 만들고 깃허브 연동으로 배포해 도메인까지 연결하는 흐름을 단계별로 정리했어요.

2026년 6월 29일5분 읽기

프론트엔드

Next.js 정적 export에서 동적 기능 쓰기 — 클라이언트 컴포넌트로 조회수·좋아요·댓글 붙이기

서버 없이 정적 export로 배포한 블로그에 조회수·좋아요·댓글을 붙인 방법이에요. 클라이언트 컴포넌트가 런타임에 직접 fetch하고, 실패하면 조용히 기본값으로 떨어져 본문을 먼저 지키게 했어요.

2026년 6월 27일6분 읽기

프론트엔드

TailwindCSS v3 → v4 마이그레이션 실전 메모

tailwind.config.js가 사라지고 CSS-first 방식으로 바뀐 TailwindCSS v4 마이그레이션 과정에서 실제로 마주친 변화들을 정리했어요.

2026년 6월 25일2분 읽기

프론트엔드

MDX 블로그 코드블록에 라이트·다크 두 테마를 한 번에 — rehype-pretty-code

정적 블로그의 코드블록을 빌드 타임에 하이라이팅하면서 라이트·다크 두 테마를 동시에 넣는 방법이에요. rehype-pretty-code와 CSS 변수를 써서 런타임 JavaScript 없이 테마를 바꾸는 구성을 정리했어요.

2026년 6월 24일3분 읽기

프론트엔드

Next.js 16 + Tailwind v4로 정적 블로그 만들기

서버 없이 돌아가는 블로그를 Next.js 16 App Router와 Tailwind v4, MDX로 만든 설정을 정리했어요. 정적 export에서 걸리기 쉬운 지점도 함께 적었어요.

2026년 6월 21일3분 읽기