
useOptimistic란? React 19에 새롭게 추가된 useOptimistic 훅은 낙관적 업데이트(Optimistic Updates)를 구현하기 위한 훅입니다. 사용자가 액션을 수행했을 때 서버 응답을 기다리지 않고 즉시 UI를 업데이트하여 더 나은 사용자 경험을 제공합니다. 낙관적 업데이트란?- 즉시 UI 업데이트: 서버 응답을 기다리지 않고 UI를 먼저 변경 - 백그라운드 동기화: 동시에 서버에 요청을 보내 실제 데이터 업데이트 - 에러 처리: 실패 시 원래 상태로 되돌리기 예시코드import { useOptimistic } from 'react';function AppContainer() { const [optimisticState, addOptimistic] = useOptimisti..
use란?리액트 19 버전에 새롭게 추가된 훅으로 Promise나 Context와 같은 데이터를 참조하는 React API입니다.기존의 복잡한 상태 관리 코드를 대폭 간소화하면서도, Suspense와 Error Boundary와의 완벽한 통합으로 더 나은 사용자 경험을 제공합니다.import { use } from 'react';function MessageComponent({ messagePromise }) { const message = use(messagePromise); const theme = use(ThemeContext); // ... use 훅으로 데이터 불러오기기존 방식const getMockDataAxios = async () => { const response = await a..

React-Query란?React Query는 React 애플리케이션에서 비동기 작업(데이터를 가져오기 등)을 관리하기 위한 간편하고 강력한 라이브러리입니다. 주요 특징으로는 간편한 데이터 캐싱, 자동 재요청 및 캐시 갱신, 에러 핸들링 및 재시도 등이 있습니다. 설치법npmnpm i @tanstack/react-query yarnyarn add @tanstack/react-query 같이 설치하면 좋은 거 react-query-devtoolsyarn add @tanstack/react-query-devtools 왜 쓸까?캐싱: React Query는 데이터를 자동으로 캐싱하고 필요할 때 캐시된 데이터를 사용합니다. 이를 통해 네트워크 요청의 중복을 방지하고 성능을 향상시킵니다.에러 핸들링 및 재시도: ..
이 글에서는 TypeScript에서 유니온 타입을 선언하는 다양한 방법을 소개합니다. 이를 통해 타입 시스템을 최대한 활용하여 더 안정적이고 읽기 쉬운 코드를 작성할 수 있을 것입니다. 1. 기본적인 유니온 타입 선언가장 기본적인 유니온 타입은 파이프(|) 연산자를 사용하여 여러 타입을 결합하는 것입니다.type StringOrNumber = string | number;let value: StringOrNumber;value = "hello"; // OKvalue = 42; // OKvalue = true; // Error: Type 'boolean' is not assignable to type 'string | number'. StringOrNumber 타입은 문자열 또는 숫자만..

이번 포스팅에서는 react-three/cannon을 활용하여 주사위 굴리기를 구현해보려고 합니다. react-three/cannon란?cannon-es을 기반으로 리액트에서 사용하기 쉽도록 만든 라이브러리로 물리적인 엔진을 적용하는데 사용하는 라이브러리입니다. 설치법npm install @react-three/cannon 초기 세팅Physics 컴포넌트로 물리적인 엔진을 적용할 컴포넌트를 감쌉니다. App.jsx {/* Physics related objects in here please */} - gravity : 중력을 적용할 수 있습니다. 지구의 중력은 [0, -9.81, 0] 입니다.- restitution : 물체가 충돌 후 얼마나 튕겨나가지..

3D 그래픽은 웹 개발에서 점점 더 중요한 역할을 하고 있습니다. React Three Fiber는 React 환경에서 Three.js를 쉽게 사용할 수 있게 해주는 라이브러리입니다. 이번 블로그 글에서는 React Three Fiber의 활용 방법을 알아보겠습니다. 설치npm install @react-three/fiber @react-three/drei three 이제 코드를 통해 어떤 기능들이 있는지 알아보겠습니다. 기본적인 3D 예제 코드import React from 'react';import { Canvas } from '@react-three/fiber';import { OrbitControls } from '@react-three/drei';function Box() { return ( ..
React 개발에서 컴포넌트 간 통신은 주로 props와 state를 통해 이루어집니다. 하지만 때때로 이벤트 기반 통신이 더 적합할 수 있습니다. Node.js에서 널리 사용되는 EventEmitter를 웹 애플리케이션에 적용하고 싶을 때 eventemitter3 라이브러리가 유용하게 사용될 수 있습니다. 이 글에서는 eventemitter3를 활용하여 React 컴포넌트 간 이벤트 기반 통신을 구현하는 방법과 Stompjs 메세지를 처리하는 방법에 대해 소개하도록 하겠습니다. eventEmitter3란?eventemitter3는 이벤트 기반 통신을 위한 매우 가벼운 라이브러리입니다. Node.js의 EventEmitter와 API 호환성을 유지하면서 브라우저와 다른 JavaScript 환경에서도 사용..
클로저란?자바스크립트의 핵심 개념중 하나로 간단하게 얘기하자면 함수가 선언된 환경을 "기억"한다는 의미입니다. 즉, 함수 자신이 생성될 때 접근할 수 있었던 변수들을 후에도 계속 접근할 수 있게 하는 기능입니다. 예제 코드로 클로저가 어떤 방식인지 설명하도록 하겠습니다. 예제 코드자바스크립트에서 함수는 그 함수가 선언된 스코프의 렉시컬 환경을 참조합니다. 이 환경은 함수가 접근할 수 있는 모든 지역 변수, 인자, 그리고 부모 스코프의 변수를 포함합니다.function outerFunction() { let outerVariable = 'I am outside!'; function innerFunction() { console.log(outerVariable); } return innerF..
- Total
- Today
- Yesterday
- revalidatePath
- zustand
- revalidateTag
- rc-dock
- 24431
- react-three-fiber
- React
- 백준
- useMemo
- 25329
- useMutation
- 해시를 사용한 집합과 맵
- js
- useCallback
- 20551
- useoptimistic
- react-quey
- react-query
- eventemitter3
- useQuery
- 9575
- RefreshToken
- stompjs
- 4659
- React.JS
- NextAuth
- sepolia
- Next.js
- react19
- baekjoon
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |