JavaScript/React28 React-Spring 들어가기: JavaScript 애니메이션 개념1. 애니메이션이란?시간에 따라 상태(예: 위치, 크기, 색상 등)가 변하는 것입니다. 브라우저에서 이걸 구현하려면 setInterval 또는 requestAnimationFrame 같은 타이머/프레임 기반 API를 사용합니다. React-Spring은 requestAnimationFrame을 이용해 동작합니다.requestAnimationFrame은 브라우저에 최적화된 애니메이션 실행 방식반드시 setInterval 대신 사용할 것react-spring도 이 방식을 내부에서 사용함2. requestAnimationFrame() 개념requestAnimationFrame(callback)은 다음 브라우저의 리페인트 시점에 콜백 함수를 실행시켜 주는 API입니다.. 2025. 5. 23. dnd-kit(Drag-and-Drop 라이브러리) https://dndkit.com/ dnd kit – a modern drag and drop toolkit for ReactA modular, lightweight, performant, accessible and extensible drag & drop toolkit for React.dndkit.com1단계: 기본 구조 이해1. DndContext의 역할개념DndContext는 드래그 앤 드롭을 가능하게 해주는 최상위 컨테이너입니다.여기에 드래그/드롭 관련 이벤트 핸들러와 센서를 등록하면 자식 컴포넌트에서 드래그가 활성화됩니다.예제import { DndContext } from '@dnd-kit/core';export default function App() { return ( .. 2025. 5. 20. React Hook Form https://react-hook-form.com/ React Hook Form - performant, flexible and extensible form libraryPerformant, flexible and extensible forms with easy-to-use validation.react-hook-form.com1. React Hook Form (RHF) 이란?✔ 핵심 정의 (상세)React Hook Form(RHF)은React의 함수형 컴포넌트에서 "Form 상태 관리", "검증", "에러 처리", "제출 로직"을 간단하고 성능 좋게 관리해주는 라이브러리입니다.React Hook Form은 React의 Hooks 시스템을 기반으로 한 Form 관리 라이브러리 중 가장 널리 사용되는 표준.. 2025. 5. 15. React Query https://tanstack.com/ TanStack | High Quality Open-Source Software for Web DevelopersHeadless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.tanstack.com1단계. React Query의 철학과 역할 이해React Query 등장 배경React Query는 기존 React 개발 환경에서 서버 상태 관리를 효율적으로 개선하기 위해 등장했습니다.전통적인 React 앱에서는 API 호출과 데이터 관리를 useState나 useEffect를 사용해 직.. 2025. 5. 15. Zustand(persist, Zukeeper, Redux DevTools 등) 1. Zustand를 왜 쓰는가?Zustand는 이런 상황에서 유용:컴포넌트 간 상태 공유가 필요할 때 (예: 로그인 상태, 장바구니)Redux처럼 복잡한 설정 없이 바로 쓰고 싶을 때상태가 많아지고 컴포넌트에 prop drilling이 많아졌을 때2. 기본 개념Zustand는 다음 3가지를 중심:store전역 상태 저장소setState상태를 변경하는 함수getState상태를 조회하는 함수 (일반적으로 내부에서만 사용)Zustand는 store를 만들고, 그 상태를 사용하는 것.3. 기본 사용법// store.tsimport { create } from 'zustand'type BearState = { bears: number increase: () => void}export const useBear.. 2025. 4. 2. React에서 화면 사이즈 감지하기(반응형 설정하기, window.innerWidth, matchMedia, react-responsive, tailwind) 1. window.innerWidth 직접 사용 (기본 방식 / 비추천)import { useEffect, useState } from 'react';const useWindowWidth = () => { const [width, setWidth] = useState(window.innerWidth); useEffect(() => { const handleResize = () => setWidth(window.innerWidth); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); return width;};이걸 사.. 2025. 3. 31. .env 파일과 실행 모드 import.meta.env.DEV는 Vite에서 자동으로 설정해줍니다.따라서 직접 설정할 필요는 없습니다.환경 변수 | 의미 | 설정 필요 여부import.meta.env.DEV개발 서버(vite dev)에서 실행 중이면 true❌ 자동 설정됨import.meta.env.PROD프로덕션 빌드(vite build)된 결과물이 실행 중이면 true❌ 자동 설정됨import.meta.env.MODE현재 모드 ('development', 'production', 'test' 등)❌ 자동 설정됨import.meta.env.VITE_XXX는 직접 설정해야 함위에 소개한 기본 환경 변수들과 다르게,VITE_로 시작하는 커스텀 환경 변수는 .env 파일 등에 직접 작성해야 합니다.예:# .envVITE_API_URL.. 2025. 3. 28. Jest와 React Test Library(RTL) Jest는 테스트 실행기 + 검증 도구 JestBy ensuring your tests have unique global state, Jest can reliably run tests in parallel. To make things quick, Jest runs previously failed tests first and re-organizes runs based on how long test files take.jestjs.ioReact Testing Library (RTL)는 React 컴포넌트 렌더링 & DOM 쿼리 도구 Testing Library | Testing LibrarySimple and complete testing utilities that encourage good testing .. 2025. 3. 25. React 고급 Hook React 고급 Hook (React 18+) 1. useId (서버와 클라이언트에서 동일한 ID 생성)React 18+에서 추가된 고유한 ID를 생성하는 Hook.클라이언트와 서버에서 같은 ID를 유지하도록 설계됨.SSR(서버 사이드 렌더링) 환경에서 ID 충돌 방지.폼 라벨 연결import { useId } from "react";const Example = () => { const id = useId(); // 고유한 ID 생성 return ( 이름: );};export default Example;id가 자동으로 생성되므로, 여러 개의 요소를 사용해도 충돌이 발생하지 않음.SSR(Next.js 등)에서 클라이언트와 서버의 ID가 일치하도록 보장함.2. u.. 2025. 3. 21. 이전 1 2 3 4 다음
