본문 바로가기

FE - Tools/개발 도구8

[React] 로딩 컴포넌트를 제공하는 라이브러리 (Spinner, Skeleton 등) 로딩 컴포넌트를 제공하는 라이브러리 basic-loading 로딩 UI 컴포넌트 로딩 컴포넌트를 간단하게 사용할 수 있는 basic-loading이라는 라이브러리가 개발이 완료되어 블로그에도 소개하려 한다🤩 이 라이브러리에서 제공하는 컴포넌트는 총 8가지로, BasicDot, BounceDot, Fade, ProgressBar, Pulse, Skeleton, Spinner, Wave가 있다. React 기반으로 만들어진 라이브러리로, React와 Next.js에서 사용 가능하다. NPM: https://www.npmjs.com/package/basic-loading 문서: https://basic-loading-docs.vercel.app/ 사용법 1. 설치 npm 혹은 yarn을 이용하여 설치를 해준다.. 2024. 1. 11.
[Next.js] Next.js에서 Recoil Root 설정하는 법 Next.js에서 Recoil Root 설정하는 법 Next.js에서 Recoil을 사용하려면 React와는 초기 세팅 방법이 약간 다르기 때문에 Recoil Root를 어떻게 세팅하면 되는지 정리해보려 한다. Next.js에서 Recoil 사용하는 법 1. Provider 생성 // app/RecoilRootProvider.tsx // 컴포넌트 이름은 자유롭게 지정 import { ReactNode } from "react"; import { RecoilRoot } from "recoil"; type Props = { children: ReactNode; }; export default function RecoilRootProvider({ children }: Props) { return {childr.. 2023. 10. 20.
[Zustand] 간단한 상태 관리, React에서 Zustand 사용하는 방법 간단한 상태 관리, React에서 Zustand 사용하는 방법 Redux에서 벗어나 봅시다 Zustand 도입 계기 프로젝트를 개발하다 보면 전역 상태 관리는 거의 필수이다. 컴포넌트에서 컴포넌트로 변수를 넘겨줄 일이 많은데, 그 많은 변수들을 전부 props로 넘겨줄 수는 없기 때문이다. 따라서 전역 상태 관리 라이브러리를 도입할 수 밖에 없고, 그중에서도 가장 대표적인 툴은 아마 Redux일 것이다. 나 또한 Redux를 사용했다. 정확히 말하면 Redux Toolkit을 사용했다. 이미 많은 사람들이 사용하는 툴이고, 그래서 정보도 많고, 공부할 때 참고할 자료도 많았다. 그래서 너무 당연하게도 나에게 상태 관리란 곧 Redux Toolkit이었다. 하지만 점점 문제를 느꼈다. 뭐가 문제나면... .. 2023. 7. 15.
[Redux Toolkit] TypeScript로 store, slice, selector 타입 지정하기 TypeScript로 store, slice, selector 타입 지정하기 1. store.tsx import { configureStore } from "@reduxjs/toolkit"; const store = configureStore({ reducer: { // reducer 입력 }, }); export default store; export type RootState = ReturnType; 가장 하단에 export type RootState = ReturnType; 를 추가한다. 2. slice.tsx import { createSlice, PayloadAction } from "@reduxjs/toolkit"; interface StateType { a: number; b: boolean.. 2023. 2. 26.
[React Query] TypeScript로 getQueryState 사용하기 TypeScript로 getQueryState 사용하기 React Query를 이용해 App.js에서 다음과 같이 API 데이터를 받아왔다. // App.js const query = useQuery("dataName", async () => ( await fetch( "https://API 링크" ) ).json() ); App.js가 아닌 다른 페이지에서 해당 데이터를 받아오려면 getQueryState를 이용하면 된다. 공식문서 : https://react-query-v3.tanstack.com/reference/QueryClient#queryclientgetquerystate QueryClient | TanStack Query Docs QueryClient The QueryClient can be.. 2023. 2. 26.
[React Query] React Query 알아보기 React Query 알아보기 # React Query란 React Query는 React의 라이브러리로, 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어준다. 기존의 Redux, Recoil과 같은 상태 관리 라이브러리들은 서버 쪽의 데이터들을 관리하기에는 적합하지 않았는데, React Query는 이를 해결해준다. 예를 들어, 두 명의 관리자가 동시에 같은 페이지를 바라보고 있는 상황에서, 한 사람이 데이터를 변경하면 다른 사람도 그 변경된 데이터를 바라볼 수 있어야 한다. React Query는 이런 상황에서 데이터를 용이하게 관리할 수 있도록 서버 측을 도와준다. 또한 React 컴포넌트 내부에서 간단하고 직관적으로 API를 사용할 수 있기 때문에 프론트엔드 입.. 2023. 1. 30.

티스토리툴바