React3 React 19에 대하여 React가 19버전으로 변경되며 적용했을때 생기는 변경점과 현재 제 개발 스펙에 어떤것들을 적용할 수 있는지 적어보았습니다.1. useTrasition 기존 useTrasition은 React 18에 도입된 Hook으로 UI를 차단하지 않으면서 상태 업데이트를 효율적으로 처리하는데 도움을 주나, 기존 useTrasition은 비동기 작업과 함께 사용하는데 제약이 있었습니다.React 19부턴 이제 비동기 함수와 함께 사용할 수 있습니다. // Using pending state from Actions// examplefunction UpdateName({}) { const [name, setName] = useState(""); const [error, setError] = useState(null.. 2024. 12. 9. [React] Tanstack query 키 관리하기 in QueryKey-Factory 이번엔 아트인포 에서 Next.js와 Tanstack Query를 사용하며 키 관리를 어떻게 했는지 정리해봤습니다. 키 관리가 필요한 이유..?Tanstack-Query가 제공하는 기능들을 제대로 사용하기 위해서는 필수적으로 이해해야 하는 개념들이 몇 가지 존재합니다. 오늘 다뤄볼 주제는 그 핵심 개념들 중 하나인 Query Keys를 관리하는 방법. 공식문서에서는 다음과 같이 Query Keys를 소개한다. At its core, TanStack Query manages query caching for you based on query keys. Query keys have to be an Array at the top level, and can be as simple as an Array with a.. 2024. 7. 18. Next.js 14 이미지 최적화 초기 Nuxt3로 개발했었던 사이드 프로젝트 아트인포 를 Next14로 리뉴얼하며 들었던 큰 고민중 하나는이미지 위주의 컨텐츠가 많다보니 페이지의 용량이 3~5MB가 넘어가는 일이 많았다. (컨텐츠에 따라 용량의 차이는 있지만)이 문제를 해결하고자 최적화에 대해 찾아봤고 next/image 컴포넌트를 사용하며 최적화한 방법에 대해 기술한다.기존 문제점 아트인포 에서 흔히 볼수 있는 컨텐츠인 공연들중 하나의 이미지다. png의 형태로 용량은 778kb이다..이런 이미지가 10장 20장을 넘어간다면..? 이러한 문제로 최적화에 대해 고민하였고 next/image의 포멧 변환과 캐싱 기능을 사용하였다. next/image 컴포넌트는 기본적으로 webp 파일 형식으로 변환을 해주었고, avif로도 선택이 가능.. 2024. 7. 14. 이전 1 다음
