![]()
tailwind-merge 라이브러리import { clsx, type ClassValue } from 'clsx';import { twMerge } from 'tailwind-merge';export function tailwindMerge(...inputs: ClassValue[]) { // clsx를 사용하여 입력된 모든 클래스네임을 결합하고, // 이를 twMerge에 전달하여 최종 병합된 클래스네임을 반환합니다. return twMerge(clsx(...inputs));} 간단히 위처럼 사용할 수 있습니다.GPT 쌤의 자세한 설명을 첨부합니다.clsx와 twMerge를 함께 사용하여 tailwindMerge 함수를 구현하면, 이 함수는 clsx만을 사용하는 경우보다 더 강력하고 ..
![]()
1. 라이브러리 설치리액트 인터섹션 옵저버 설치npm install react-intersection-observer탠스택쿼리 설치npm install @tanstack/react-query @tanstack/react-query-devtools2. 탠스택쿼리 프로바이더 설정프로바이더 만들기"use client";import { isServer, QueryClient, QueryClientProvider } from "@tanstack/react-query";import { ReactQueryDevtools } from "@tanstack/react-query-devtools";function makeQueryClient() { return new QueryClient({ default..
![]()
cva with 타입스크립트?포켓몬 도감 비스무리한 개인과제 프로젝트를 하면서,cva 라이브러리를 사용 중에 타입지정에 매우 애를 먹었습니다.원래 이렇게 쓰는건가 싶습니다...? 더 공부해봐야겠습니다 ㅠㅠ아래의 예는 포켓몬의 타입 18개에만 해당하는 것이라 문제가 덜하지만속성인지 뭔지는 게임의 세대가 변화될때마다 추가되어서 뭐 몇개인지도 모르겠어요. 이것을 다 리터럴 타입으로 지정하자니 너무 힘들고 해서 mapped type 을 사용하긴 했는데되는건지 뭔지 모르겠습니다? 관련 내용을 정리합니다.cva chip 컴포넌트 만들기포켓몬의 18가지 타입에 맞는 Chip 컴포넌트를 만들기 위해 기존의 chipVariants 객체에 포켓몬 타입별 색상을 추가합니다.각각의 타입에 적절한 배경색, 테두리색, 텍스트 색..
![]()
이번엔 tanstack query 의 공식문서 중 Advanced Server Rendering 항목을 공부하였습니다.아래 내용을 정리합니다. 이번 포스팅 내용이 app router 에 해당합니다.Advanced Server Rendering이 가이드에서는 스트리밍, 서버 컴포넌트 및 Next.js 앱 라우터와 함께 React 쿼리를 사용하는 모든 것을 배울 수 있습니다. 이 가이드에 앞서 서버 렌더링 및 하이드레이션 가이드를 읽어보시는 것이 좋으며, 이 가이드에서는 SSR과 함께 React Query를 사용하기 위한 기본 사항을 설명하고 성능 및 요청 워터폴과 프리페칭 및 라우터 통합에 대해서도 유용한 배경 지식을 담고 있습니다. 시작하기 전에 SSR 가이드에 설명된 초기데이터 접근 방식은 서버 컴포넌..
![]()
이번엔 tanstack query 의 공식문서 중 Server Rendering & Hydration 항목을 공부하였습니다.아래 내용을 정리합니다. 중요! 이번 포스팅 내용은 페이지 라우터 버전입니다. 앱 라우터 버전은 다음 포스팅에 있습니다 Server Rendering & Hydration이 가이드에서는 서버 렌더링에 React 쿼리를 사용하는 방법을 알아봅니다.배경 지식은 프리페칭 및 라우터 통합 가이드를 참조하세요. 그 전에 성능 및 request waterfall 가이드도 확인해 보세요.스트리밍, 서버 컴포넌트 및 새로운 Next.js 앱 라우터와 같은 고급 서버 렌더링 패턴에 대해서는 고급 서버 렌더링 가이드를 참조하세요.서버 렌더링 & React 쿼리그렇다면 서버 렌더링이란 무엇일까요?이 가..
![]()
tanstack query 의 공식문서 중 Prefetching & Router Integration 항목을 공부하였습니다.아래 내용을 정리합니다. Prefetching & Router Integration특정 데이터가 필요할 것으로 예상되는 경우 미리 가져오기를 사용하여 캐시를 해당 데이터로 미리 채우면 더 빠른 환경을 제공할 수 있습니다.몇 가지 다른 프리페칭 패턴이 있습니다:이벤트 핸들러에서컴포넌트에서라우터 통합을 통해서버 렌더링 중(라우터 통합의 또 다른 형태)이 가이드에서는 처음 세 가지를 살펴보고, 네 번째는 서버 렌더링 및 수화 가이드와 고급 서버 렌더링 가이드에서 자세히 다룰 것입니다. 프리페칭의 구체적인 용도 중 하나는 요청 워터폴을 피하는 것인데, 이에 대한 자세한 배경과 설명은 성능 ..
![]()
이번 개인과제에서는 250개의 배열을 리턴하는 api 를 사용해야 했습니다.그런데 이것을 한번에 화면에 렌더링 하자니 무언가 마음에 들지 않아서react-intersection-observer 를 사용해보고 싶어졌습니다.1 ) 전체 배열을 부분 배열화 하여 2차원 배열 생성이를 위해서 250 길이의 배열을 20개씩 나누기로 했습니다.그래서 이를 수행하는 간단한 util 함수를 작성하였습니다.// util 함수function makeChunkArray(array: T[], chunkSize: number): T[][] { const chunks = []; for (let i = 0; i { const fetchCountries: FetchCountries = async () => { ..
![]()
함수형 업데이트Zustand의 set 함수에서 상태를 업데이트할 때, 두 가지 방식 모두 사용할 수 있습니다:단순한 상태 업데이트:이 방식은 상태를 직접적으로 업데이트합니다. set 함수에 객체를 전달하면 Zustand는 해당 객체를 기존 상태에 병합(merge)합니다.setUser: (user) => set({ user }),setLoggedIn: (isLoggedIn) => set({ isLoggedIn }),함수형 상태 업데이트:이 방식은 함수형 업데이트를 사용하여 상태를 업데이트합니다. 이 패턴은 주로 이전 상태에 의존하는 상태 업데이트가 필요할 때 사용됩니다. 예를 들어, 상태의 특정 부분을 변경할 때 이전 상태를 참조해야 할 경우에 유용합니다.setUser: (user) => set(() =>..
![]()
Zustand 스토어에서 expends의 초기값을 설정하는 방법으로 useQuery를 사용할 수 있지만, useQuery는 React 컴포넌트 내부에서만 사용할 수 있습니다. 대신 Zustand와 Tanstack Query를 함께 사용하여 상태를 관리할 수 있는 패턴을 사용할 수 있습니다.다음은 Zustand와 Tanstack Query를 함께 사용하여 초기 데이터를 설정하는 방법입니다.1. Tanstack Query와 Zustand 설정먼저, react-query 라이브러리와 Zustand를 설치해야 합니다.npm install @tanstack/react-query zustand2. Zustand 스토어 설정Zustand 스토어를 설정하고, expends 상태를 관리하는 방법을 정의합니다.import..
![]()
useMutation, Optimistic Update 패턴useMutation 훅은 비동기 작업(특히 서버에 데이터를 추가, 수정, 삭제하는 작업)을 처리할 때 사용됩니다.이 예제에서는 addTodo 함수가 서버에 새로운 할 일을 추가하는 비동기 작업을 수행합니다.useMutation 훅을 사용하여 이러한 작업의 상태(성, 실패, 진행 중 등)를 관리하고, 해당 작업이 애플리케이션의 상태에 미치는 영향을 제어할 수 있습니다.주요 콜백 및 설정mutationFn:mutationFn은 실제로 변이를 수행하는 비동기 함수입니다. 여기서는 addTodo 함수가 이 역할을 합니다.onMutate:onMutate는 변이가 시작될 때 호출됩니다.서버에 요청을 보내기 전에 로컬 상태를 업데이트하여 응답 지연을 사용자..
![]()
useQuery 의 queryKey 배열에 대해 설명해주세요useQuery의 queryKey는 React Query에서 캐싱 및 상태 관리의 핵심 요소입니다. queryKey는 쿼리의 고유한 식별자로 사용되며, React Query는 이를 기반으로 데이터 캐싱, 데이터 무효화, 리패칭 등을 관리합니다.queryKey의 역할데이터 캐싱 및 식별:queryKey는 쿼리의 고유 식별자입니다. 동일한 queryKey를 가진 쿼리는 동일한 데이터 캐시를 공유합니다.React Query는 queryKey를 사용하여 캐시된 데이터를 저장하고 검색합니다.쿼리 무효화 및 리패칭:특정 queryKey를 가진 쿼리를 무효화하면, React Query는 해당 queryKey에 대한 데이터를 무효화하고, 필요에 따라 다시 패칭..
![]()
01) Tanstack Query life cycle(1) (캐시 데이터에 대한) LifeCycle 설명TanStack Query의 생명주기는 데이터가 캐시되고, 사용되고, 갱신되는 과정을 포함합니다.아래는 주요 상태들에 대한 설명입니다.상태설명fresh데이터를 새로 패칭할 필요가 없는 상태입니다. staleTime이 지나지 않은 상태로, 캐시 데이터를 그대로 사용할 수 있습니다.stale데이터를 새로 패칭해야 하는 상태입니다. staleTime이 지난 후로, 새로운 데이터를 가져오기 위해 쿼리가 실행됩니다.active현재 컴포넌트에서 사용 중인 쿼리 상태입니다. 컴포넌트가 마운트되어 쿼리를 사용하고 있을 때를 말합니다.inactive더 이상 사용되지 않는 쿼리 상태입니다. 컴포넌트가 언마운트되거나 쿼리..
![]()
initializeUser 등의 메서드는 필요없다Tanstack Query 로 Auth 를 구성 할 때, 로그인 등의 경우,initializeUser 등을 따로 실행할 필요가 없습니다.staleTime을 infinity 로 설정하고 로그인 등의 함수에 invalidateQueries 를 해주는 것이 더 좋습니다!class AuthAPI { private axios: Axios; private token: string | null; constructor(axios: Axios) { const accessToken: string | null = localStorage.getItem("accessToken"); this.axios = axios; this...
![]()
TanStack Query(구 React Query)의 타입스크립트 버전 사용법 설치및 사용패키지 설치먼저 TanStack Query 패키지를 설치해야 합니다. 패키지를 설치하려면 다음 명령어를 사용하세요:npm install @tanstack/react-query @tanstack/router-devtools또는yarn add @tanstack/react-query @tanstack/router-devtools타입스크립트 타입 정의도 설치합니다:npm install @types/reactReact Query 클라이언트 설정React Query 클라이언트를 설정하고, 이를 앱 전체에서 사용할 수 있도록 제공합니다.// src/main.tsx 또는 src/index.tsximport React from '..
![]()
오늘은 clsx 라이브러리를 사용해보고 핵심사항을 정리합니다.clsx는 조건부로 클래스 이름을 결합할 수 있는 JavaScript 유틸리티 라이브러리입니다.React와 함께 사용하기에 매우 유용합니다.간단한 API로 여러 클래스 이름을 조건부로 결합하여 동적으로 클래스 이름을 생성할 수 있습니다.주요 기능:조건부 클래스 결합: 객체, 배열, 문자열 등 다양한 입력 형식을 지원합니다.진리값 평가: 값이 true인 경우에만 해당 클래스가 포함됩니다.사용 예시:import clsx from 'clsx';// 간단한 예시const buttonClass = clsx('btn', { 'btn-primary': isPrimary, 'btn-secondary': !isPrimary,});// React 컴포넌트에서..
![]()
React Query, 현재는 TanStack Query로 알려진 라이브러리는 리액트 애플리케이션에서 서버 상태 관리를 쉽게 해주는 도구입니다. 등장 배경과 기본 개념에 대해 알아보겠습니다.등장 배경서버 상태 관리의 복잡성: 클라이언트 애플리케이션에서 서버와 데이터를 주고받을 때, 데이터의 로딩 상태, 에러 처리, 캐싱, 동기화 등의 문제를 해결해야 합니다. 이를 위해 많은 보일러플레이트 코드가 필요하며, 이러한 코드가 애플리케이션의 복잡성을 증가시킵니다.Redux와 같은 상태 관리 라이브러리의 한계: Redux는 클라이언트 상태 관리에는 매우 유용하지만, 서버 상태 관리에는 적합하지 않습니다. 서버 상태는 클라이언트 상태와 다르며, 주로 외부 소스에서 가져온 데이터를 다룹니다. 이 데이터를 관리하기 위..
![]()
액션크리에이터Redux를 활용하여 상태와 액션을 보다 효과적으로 관리하기 위해 커스텀 훅을 만들어보았습니다.이 훅을 사용하면 Redux 상태와 액션을 컴포넌트에서 간편하게 사용할 수 있습니다.이 훅에서 사용되는 각 액션 크리에이터 (예: selectMemo, createMemo, deleteMemo, updateMemo)는 Redux에서 일반적으로 Action Creators로 불립니다.정의:Custom Hook: 리액트 훅을 사용하여 재사용 가능한 로직을 캡슐화한 함수. useMemoApp은 커스텀 훅입니다.Action Creator: 특정 액션을 생성하여 디스패치하는 함수. 예를 들어, selectMemo, createMemo, deleteMemo, updateMemo가 여기에 해당합니다.코드 설명:..
![]()
오늘은 리액트에서 HTTP 요청을 보내는 방법 중 Axios 에 대해 알아보려고 합니다.Axios는 비동기적으로 데이터를 가져오거나 서버에 데이터를 보내는 데 유용한 HTTP 클라이언트 라이브러리입니다.아래에 Axios를 리액트 프로젝트에 통합하여 사용하는 방법을 단계별로 정리합니다.1. Axios 설치먼저, Axios를 프로젝트에 설치합니다. 터미널에서 다음 명령어를 실행합니다.npm install axios또는 Yarn을 사용하는 경우:yarn add axios2. Axios 설정필요한 경우, Axios 인스턴스를 설정하여 기본 URL이나 공통 헤더 등을 설정할 수 있습니다. 하지만 간단한 사용을 위해 기본 설정을 사용해 보겠습니다.3. 간단한 GET 요청 예시리액트 컴포넌트에서 Axios를 사용하여..
![]()
오늘은 Redux Toolkit 사용 중에 궁금한 것이 생겨 정리해 보려고 합니다.보통 리액트에서 setState 를 할 때는 불변성 관리를 위해 ... 펼침연산자를 사용해 원본 객체를건드리지 않는게 일반적이라고 알고 있습니다. 그런데 Redux Toolkit 에서는 원본배열에 push 한다거나 하는 패턴이 나타납니다.이것이 궁금하여 조사해 보았습니다. 결과적으로 Redux Toolkit은 Immer를 내부적으로 사용하여 불변성을 자동으로 관리해준다고 합니다.이를 통해 개발자는 불변성을 직접 관리할 필요 없이, 더 간단하고 직관적인 방식으로 상태를 업데이트할 수 있습니다.Immer와 Redux ToolkitRedux Toolkit은 createSlice와 같은 함수를 사용할 때 Immer를 사용합니다.I..
![]()
Redux ThunkㄱRedux Thunk는 Redux에서 비동기 작업을 처리하기 위한 미들웨어입니다. Redux는 기본적으로 동기적으로 상태를 관리하지만, 비동기 작업(예: API 호출, 타이머, 파일 읽기 등)을 처리할 수 있는 기능이 내장되어 있지 않습니다. Redux Thunk를 사용하면 이러한 비동기 작업을 처리할 수 있습니다.Redux Thunk의 역할비동기 액션 처리: Redux Thunk를 사용하면 액션 생성자가 함수를 반환할 수 있습니다. 이 함수는 비동기 작업을 수행하고, 필요에 따라 디스패치를 여러 번 호출하여 상태를 업데이트할 수 있습니다.로직 캡슐화: 비동기 로직이나 조건부 로직을 액션 생성자 내부에 캡슐화하여, 컴포넌트가 간결해지고 비즈니스 로직이 분리됩니다.기본 개념Redux ..
![]()
오늘은 mock 데이터를 보내주는 가상 서버를 만들어 연습 등등에 사용할 수 있는 방법을 배웠습니다.JSON Server 가 그것으로, JSON Server는 간단한 REST API 서버를 만들기 위해 사용되는 라이브러리라고 합니다.JSON Server를 통해 JSON 파일을 기반으로 빠르게 Mock API를 생성할 수 있습니다. JSON Server의 설치 및 기본 사용법을 정리합니다.1. JSON Server 설치먼저 JSON Server를 글로벌로 설치합니다.npm install -g json-server2. JSON 파일 준비JSON Server는 JSON 파일을 데이터베이스로 사용합니다. 프로젝트 루트 디렉토리에 db.json 파일을 생성하고 다음과 같이 데이터를 준비합니다.// db.json{..
![]()
오늘은 전역 상태관리 라이브러리인 Redux 그리고 사용성을 강화한Redux Toolkit 의 기본에 대해 정리해보려고 합니다.1. Redux 설치먼저 필요한 패키지를 설치합니다.npm install @reduxjs/toolkit react-redux2. 기본적인 파일 구조src/├── store/│ ├── todoSlice.ts│ └── store.ts├── App.tsx└── index.tsx3. store.ts 설정store.ts` 파일을 생성하고 다음과 같이 설정합니다.// store.tsimport { configureStore } from '@reduxjs/toolkit';import todoSlice from './todoSlice';export const store = configu..
![]()
오늘은 tsx 에서 styled-components 사용시 발생한 경고를 해결한 벙법을 정리해보겠습니다.상황은 조건부로 styled-components 를 처리하려고 styled div 에 prop을 전송하는 상황입니다.unknown prop?import styled from "styled-components";import { ToDo } from "../types/d";// 아래와 같이 적용하면,// it looks like an unknown prop "one" is being sent through to the DOM, which will likely trigger a React console error.// 위와 같은 에러가 발생합니다!const StyledDiv = styled.div` b..
