분류 전체보기 (11) 썸네일형 리스트형 React Compiler 직접 적용해보면서 느낀 것들 — useMemo 안 써도 되는 세상? 2026.04.04 | 프론트엔드 딥다이브회사 코드를 리뷰하다 보면 useMemo랑 useCallback 남용 문제가 꽤 자주 나온다. "이거 메모이제이션 필요한 거 맞아?" 같은 논쟁을 몇 번은 한 것 같은데, 솔직히 나도 정확히 어디에 써야 하고 어디에 안 써야 하는지 매번 헷갈렸다.그러다가 React Compiler가 작년 10월에 v1.0 stable로 나온 이후로 "이제 수동 메모이제이션은 잊어도 된다"는 글을 여기저기서 보게 됐다. 근데 직접 안 써보고 남의 말만 듣기엔 좀 찝찝해서, 사이드 프로젝트에 적용해보면서 공부한 걸 정리해본다.React Compiler가 하는 일React Compiler는 빌드 타임에 동작하는 Babel 플러그인이다. 하는 일을 한마디로 요약하면, 우리가 수동으로 넣.. Next.js 16.2가 AI 에이전트를 위해 바꾼 것들 — 써보면서 정리한 기록 2026.03.21 | 프론트엔드 딥다이브 3월 18일에 Next.js 16.2가 나왔다. 릴리즈 노트 제목이 "AI Improvements"길래 처음엔 "또 마케팅이구나" 싶었는데, 실제로 뜯어보니 생각보다 실용적인 변경이 많았다. 특히 요즘 Claude Code나 Cursor 같은 AI 코딩 도구를 실제 작업에 쓰고 있는 입장에서, 꽤 와닿는 업데이트들이었다.이번 글에서는 16.2에서 바뀐 것들을 직접 적용해보면서 느낀 점을 정리해본다.AGENTS.md — 에이전트한테 프로젝트 설명서를 주는 개념이번 업데이트의 핵심 중 하나가 create-next-app으로 프로젝트를 생성하면 AGENTS.md 파일이 기본으로 포함된다는 거다.이게 뭐냐면, AI 코딩 에이전트가 프로젝트에 투입됐을 때 "이 프로젝트는.. tsgo 직접 써봤다 — TypeScript가 Go로 다시 태어난 이유와 체감 후기 올해 초부터 프론트엔드 커뮤니티에서 가장 많이 보이는 키워드가 있다면 단연 tsgo일 것이다. TypeScript 컴파일러를 Go 언어로 재작성한 프로젝트인데, Microsoft가 "10배 빨라진다"고 발표했을 때 솔직히 반신반의했다. 마케팅 수치 아닌가 싶었다. 근데 직접 써보니까 진짜였다.이 글에서는 tsgo가 뭔지, 왜 Go로 갈아탔는지, 그리고 실제로 설치해서 돌려본 경험을 정리해본다.tsgo가 뭔가tsgo는 TypeScript의 공식 네이티브 컴파일러다. 기존 tsc가 TypeScript(= JavaScript)로 작성되어 있었다면, tsgo는 같은 컴파일 로직을 Go 언어로 포팅한 것이다. Microsoft 내부에서는 "Project Corsa"라는 코드네임으로 개발되어 왔고, 2025년 5월.. React의 <ViewTransition>으로 페이지 전환 애니메이션 만들어보기 작성일: 2026년 3월 8일들어가며페이지 전환할 때 화면이 뚝 끊기는 게 늘 아쉬웠다. 네이티브 앱은 화면이 자연스럽게 슬라이드되고, 리스트에서 상세로 넘어갈 때 이미지가 부드럽게 확대되는데 — 웹에서는 이걸 구현하려면 framer-motion이든 react-transition-group이든 라이브러리를 붙이고, 상태 관리도 복잡해지고, 결국 "나중에 하자"가 되기 일쑤였다.그런데 React 19.2에서 이라는 컴포넌트가 나왔고, Next.js 16에서도 사용할 수 있게 됐다. 브라우저의 View Transition API를 React가 감싸서, 생각보다 적은 코드로 꽤 그럴듯한 전환 애니메이션을 만들 수 있다. 이번 주에 사이드 프로젝트에 적용해보면서 공부한 내용을 정리해본다.View Transiti.. React Compiler v1.0과 Next.js 16 Cache Components가 바꾸는 2026 프론트엔드 개발 패러다임 2025년 하반기부터 React Compiler v1.0의 안정화와 Next.js 16의 정식 출시로, 프론트엔드 개발의 패러다임이 크게 변화하고 있습니다. 이 글에서는 React Compiler가 가져온 자동 메모이제이션 혁명과 Next.js 16의 Cache Components가 캐싱을 어떻게 재정의했는지 실무 관점에서 정리합니다.1. React Compiler v1.0 — useMemo, useCallback의 종말?React Compiler란?React Compiler는 2025년 10월 v1.0으로 정식 릴리즈된 빌드 타임 최적화 도구입니다. 기존에 개발자가 수동으로 처리하던 메모이제이션을 컴파일러가 자동으로 수행합니다.2025 Stack Overflow Survey에 따르면, 84%의 개발자가.. 타입 중복 없애는 TypeScript 유틸리티 타입 정리 #TypeScript #유틸리티 타입 #Partial #Pick #Omit #프론트엔드 TypeScript 유틸리티 타입을 잘 쓰면 타입 중복 없이 유연하고 안전한 코드를 만들 수 있습니다. TypeScript를 쓰다 보면 비슷한 타입을 조금씩 변형해서 여러 곳에 쓰는 상황이 자주 생깁니다. 이럴 때마다 새 타입을 만들면 코드가 중복되고, 원본 타입이 바뀌면 파생 타입도 일일이 수정해야 합니다. 유틸리티 타입(Utility Types)은 이런 문제를 해결하기 위해 TypeScript가 기본으로 제공하는 타입 변환 도구입니다. 1. Partial — 모든 프로퍼티를 선택적으로 타입의 모든 프로퍼티를 optional(?)로 바꿉니다. .. Swagger에서 API 클라이언트 자동생성까지 — orval + TanStack Query 도입기 #orval #TanStack Query #React Query #TypeScript #Next.js #API 자동생성 "API 연동 코드를 더 이상 직접 작성하지 않아도 된다면?" 프론트엔드 개발을 하다 보면 백엔드 API가 변경될 때마다 타입, fetch 함수, 쿼리 훅을 하나하나 수정해야 하는 번거로움이 생깁니다. 이 글에서는 orval로 Swagger 문서 기반 TypeScript 클라이언트를 자동생성하고, TanStack Query와 함께 연동하는 방법을 정리합니다. 1. 왜 orval인가? orval은 OpenAPI(Swagger) 스펙 파일을 읽어서 다음을 자동으로 생성합니다. TypeScript 타입 (Reques.. 텍스트만 뱉는 AI는 그만? 요즘 뜨는 'Generative UI' 찍먹해보기 최근 프론트엔드 관련 뉴스나 아티클을 보면서 'Generative UI(생성형 UI)'라는 키워드가 자꾸 눈에 밟히더라고요. 처음엔 "그냥 AI가 코딩 짜주는 거랑 뭐가 달라?"라고 생각했는데, 좀 더 파고들어 보니 우리가 알던 챗봇과는 꽤 다른 개념이었습니다.단순히 텍스트로 답을 주는 게 아니라, AI가 상황에 맞는 리액트 컴포넌트를 직접 그려서 보여주는 방식이더군요. 2026년 웹 트렌드로 자주 언급되길래, 이게 정확히 어떤 원리이고 어떻게 구현하는지 궁금해서 한번 정리해봤습니다.Generative UI가 뭔가요?보통 우리가 ChatGPT API를 연동하면 텍스트로 된 응답(string)을 받잖아요? 그런데 Generative UI는 AI가 사용자의 의도를 파악해서, 텍스트 대신 UI 컴포넌트를 렌더.. 이전 1 2 다음
