React 19 의 새로운 Hook

useTransitionUI 를 차단하지 않고 상태를 업데이트 할수 있는 React Hook 을 말합니다. React19 version 에서는 비동기처리도 우선순위를 줄 수 있게 변경이 됩니다.원래 useTransition 은 수많은 state 가 존재할 경우 우선순위를 주기 위해서 탄생했습니다.예를 들어, 사용자가 검색어를 입력하면 결과를 가져오는 작업이 있는데, 결과를 가져오는 동안 앱이 멈춘 것처럼 보이는 문제를 사전에 방지해 줍니다. 쉽게 말해 긴급한 작업과 덜 긴급한 작업의 UI 가시성을 처리하고 싶을 때 사용합니다.import React, { useState } from "react";const Transition = () => { const [number, setNumber] = useSt..

• format_list_bulleted React
• · 2025. 1. 20.
• textsms

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

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] 배포시 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

메뉴 밑줄 슬라이딩 만들기

프로젝트를 개발 중 메뉴 밑줄 슬라이딩을자연스럽게 구현하고 싶어 정리해 보았습니다. 용어 설명메뉴 밑줄 슬라이딩을 구현하고 싶은데 어떻게 만들어야 할지 막막하다면 여기서 정리한 내용만 차근차근 읽어보시면어떻게 구현하고 어떤 방식으로 만들 수 있는지 이해하실 수 있습니다. 특정 메뉴로 이동하고 싶을 때 애니메이션을 적용하고 싶다면 offset 이라는 기능을 사용하시면 됩니다.그림에서 보시는 바와 같이 검정색 화면이 브라우저 화면이라고 가정해 봅시다.그럴 때 브라우저에서 내가 측정하고 싶은 요소와 브라우저 간의 거리를 확인하고 싶다면 offsetTop 을 이용하시면 됩니다. 이 기능을 이용해서 간편하게 구현하시면 됩니다.아래의 코드는 React 를 이용해서 구현한 코드입니다.아직은 tsx 로 넘어가지 않았으..

• format_list_bulleted React
• · 2024. 8. 26.
• textsms

Jotai

jotai 는 전역 상태를 편리하게 도와주는라이브러리 입니다.설명Jotai는 리액트 애플리케이션에서 상태 관리를 위한 간단하고 현대적인 라이브러리입니다.이 라이브러리는 Context API와 리액트 훅을 기반으로 만들어졌으며, 상태를 최소 단위인 "원자 (Atoms)"로 분해하여 관리하는 Atomic 디자인 패턴을 채택합니다.jotai에 대해 찾아보면서 context와 비슷하다고 느꼈었는데, 실제로 다른 상태 관리 라이브러리들보다는 context나 useState와 비교되는 경우가 더 많습니다.Atomic 접근 방식이 패턴은 상태를 최소 단위인 "원자 (Atoms)" 단위로 분해하여 관리하는 방식을 의미합니다. jotai 를 시작하기 전에 앱 컴포넌트 내의 router 를 Provider 로 감싸 주어야..

• format_list_bulleted 라이브러리
• · 2024. 8. 24.
• textsms