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

Git

Git Bash 를 찾아서 실행하면 아래 그림과 같이 CLI 명령을 입력할 수 있는 창이 나옵니다.$ 기호와 윗줄에 표시된 경로 등을 합쳐서 프롬프트 라고 합니다. 공부하기전 간단한 용어 설명Git Bash 에서 사용할 기본 CLI 명령어, 즉 폴더를 만들거나 위치를 이동하는 방법등을 간단하게 알려 드리겠습니다.더 자세히 공부하고 싶다면 '리눅스 명령어 공부하기' 와 같은 키워드로 검색하시면 됩니다. pwd : 현재 폴더의 위치를 확인합니다.ls : 현재 폴더의 파일 목록을 확인합니다.cd : 홈 폴더로 이동합니다.cd 폴더이름 : 특정 위치의 디렉터리로 이동합니다.cd .. : 현재 폴더의 상위 폴더로 이동합니다.mkdir 폴더이름 : 현재 폴더의 아래에 새로운 폴더를 만듭니다.로컬 저장소가 있는 현재..

• format_list_bulleted Git
• · 2024. 9. 27.
• textsms

Zustand

Zustand 는 React 애플리케이션의 상태 관리를 간편하게 해주는라이브러리 입니다. Zustand 는 상태 관리를 위해 React 의 Context API 와 함께 사용되며,Redux 와 비슷한 기능을 제공하지만 훨씬 간단하고 직관적입니다.  특징간단한 APIZustand 는 간단하고 직관적인 API 를 제공하여 상태를 관리합니다.create 함수를 사용하여 상태를 초기화하고, 이를 통해 상태를 업데이트하고 구독할 수 있습니다.Hooks 기반Zustand 는 React Hooks 와 함께 사용되어 React 애플리케이션의 상태를 관리합니다.이는 함수형 컴포넌트에서 상태를 쉽게 관리할 수 있음을 의미합니다.최적화Zustand 는 내부적으로 Immer 라이브러리를 사용하여 불변성을 유지하면서 상태를 업..

• format_list_bulleted 라이브러리
• · 2024. 9. 25.
• 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

React 에러 핸들링

React에서 에러 핸들링은 사용자 경험을 향상시키기 위해 매우 중요합니다.특히, 애플리케이션이 크거나 복잡할수록 예상치 못한 에러가 발생할 가능성이 커지므로, 이를 적절히 처리해야 사용자에게 불필요한 불편을 줄일 수 있습니다. JS Error 객체Error: 기본적인 에러 객체SynTaxError: 문법이 틀렸을 때 발생하는 객체ReferenceError: 잘못된 참조를 했을 때 발생하는 객체RangeError: 숫자 변수가 범위를 벗어났을 때 발행하는 객체TypeError: 변수나 값의 타입이 예상과 다를 때 발생, 예를 들어, 숫자가 아닌 값에 대해 숫자 메서드를 호출할 때 발생HTTP 에러 코드 (서버와의 통신에서 발생하는 에러)React 애플리케이션이 API를 통해 서버와 통신할 때, HTTP ..

• format_list_bulleted React
• · 2024. 9. 10.
• textsms

axios Interceptors

axios 를 자세히 공부 중에 인터셉터 라는 기능을공부해서 정리해 보았습니다.인터셉터(Interceptors)란? then 또는 catch로 처리되기 전에 요청과 응답을 가로챌 수 있다. API 요청을 할때마다 HTTP Authorization 요청 헤더에 토큰을 넣어줘야하는 경우가 생깁니다.하지만 이러한 경우가 많이 발생할 경우 중복 코드가 발생하고 유지보수가 복잡해 지는 문제가 발생합니다.사용자 지정 config 로 새로운 Axios 인스턴스를 생성하여 사용하면 더욱 편리하기 때문에 Axios 인스턴스를 기초로설명하겠습니다. 적용해보기Axios 인스턴스 생성하기const instance = axios.create({ baseURL: "www.text.com", timeout: 1000, // 요..

• format_list_bulleted 라이브러리
• · 2024. 9. 1.
• textsms