근데 요즘 AI 이야기를 보면 얼마나 쉽게 할 수 있는지에 대한 이야기가 많다.
그런 이야기를 보다 보면 나도 결과를 얼마나 더 좋게 만들 수 있을지보다, 얼마나 덜 노력할 수 있을지에 먼저 관심이 간다.
오깨들
프론트엔드 개발과 도구를 다루며 그날 새롭게 이해한 내용을 짧게 기록합니다.
2026
run “/claude-api prompt-audit” in Claude Code. this checks you skills, agent.md, Claude.md, prompts and removes anti-patterns that hobble frontier models.
- 아이디어 자체는 흥미로우나 React Compiler가 건재한 상태에서 호출자에게 수동 메모이제이션과 브랜드 전파를 요구할만큼 참조 안정성을 강제하는 가치가 큰가?
yeongseo-blog[번역] 참조 안정성을 타입으로 만들기https://www.yeongseo-blog.site/blog/referential-stability-typesJovi De CroockMaking Referential Stability a TypeWhat happens when we stop treating referential stability as a linting heuristic and start carrying it through React and Preact as a type-level proof.GitHubGitHub - JoviDeCroock/stableref: Proof-carrying referential stability for React and PreactProof-carrying referential stability for React and Preact - JoviDeCroock/stableref// First: 레이아웃을 바꾸기 전에 시작 위치를 측정 const first = el.getBoundingClientRect(); // Last: 최종 위치를 만드는 CSS 클래스를 적용 el.classList.add("세상-끝의-라멘"); const last = el.getBoundingClientRect(); // 변경 직후 측정하면 동기 레이아웃 계산이 발생 가능 // Invert: 최종 위치에서 시작 위치로 돌아갈 만큼의 차이를 계산 const invert = first.top - last.top; // Play: 첫 키프레임으로 시작 위치처럼 보이게 하여 이동량을 없앰 // 실제 레이아웃은 이미 최종 상태이며, 재생 중에는 transform만 변경 const player = el.animate( [ { transform: `translateY(${invert}px)` }, { transform: "translateY(0)" }, ], { duration: 300, easing: "cubic-bezier(0,0,0.32,1)", }, );aerotwist.comFLIP Your AnimationsAnimations in your web app should run at 60fps. Not always easy to achieve that,and it really depends on what you're trying to do, but I'm here to help. With FLIP.MDN Web DocsWeb Animations API - Web APIs | MDNThe Web Animations API allows for synchronizing and timing changes to the presentation of a Web page, i.e., animation of DOM elements. It does so by combining two models: the Timing Model and the Animation Model.- FLIP: First, Last, Invert, Play. 레이아웃 변경을 한번만 일으키고 움직이는 과정은 transform에 맡김으로써 애니메이션 최적화를 달성하는 기법. Framer Motion의 layout 애니메이션도 이 방식으로 만들어진다고 한다.
- flex design system의 원칙
- 유연함을 보장한다
- 컴포넌트는 형태에 종속적이지 않다
- Select를 Trigger와 분리해서 다른 컴포넌트들과 Select를 조합할 수 있도록 설계
- 모든 것은 클릭 가능하다
- Headless Component를 기반으로 형태와 기능을 분리
- fxm은 fx와는 다른 방향성
- 미리 정의된 조합
- 자율성보다는 고민 없이 즉시 사용할 수 있는 재료들로 제공
- 토큰 체계
- 임의의 커스텀을 지양하고 최대한 시스템상 정의된 토큰들을 사용하도록 유도
- DDL: Data Definition Language, DB의 구조를 만들거나 변경·삭제하는 SQL.
CREATE: 테이블, 인덱스 같은 DB 객체를 만든다.ALTER: 기존 테이블에 컬럼을 추가하는 등 DB 객체의 구조를 변경한다.DROP: 테이블 같은 DB 객체 자체를 삭제한다. 테이블을 삭제하면 그 안의 데이터도 함께 삭제된다.TRUNCATE: 테이블 구조는 유지하면서 모든 행을 제거한다.WHERE로 특정 행만 골라 지울 수 없다.
- DML: Data Manipulation Language, DB의 데이터를 추가·수정·삭제하는 SQL.
INSERT: 테이블에 새로운 행을 추가한다.UPDATE: 기존 행의 값을 수정한다.WHERE로 수정할 행을 지정할 수 있고, 생략하면 모든 행이 대상이 된다.DELETE: 테이블의 행을 삭제한다.WHERE로 삭제할 행을 지정할 수 있고, 생략하면 모든 행이 대상이 된다. 테이블 구조는 유지된다.
- DQL: Data Query Language, 데이터 조회용 SQL. 다만
SELECT를 DML에 포함하기도 한다.SELECT: 데이터를 조회한다. 필요한 컬럼을 선택하거나, 조건으로 행을 걸러내거나, 여러 테이블을 연결하거나, 집계할 수 있다.
- SQL(Structured Query Language)은 DB의 구조와 데이터를 다루는 언어이고, DDL·DML·DQL 등은 SQL 명령을 용도에 따라 나눈 분류다.
- DDL: Data Definition Language, DB의 구조를 만들거나 변경·삭제하는 SQL.