Tanstack Query

TanStack Query 는 서버로부터 데이터 가져오기, 데이터 캐싱, 캐시 제어 등 데이터를 쉽고 효율적으로 관리할 수 있는 라이브러리 입니다. React Query 라는 이름으로 시작했지만, v4 부터 Vue.js 나 Svelte 등의 다른 프레임워크에서도 활용할 수 있도록 기능이 확장되며TanStack Query 라는 이름으로 변경되었습니다. Tanstack Query대표적인 기능은 다음과 같습니다. 1. 데이터 가져오기 및 캐싱2. 동일한 요청의 중복 제거3. 신선한 데이터 유지4. 무한 스크롤, 페이지네이션 등의 성능 최적화5. 네트워크 재연결, 요청 실패 등의 자동 갱신 Tanstack Query 는 데이터를 패치하는 기능이 있습니다.쿼리 키와 일치하는 캐시된 데이터가 없을 때, 서버에서 새..

• format_list_bulleted 라이브러리
• · 2024. 10. 2.
• textsms

[Next.js] 이미지 최적화

프론트엔드에서 최적화 1순위는이미지 최적화 입니다. 웹 개발에 있어서 이미지 최적화는 사용자 경험과 성능 향상에 필수적입니다. 특히 모던 웹에서는 이미지 로딩 속도가 페이지 로딩 시간에 큰 영향을 미치므로, 이를 효율적으로 관리하는 것이 중요합니다.  다행히도 Next.js 에서는 자체적으로 Image 라는 컴포넌트를 제공함으로써코드 몇줄만으로 이미지를 최적화 시켜줄 수 있습니다. 다음 그림과 같이 일반적인 Tag 와 Tag 를 비교해 봐도 확연하게 차이가 나는 것을 보실 수 있습니다. 기본적인 형식Image 컴포넌트는 아래와 같은 properties 가 필수적으로 들어가야 합니다.import Image from 'next/image' export default function Page() { re..

• format_list_bulleted Next
• · 2024. 9. 22.
• textsms

[Next.js] 패키지 최적화

최선 버전의 Next.js 에서는 패키지 가져오기를 최적화 했습니다. 여러 라이브러리를 사용하거나 패키지를 이용하는 경우 불필요한 함수와 컴포넌트까지 불러와져서번들 파일이 커지는 현상이 발생하는 경우가 생기기 시작했습니다. 따라서 Next.js 는 이러한 문제점을 인식하고 개선하였습니다. 이 글에서 이러한 변경이 필요했던 이유와 현재 해결 방법을 찾기까지의 과정, 그리고 개선된 성능에 대해 설명하겠습니다. Barrel file 이란?자바스크립트에서 배럴 파일은 단일 파일에서 여러 모듈을 그룹화하여 내보내는 방법입니다. 그룹화된 모듈에 접근할 수 있는 중앙화된 위치를 제공함으로써 그룹화된 모듈을 더 쉽게 가져올 수 있습니다. 예를 들어, components/index.ts 내에 2개의 모듈 Button.t..

• format_list_bulleted 카테고리 없음
• · 2024. 9. 21.
• textsms

[Next.js] 배포시 console 지우기

Next.js 을 이용해 production 환경에서 console 을 지우는 방법을 알아보겠습니다.Next.js 에서 사용하기기본 사용법Next.js는 빌드 후 결과물에 console 이 뜨지 않도록 하는 기능을 자체적으로 제공하고 있습니다.next.config.js 파일의 compiler에 아래와 같이 removeConsole 옵션을 주면 간단하게 해결됩니다.만약 removeConsole 을 조건 없이(process.env.NODE_ENV 없이 ) 그냥 true값으로 주면, 개발환경에서도 콘솔이 뜨지 않게 됩니다.  특정 console 예외 방법만약 모든 console 을 제거하는 게 아닌, 특정 console ( error, warn ) 은 띄어주고 싶다면 아래와 같이 작성하시면 됩니다. 혹시 배포..

• format_list_bulleted Next
• · 2024. 9. 20.
• textsms

Next.js API Key 보관

Api key 는 너무나도 중요하기 때문에다른 누군가가 사용하지 않게 해야 합니다. Next.js 로 개발을 하다가 특정 api key 를 가져와야 하는 경우가 생겨서 공부하면서 정리해 보았습니다. 설명보통 개발을 하면서 자신의 Github 에 프로젝트를 올리고 관리할 것입니다.개발을 하다보면 피치못하게 다른 개발자의 API 나 공공하게 사용하는 API 를 사용해야하는 경험을 하셨을 것입니다.이때 대부분 API key 를 이용해서 API 를 불러옵니다.API 에 따라 다르지만, 대부분 API 인증키가 본인 이외의 외부에 보여지는 것은 좋지 않습니다.그래서 Next.js 는 .env.local 이라는 파일을 지원해 줍니다. 사용법Next.js 에서 어떻게 .env.local 이라는 파일로 api key 를..

• format_list_bulleted 카테고리 없음
• · 2024. 8. 1.
• textsms

Next.js MetaData 심화

metadata 를 간단하게 사용하고 있다가 다양하게 사용할 수 있는 걸 알게 되어 정리해 보았습니다.  설명metadata 를 모른다면 개인적으로 조금 공부하고 오거나 제 블로그에 next.js 소개 part 부분을 읽어 보시면 좋습니다. 기본적인 metadata 활용은 아래처럼 사용 할 수 있습니다.export const metadata = { title: "next.js", description: "hello next.js"} 하지만 항상 페이지별로 metadata 를 적용하고 설명하고 추가하고 하는것은 귀찮을 수 있기 때문에 동적으로 만들 수도 있습니다.import { Metadata } from 'next';export const metadata:Metadata = { title: { t..

• format_list_bulleted Next
• · 2024. 7. 30.
• textsms