Engineering/Frontend (9) 썸네일형 리스트형 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.. 2026년 프론트엔드, '서버 중심 리액트'와 'AI 동료'가 표준이 되다 2025년 React 19의 정식 출시 이후, 프론트엔드 생태계는 또 한 번의 거대한 지각변동을 겪고 있습니다. '클라이언트 사이드 렌더링(CSR)'의 시대가 저물고, '서버 퍼스트(Server-First)' 패러다임이 그 자리를 대체하고 있습니다. 이와 동시에, AI 코딩 도구는 더 이상 신기한 장난감이 아닌, 개발자의 필수적인 '동료'로 자리 잡았습니다.2026년 현재, 프론트엔드 개발자가 꼭 알아야 할 핵심 트렌드와 변화의 흐름을 짚어봅니다.1. React 19 & Server Components: '기본값'이 된 서버 렌더링React 19의 등장은 단순히 버전 숫자가 바뀐 것이 아닙니다. 리액트를 다루는 멘탈 모델 자체가 **'기본적으로 서버에서 렌더링하고, 필요한 부분만 클라이언트에서 상호작용한.. 이전 1 2 다음
