Flutter `Scrollable.ensureVisible` — 포커스·에러 필드를 키보드 뒤에 두지 않기
·
Flutter, 모바일
한 줄 요약: 긴 약관·배송·설정 폼에서 다음 필드 requestFocus()만 하면 소프트키보드에 가려 사용자가 어디를 치는지 모른다. Flutter Scrollable.ensureVisible(context, …) 로 포커스/에러 위젯을 스크롤 뷰포트 안으로 가져오는 것이 계약이다. FocusNode·TextInputAction(#57)·TextFormField validator sync(#98)·Form autovalidate(#35)·MediaQuery.viewInsetsOf(#102)·ScrollController(#44)·ListView itemExtent(#173)과 겹치지 않게, 이번엔 ensureVisible 스크롤 정렬만 판다.버전 가정: Flutter 안정 채널의 Scrollable...
Ember-1(Fireworks) on AI Gateway(2026-09-27) — 짧은 reasoning 트레이스 FE 데스크 노트
·
AI 뉴스·최신소식
한 줄 요약: 2026-09-29 기준, late-Sep FE·에이전트 데스크가 열어볼 공식 공지는 Vercel Changelog Ember-1 from Fireworks now available on AI Gateway(Published September 27, 2026 · Zachary Chen, Jerilyn Zheng)다. 요지(원문 고정): (1) 모델 id fireworks/ember-1 (2) Kimi K3 기반 research preview reasoning 모델 · 코딩·에이전트 워크플로 (3) Fireworks 평가에서 Kimi K3 대비 약 40% 적은 generated tokens(comparable quality) — 반복 호출 시 출력 비용·후속 컨텍스트 감소 서술 (4) 1M-..
CSS `light-dark()` — 라이트/다크 색을 미디어쿼리 복붙으로 끝내지 않기
·
실무 프론트 팁
한 줄 요약: 라이트/다크마다 :root 변수를 @media (prefers-color-scheme: dark)에 통째로 복붙하면 토큰 표가 두 벌이 되고 AI가 한쪽만 고친다. CSS light-dark(light, dark) 는 한 속성에서 두 값을 넘기고, 문서/color-scheme이 고른 쪽에 맞춰 고른다. color-mix·relative color(#163)·:has(#148)·Container Queries(#143)·prefers-reduced-motion(#108)·field-sizing(#169)과 겹치지 않게, 이번엔 라이트/다크 한 줄 선택만 판다.버전 가정: CSS Color Module의 light-dark(). 사용 전제: 루트(또는 해당 요소)에 color-scheme: l..
Flutter `ListView.builder` — `itemExtent` · `prototypeItem` 으로 스크롤 점프 줄이기
·
Flutter, 모바일
한 줄 요약: 카드 높이가 거의 고정인 피드인데 ListView.builder 만 쓰면, 스크롤 중 미측정 자식 때문에 점프·바운스가 난다. 높이를 아는 목록은 itemExtent(고정) 또는 prototypeItem(동일 레이아웃 샘플)으로 extent를 미리 알려 레이아웃 추정 비용을 줄이는 것이 계약이다. AnimatedList(#152)·ReorderableListView(#124)·RepaintBoundary(#170)·AutomaticKeepAlive(#47)·nested scroll(#113)과 겹치지 않게, 이번엔 builder 목록의 extent 힌트만 판다.버전 가정: Flutter 3.x · ListView.builder / ListView.separated · itemExtent ·..
Next.js `Link` `scroll={false}` — 필터·탭 URL 교체 후 스크롤 점프 막기
·
Next.js, React 삽질
한 줄 요약: 목록 위에서 필터·정렬·탭만 바꿨는데 스크롤이 맨 위로 튀면 사용자는 “페이지가 리로드된 것”으로 느낀다. App Router 기본값은 내비게이션 후 스크롤을 상단으로 옮긴다. 같은 목록 UX면 scroll={false} 가 계약이다. searchParams Promise(#34)·Router Cache/prefetch(#114)·useLinkStatus(#86)·router.refresh(#151)·loading.tsx(#38)와 겹치지 않게, 이번엔 Link 스크롤 동작만 판다.버전 가정: Next.js App Router · next/link 의 scroll boolean(기본 true). useRouter().push(href, { scroll: false }) 동일 감각. has..
AI 코딩 — 허용 파일 화이트리스트로 패치 범위를 잠그는 FE 루틴
·
AI 코딩 워크플로
한 줄 요약: “이 티켓 고쳐줘”만 던지면 에이전트가 인접 유틸·배럴·테스트 스냅샷까지 손을 댄다. FE 데스크에서는 허용 경로 화이트리스트 + 금지 글롭 + 새 파일 정책을 프롬프트 맨 위에 고정한다. 테스트 fix 루프(#31)·Plan 스코프(#81)·스펙 프롬프트(#150)·eval 글롭(#162)·모노레포 Rules(#166)와 겹치지 않게, 이번엔 매 패치 세션의 파일 자물쇠만 판다.버전 가정: Cursor Agent/Composer · Claude Code 등 멀티파일 패치 도구 일반. 제품 UI 단축키는 바뀔 수 있으니 프롬프트 계약이 진실. git worktree·모노레포 apps/* 가정. CI 게이트 전체 설계 아님.교차 링크(재탕 금지):테스트 깨짐 fix 루프 → draft 31 ..
Flutter RepaintBoundary — 깜빡이는 조상 setState에 전체가 다시 그려지지 않게
·
Flutter, 모바일
한 줄 요약: 타이머·오디오 미터·커서 깜빡임처럼 자주 변하는 위젯이 큰 트리 위에 있으면, 조상 setState·부모 paint가 카드 리스트 전체를 다시 그린다. RepaintBoundary 로 리페인트 경계를 끊어 레이어를 분리하는 것이 계약이다. AnimatedSwitcher(#156)·PageRouteBuilder(#160)·resume refresh(#165)·ValueListenableBuilder(#84)·AnimationController dispose(#76)와 겹치지 않게, 이번엔 페인트 경계·레이어만 판다.버전 가정: Flutter 3.x · RepaintBoundary · DevTools Performance / debugProfilePaintsEnabled 감각. 무분별한 Bou..
CSS `field-sizing: content` — textarea 높이 JS 측정 그만하기
·
실무 프론트 팁
한 줄 요약: 댓글·프롬프트 박스마다 scrollHeight를 읽어 style.height를 때리는 autosize 훅은 접근성·IME·SSR에서 새는 지점이 많다. 모던 엔진의 field-sizing: content 로 필드가 콘텐츠만큼 커지게 두는 것이 계약이다. text-wrap(#155)·color-mix(#163)·scroll-snap(#159)·:has(#148)·Anchor(#139)와 겹치지 않게, 이번엔 폼 컨트롤 자동 크기만 판다.버전 가정: CSS UI field-sizing (content | fixed). Chromium 계열 중심으로 실무 도입 — 지원 표는 배포 주 mid-2026+ 기준으로 팀 caniuse/MDN을 재확인. 미지원 브라우저는 fixed(기본 감각)로 두고 J..
Next.js `viewport` · `generateViewport` — themeColor를 metadata에 묶지 않기
·
Next.js, React 삽질
한 줄 요약: metadata 안에 themeColor·viewport를 계속 넣으면 분리된 viewport 계약을 놓치고, AI가 구버전 예시를 복붙한다. App Router는 export const viewport / generateViewport 가 theme-color·초기 스케일을 담당한다. generateMetadata(#56)·sitemap.ts/robots.ts(#164)·template vs layout(#157)·searchParams Promise(#34)·loading.tsx(#38)와 겹치지 않게, 이번엔 viewport 수출만 판다.버전 가정: Next.js App Router · Server Components에서만 viewport / generateViewport. 같은 세그..
Claude Sonnet 5.5 on AI Gateway(2026-09-28) — FE 일상 코딩·문서 루프 데스크 노트
·
AI 뉴스·최신소식
한 줄 요약: 2026-09-29 기준, late-Sep FE·에이전트 데스크가 열어볼 공식 공지는 Vercel Changelog Claude Sonnet 5.5 now available on AI Gateway(Published September 28, 2026 · Rohan Taneja, Zachary Chen, Jerilyn Zheng)다. 요지(원문 고정): (1) 모델 id anthropic/claude-sonnet-5.5 (2) Sonnet 5 대비 잘 범위가 잡힌 일상 작업(피처·버그픽스·문서/슬라이드/스프레드시트) 개선 (3) 코딩에서 여러 스텝을 이어가고 완료 전 자체 점검 경향 (4) 문서·차트·데스크톱 앱 사용·기술 도면 읽기 개선 언급 (5) AI Gateway에서 Zero Data..