본문 바로가기

분류 전체보기39

[React] Zustand Zustand Docs hook 기반의 상태 관리 라이브러리입니다.Store 생성import { create } from 'zustand'interface BearState { bears: number; increase: (by: number) => void;}const useBear = create((set) => ({ bears: 0, increase: (by) => set((state) => ({ bears: state.bears + by })),})) 필요한 상태값과 메소드 타입을 정의하여 createStore 메소드의 제네릭 타입으로 사용합니다.createStore 파라미터의 set 메소드를 통해 store의 상태값을 업데이트하는 메소드를 정의할 수 있습니다.상태값을 LocalStorag..
2026. 1. 9. React
[Next.js] 차트 라이브러리 비교 RechartsBundle SizeMinified : 640.6 kBMinified + Gzipped : 160.5 kB특징리액트 기반이기 때문에 Next.js와 호환이 좋음다양한 차트 타입 지원쉬운 커스터마이징Storybook 제공a Bar Chart Border Radius | Chart.jsLast Updated: 6/14/2025, 8:19:17 PMwww.chartjs.orgBundle SizeMinified : 202.7 kBMinified + Gzipped : 67.7 kB특징react-chartjs-2라는 React용 래퍼 라이브러리 사용 필요2.9 kB / 1.1 kBNivo Bar chart | nivo nivo.rocksBundle SizeMinified : 382.1 kBMinif..
2025. 10. 1. Next.js
[Next.js] Code Splitting Next.js는 Webpack을 사용하여 JS, CSS, 이미지 등 모든 모듈을 효율적으로 번들링합니다.이렇게 번들된 코드는 브라우저가 빠르게 읽고 실행할 수 있습니다. 코드 분할(Code Splitting)을 통해 번들을 여러 조각(chunk)이나 컴포넌트 단위로 나누어,초기 페이지 로딩 시 꼭 필요한 코드만 내려받고 나머지는 필요할 때 불러올 수 있습니다. 이를 위해 Next.js에서는 dynamic import를 활용하여 특정 컴포넌트를 사용자가 필요로 할 때만 동적으로 불러올 수 있으며, 덕분에 초기 로딩 속도가 빨라지고 사용자 경험이 개선됩니다.const CodeSampleModal = dynamic(() => import('../components/CodeSampleModal'), { ssr..
2025. 10. 1. Next.js
[React] 유니크한 QueryKey 관리 QueryKeyTanstack Query QueryKey Docs TanStack Query는 쿼리 키를 기반으로 쿼리 캐싱을 관리합니다.쿼리 키는 최상위 배열이어야 하며, 단일 문자열을 포함하는 배열처럼 간단할 수도 있고, 여러 문자열과 중첩된 객체로 구성된 배열처럼 복잡할 수도 있습니다.쿼리키는 JSON.stringify를 사용해 직렬화 가능하고 쿼리 데이터에서 고유하다면 사용할 수 있습니다. 💡 QueryKey로 쿼리 캐싱을 관리하기 때문에 반드시 유니크 하도록 키를 관리해야합니다.간단한 쿼리키// A list of todos useQuery({ queryKey: ['todos'], ... })// Something else, whatever!useQuery({ queryKey: ['somethi..
2025. 10. 1. React
[React] React Hook Form 공식 문서 react-hook-form은 유효성 검사를 쉽게 할 수 있는, 성능이 우수하고 유연하며 확장 가능한 form을 제공하는 라이브러리입니다.설치npm install react-hook-form사용 예시import { useForm, SubmitHandler } from "react-hook-form"type Inputs = { example: string exampleRequired: string}export default function App() { const { register, handleSubmit, watch, formState: { errors }, } = useForm() const onSubmit: SubmitHandler = (data) => co..
2025. 10. 1. React
[Next.js] Tanstack Query 활용 Tanstack Query Docs TanStack Query( 이전 명칭: React Query )는 웹 애플리케이션에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 작업을 쉽게 해줍니다.설치pnpm add @tanstack/react-query프로젝트에 적용Providertanstack-query를 사용하기 위해 최상단에 를 렌더링합니다.app router의 경우 layout에 추가합니다. ( 한번 더 감싸는 Provider 컴포넌트를 사용하도록 구현 )const queryClient = new QueryClient()function App() { return ( // Provide the client to your App )}Queriesunique ke..
2025. 10. 1. Next.js