JavaScript82 다국어 라이브러리 react-i18next Introduction | react-i18next documentationLast updated 2 months agoreact.i18next.com1단계: 기본 설정 및 번역 시스템 이해목표번역 키를 관리하는 JSON 구조를 익히고react-i18next를 사용해 컴포넌트에서 번역하는 흐름을 완전히 이해1. i18n이란?i18n = internationalization의 줄임말 (i와 n 사이에 18글자)앱을 여러 언어로 지원할 수 있도록 구성하는 기술문자열, 날짜, 단위 등을 사용자 언어에 맞게 자동 출력하도록 지원2. i18next와 react-i18nexti18next: 국제화 핵심 엔진 (JS 기반)react-i18next: i18next를 React에서 쉽게 쓰도록 만든 래퍼 라이브러리3. .. 2025. 6. 9. 상태 관리 라이브러리 valtio valtio는 React 애플리케이션에서 간결하고 직관적인 상태 관리를 가능하게 해주는 프록시 기반 상태 라이브러리입니다.주요 특징프록시 기반JavaScript Proxy를 활용해 상태를 감지하고 자동으로 렌더링불변성 처리 필요 없음setState 없이 직접 값을 변경하면 자동으로 UI가 반응간단한 문법useSnapshot() 훅으로 상태를 구독타입스크립트 친화적타입 추론과 추적이 우수Recoil, Zustand보다 더 선언적코드가 짧고 명확함기본 사용법import { proxy, useSnapshot } from 'valtio';// 전역 상태 정의const state = proxy({ count: 0,});// 컴포넌트에서 사용function Counter() { const snap = useSn.. 2025. 6. 9. wouter wouter란?wouter는 React를 위한 초경량 클라이언트 사이드 라우터입니다.기본적인 라우팅만 제공하며, 크기와 API를 최소화한 것이 특징입니다.크기: 약 3KB (gzip 기준)철학: "필요한 것만. 작고 단순하게."형태: Hook 기반 라우터 (React Router처럼 JSX 컴포넌트 기반이 아님)핵심 특징1. 아주 작은 번들 사이즈성능에 민감한 앱(예: 3D/Canvas/모바일)에 적합추가 의존성 거의 없음2. 훅(Hook) 기반 APIuseLocation, useRoute 등 React Hook으로 라우팅 처리함수형 컴포넌트에 잘 어울림3. 선언적 & 간단한 라우팅 구성4. 커스텀 라우터 구성 가능해시 라우터, 메모리 라우터 등 직접 정의 가능 (Router 컴포넌트)5. React의 .. 2025. 6. 9. 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. Zod + zodResolver + React Hook Form Zod 기본 개념 (TypeScript에서 스키마 기반 데이터 검증)https://zod.dev/ Intro | Zod zod.devZod란?Zod는 TypeScript에서 스키마 기반 데이터 검증을 수행하는 라이브러리이다.TypeScript의 타입 시스템은 컴파일 단계에서만 타입을 체크하지만, Zod는 런타임에서도 데이터를 안전하게 검증할 수 있도록 도와준다.TypeScript 타입만 사용한 경우 (런타임에서 오류 검출 불가)type User = { name: string; age: number;};const data = JSON.parse('{"name": "Alice"}'); // `age` 없음const user: User = data; // ❌ 컴파일 시 문제 없음 (하지만 실행 시 오류 가.. 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. TypeScript에서 타입을 정의하는 주요 방식 1. enum (TypeScript 전용 문법)정해진 상수 집합을 정의할 때 사용.// 문자열 enumexport enum Category { WORD = 'WORD', NOTE = 'NOTE', TODO = 'TODO',}// 사용const value: Category = Category.NOTE;타입: Category값: Category.NOTE 같은 형태장점: 자바스러운 문법, key → value가 있음단점: 유연성 떨어짐, JS에서 직접 쓰기엔 불편함2. 유니언 타입 ('A' | 'B' | 'C')가장 유연하고, 문자열 리터럴 제한에 적합export type Category = 'WORD' | 'NOTE' | 'TODO';const cat: Category = 'NOTE'; // ✅프론트에.. 2025. 5. 2. 이전 1 2 3 4 5 6 ··· 10 다음
