JavaScript82 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. 제네릭(Generic) 연습하기: https://typescript-exercises.github.io/ TypeScript ExercisesA set of interactive TypeScript exercisestypescript-exercises.github.ioTypeScript의 제네릭(Generic) 타입1. 제네릭이란?"제네릭(Generic)"은 타입을 함수나 클래스, 인터페이스가 사용할 때, 외부에서 타입을 주입받도록 하는 기능입니다.Java의 제네릭, C++의 템플릿 기능과 유사코드 재사용성과 타입 안정성을 동시에 확보 가능함수/클래스를 작성할 때 구체적인 타입을 지정하지 않고, 나중에 사용할 때 지정할 수 있음2. 기본 문법function identity(value: T): T { return value;}.. 2025. 6. 21. Jsdoc, ts, Typedoc 1단계: JSDoc 기본 이해1. JSDoc이란 무엇인가?정의:JSDoc은 JavaScript/TypeScript 코드에 주석 형태로 문서를 작성할 수 있게 해주는 표준 주석 문법입니다.주요 목적:코드 설명 추가 (함수/변수/클래스/모듈 등)IDE 자동 완성 및 타입 힌트 제공문서 생성 도구 (ex. TypeDoc, JSDoc)에서 HTML API 문서 생성유지보수와 협업에서 커뮤니케이션 비용 절감2. JSDoc 블록 주석 구조형식:주석은 항상 /** */로 감싸며, 각 줄 앞에 *를 붙입니다./** * 사용자 정보를 가져옵니다. * @param userId - 사용자 ID * @returns 사용자 이름 */function getUserName(userId: string): string { retur.. 2025. 6. 21. 파일 네이밍 컨벤션(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. npm 라이브러리 만들고 사용하기 목표CLI로 실행: memo "메모 내용"실행 시, 현재 날짜 기준으로 memos/YYYY-MM-DD.txt 파일에 메모를 추가TypeScript로 작성bin 설정 포함해서 CLI 명령어처럼 실행 가능프로젝트 구조memo-cli/├── package.json├── tsconfig.json├── src/│ └── cli.ts└── memos/ └── (자동 생성됨)1. package.json{ "name": "memo-cli-test", "version": "1.0.0", "type": "module", "bin": { "memo": "./src/cli.ts" }, "scripts": { "dev": "bun src/cli.ts" }, "dependencies": {}, .. 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. 이전 1 2 3 4 5 ··· 10 다음
