FrontEnd/React

1.HeroiconsSVG 형식으로 제공되는 무료 아이콘 세트로 Tailwind Labs에서 제작했으며, 심플하고 현대적인 디자인의 아이콘을 제공해준다.https://heroicons.com/ HeroiconsBeautiful hand-crafted SVG icons, by the makers of Tailwind CSS.heroicons.comnpm install @heroicons/react import { BeakerIcon } from '@heroicons/react/24/solid';function Example() { return ;}   2.Headless UITailwind Labs에서 개발한 완전히 스타일이 없는, 접근성이 뛰어난 UI 컴포넌트 모음https://headlessui.co..

1.npm tailwindcss 설치npm install -D tailwindcss postcss autoprefixer    2.tailwind.config.js 생성다음 명령어로 tailwind.config.js 파일을 생성하고 다음과같이 수정한다.npx tailwindcss init/** @type {import('tailwindcss').Config} */module.exports = { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: {}, }, plugins: [],}  3.vite.config.ts 파일수정 vite.config.ts을 다음처럼 수정한다.import { defineConfig } ..

1.Tanstack Query데이터 상태 관리를 위한 라이브러리로,  비동기 데이터 fetching 및 캐싱을 위한 도구   1-1.useQuery 사용const { data, isLoading, isError } = useQuery({ queryKey: [...], // 쿼리의 고유 식별자 (Query Key) queryFn: asyncFunction, // 쿼리 실행 함수 (Promise 반환) options?: { ... } // 추가 옵션 });                   🎈참고자료

1.Errorboundary 발생하는 예외를 관리하고, 앱이 충돌하지 않도록 도와주는 컴포넌트Error Boundary 컴포넌트는 앱의 트리 하위에서 에러가 발생했을 때 사용자에게 대체 UI를 제공한다.  import React, { Component, ErrorInfo } from 'react';// 상태 타입 정의interface ErrorBoundaryState { hasError: boolean;}// 속성 타입 정의interface ErrorBoundaryProps { children: React.ReactNode; // ErrorBoundary 안에 들어갈 컴포넌트 자식 요소}class ErrorBoundary extends Component { constructor(props: Err..

1.Lazy컴포넌트를 비동기적으로 로딩할 수 있게 해준다.const 컴포넌트 = React.lazy(() => import('./컴포넌트'));   2.Suspense비동기 작업을 다룰 때 사용자 경험을 향상시키기 위해 사용되는 React 기능비동기 작업이 진행 중일 때 컴포넌트를 일시적으로 잠금 상태로 전환하고, 사용자에게 로딩 상태를 제공하는 데 사용한다.Loading...}>

1.Zustand상태를 전역적으로 관리할 수 있으며, 사용하기 쉬운 API와 빠른 성능을 제공하는 리엑트 라이브러리   2.Zustand store상태와 상태를 업데이트하는 함수들을 포함하고 있으며, 상태를 변경할 때마다 리렌더링을 트리거할수있다.create함수를 통해 생성한다.      3.Context  방식 vs Zustand 방식2-1. 상태 저장,업데이트Context 방식useState를 사용하여 상태를 컴포넌트마다 관리하고 React.Dispatch> 을 사용하여 업데이트를 한다.interface GlobalState { page: number; setPage: React.Dispatch>; searched: boolean; setSearched: React.Dispatch>; sea..

1.useReducer1-1.reducer 함수상태(state)를 업데이트하는 함수 현재 상태(state)와 액션(action)을 받아서 새로운 상태(state)를 반환하는 역할을 한다.function reducer(state, action) { switch (action.type) { case 'ADD':// 새로운 작업을 tasks 배열에 추가 return { ...state, tasks: [...state.tasks, action.newTask] }; case 'DELETE':// 특정 id를 가진 작업을 삭제 return { ...state, tasks: state.tasks.filter(t => t.i..

1.Custom Hook컴포넌트 로직을 재사용 가능하게 만들기 위해 사용되는 함수내장 훅을 조합하여 더 복잡한 로직을 추상화할수도 있고 side Effect를 처리할때 사용할수도있다.import { useState, useEffect } from 'react';function useCustomHook() { const [state, setState] = useState(null); useEffect(() => { setState('Hello, world!'); }, []); return state;}export default useCustomHook; import React from 'react';import useCustomHook from './useCustomHook';function ..