도옹건 공부 일기

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..

React에서는 성능을 최적화하기 위해 React.memo, useCallback, useMemo 라는 세가지 기능 제공합니다. 각각의 기능들은 특정 상황에서 컴포넌트 렌더링을 최적화 하는데 사용됩니다. 세 가지 기능들이 무슨 역할을 하는지와 사용법에 대해 알아보도록 하겠습니다. React.memoReact.memo는 고차컴포넌트로 함수형 컴포넌트에서 불필요한 리렌더링을 방지하는데 사용됩니다.얕은 비교를 통해 props가 변경이 될때에만 해당 컴포넌트를 리렌더링합니다. 즉, props가 변경되지 않으면 리렌더링을 하지 않습니다. 예시 코드const MyComponent = (props) => { // 컴포넌트 구현};export default React.memo(MyComponent); // React..

서버에 데이터를 요청할 때 헤더에 액세스 토큰을 포함하는 경우가 많습니다. 이 때 액세스 토큰이 만료되면 서버에서 401 에러를 응답받게 되는데, 사용자 경험을 고려하면 액세스 토큰이 만료되었을 때 리프레시 토큰으로 새로운 액세스 토큰을 발급받고 다시 서버에 요청하는 것이 좋습니다. 이를 구현하기 위해서는 axios에서 제공하는 interceptors를 사용하여 구현할 수 있습니다. 1. axios 인스턴스 생성// api 인스턴스 생성const api = axios.create({ baseURL,}); 2. axios.interceptors.response를 통해 액세스 토큰 재발급 후 재요청// 응답을 가로채고 처리하는 인터셉터 설정api.interceptors.response.use( (resp..