프론트엔드탭 안 볼 때 폴링 멈추기, 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분 읽기