JavaScript/React28 forwardRef forwardRef 한줄 개념문제: 함수형 컴포넌트는 기본적으로 ref를 받을 수 없어요(호스트 요소인 div, input 등만 기본 ref 지원).해결: React.forwardRef는 부모가 만든 ref를 자식 컴포넌트 내부의 특정 노드/인스턴스에 “전달”(forward)할 수 있게 해주는 고차 컴포넌트(HOC) 입니다.언제 필요한가?부모가 자식 안쪽의 “실제 노드/인스턴스”를 만지기 위해 사용스타일/레이아웃 래퍼 등 중간 껍데기 컴포넌트를 씌웠는데, 부모가 실제 DOM 노드(또는 R3F의 THREE.Mesh)에 접근해야 할 때외부에서 focus(), scrollIntoView(), play() 같은 명령형(Imperative) 호출을 하고 싶은 컴포넌트R3F에서 부모가 자식 mesh의 positio.. 2025. 8. 18. useDropzone, browser-image-compression [image upload 라이브러리] react-dropzone react-dropzone react-dropzone.js.orgbrowser-image-compression GitHub - Donaldcwl/browser-image-compression: Image compression in web browserImage compression in web browser. Contribute to Donaldcwl/browser-image-compression development by creating an account on GitHub.github.com이미지 업로드 전체 흐름[사용자: 이미지 드래그 앤 드롭] │ ▼🧩 useDropzone.onDrop() │ ├─▶ 파일.. 2025. 7. 10. Tiptap Editor TIPTAP toolkit Tiptap - Dev Toolkit Editor SuiteTiptap is a suite of content editing & real time collaboration tools. Build editor experiences like Notion in weeks, not years.tiptap.dev1단계1-1. 설치npm install @tiptap/react @tiptap/starter-kitStarterKit은 Document, Paragraph, Text, Bold, Italic 등의 기본 Extension을 모두 포함합니다.1-2. 기본 개념1) Editor 인스턴스에디터 상태와 모든 명령(command)을 포함한 핵심 객체리액트에서는 useEditor()로 생성2.. 2025. 6. 26. 파일 네이밍 컨벤션(File Naming Convention) - React Feature Folder 앱 전용 컴포넌트LoginForm.tsx, Dashboard.page.tsxPascalCase재사용 UI 컴포넌트button.tsx, input.tsx소문자 (kebab/camel/pure lowercase)유틸 함수, 상태 관리 등auth.store.ts, format-date.ts소문자 (도구이므로 컴포넌트 아님)React Feature Folder에서의 접미사 네이밍 종류1. 화면/페이지 관련*.page.tsx라우팅 단위 페이지 컴포넌트*.layout.tsx페이지 레이아웃 컴포넌트*.template.tsx여러 페이지에서 공유하는 중간 컴포넌트*.route.tsx라우트 정의 파일 (React Router)2. UI 컴포넌트*.component.tsx단순하고 재사용 가능한 UI 컴포넌트*.present.. 2025. 6. 14. npm React 라이브러리 배포 TypeScript + React 기반 라이브러리 작성tsup으로 .js + .d.ts 빌드npm publish로 외부 배포실제 사용 시:import { MyButton } from 'your-react-lib'1단계: 프로젝트 초기화mkdir your-react-libcd your-react-libbun init선택 시 안내:entry: src/index.tstype: module2단계: React + 개발 환경 설치bun add react react-dombun add -D typescript @types/react @types/react-dom tsupuseState 등이 필요하면 추가3단계: 파일 구조 생성mkdir srctouch src/index.ts src/MyButton.tsx tsconf.. 2025. 6. 13. template 자동화 bun + Vite 환경 빠르고 깔끔한 템플릿 자동 생성 도구bun run create-feature note명령어 실행 시:src/features/note/├── note.service.ts├── note.types.ts├── note.hooks.ts├── note.schema.ts├── note.constants.ts├── note.utils.ts1단계: 템플릿 파일 만들기먼저 템플릿 파일을 아래 경로에 저장:scripts/templates/feature/├── __name__.service.ts├── __name__.types.ts├── __name__.hooks.ts├── __name__.schema.ts├── __name__.constants.ts├── __name__.utils.ts각 파일에는.. 2025. 6. 12. 다국어 라이브러리 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. 이전 1 2 3 4 다음
