Front-end11 [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 SSR을 활용한 SEO in 아트인포 아트인포에 새로 추가한 뉴스 페이지를 바탕으로 SSR을 활용한 SEO에 대해 정리한다./news/page.tsx리스트 페이지엔 페이지의 제목과 내용 등 정보들의 변동이 없기에 기본적인 metadata 설정을 넣어줬다. /news/[id]/layout.tsx generateMetadata를 활용해 뉴스 해당 뉴스 상세데이터를 호출 제목과 이미지를 정리하여 동적으로 넣어준다. generateMetadata는 해당 경로의 page.tsx 또는 layout.tsx 아무데나 들어가도 상관없다. SSR 환경이라면 이렇게 넣어주면 metadata를 동적으로 설정해줌으로써 얻을수 있는 장점들동적 페이지의 상세한 정보가 초기 페이지 로드시 이미 포함되어 있어 검색엔진에 페이지에 대한 정보를 더 명확하게 전달OpenGr.. 2024. 7. 17. Next.js 14 이미지 최적화 초기 Nuxt3로 개발했었던 사이드 프로젝트 아트인포 를 Next14로 리뉴얼하며 들었던 큰 고민중 하나는이미지 위주의 컨텐츠가 많다보니 페이지의 용량이 3~5MB가 넘어가는 일이 많았다. (컨텐츠에 따라 용량의 차이는 있지만)이 문제를 해결하고자 최적화에 대해 찾아봤고 next/image 컴포넌트를 사용하며 최적화한 방법에 대해 기술한다.기존 문제점 아트인포 에서 흔히 볼수 있는 컨텐츠인 공연들중 하나의 이미지다. png의 형태로 용량은 778kb이다..이런 이미지가 10장 20장을 넘어간다면..? 이러한 문제로 최적화에 대해 고민하였고 next/image의 포멧 변환과 캐싱 기능을 사용하였다. next/image 컴포넌트는 기본적으로 webp 파일 형식으로 변환을 해주었고, avif로도 선택이 가능.. 2024. 7. 14. 이전 1 2 3 다음
