전체 글459 motion(framer-motion) framer-motion은 React 기반 UI에 자연스럽고 강력한 애니메이션을 손쉽게 추가할 수 있게 해주는 모션 라이브러리입니다. 특히 상태 기반 인터랙션과 레이아웃 전환에 최적화되어 있어, 실제 서비스에 적합한 고퀄리티 애니메이션을 빠르게 구현할 수 있습니다. Motion - Web animations for JavaScript, React and VueAnimations made simple. The fast and light animation library for JS, React and Vue. Motion uses browser APIs like WAAPI and ScrollTimeline for a tiny filesize and superfast performance. Previously.. 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. maath maath 라이브러리 심층 분석: React Three Fiber를 위한 고급 3D 수학 및 애니메이션 실용 가이드서론: maath의 역할과 가치 정의JavaScript 수학 라이브러리 생태계는 광범위하며, 다양한 목적에 맞는 도구들로 구성되어 있습니다. math.js와 같은 라이브러리는 기호 연산을 포함한 포괄적인 수학 기능을 제공하며 1, JavaScript에 내장된 Math 객체는 기본적인 수학 연산을 위한 정적 메서드들을 제공합니다.3 그러나 3D 그래픽, 특히 Three.js 및 React Three Fiber (R3F) 환경에서 개발할 때 필요한 특정 요구사항들은 이러한 범용 라이브러리만으로는 충족되기 어렵습니다.이 보고서에서 심층적으로 다룰 maath 라이브러리는 바로 이 지점에서 그 가치를.. 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-three/drei 1단계: 기초 유틸리티 익히기 (씬 구성 편의성)🎯 목표기본적인 씬을 구성할 수 있는 drei 유틸리티를 익혀서OrbitControls, 카메라 설정, 배경, 로딩, 카메라 프레이밍 등을 손쉽게 구현하는 것이 목표입니다.① OrbitControls – 마우스로 카메라 회전, 줌, 이동 제어개념:OrbitControls는 사용자의 마우스 입력에 따라 카메라를 움직이도록 만들어줍니다.실습 목표:캔버스를 마우스로 드래그하면 회전휠로 확대/축소 가능import { OrbitControls } from '@react-three/drei'; {/* ... */} ② PerspectiveCamera, OrthographicCamera – 카메라 설정개념:PerspectiveCamera: 일반 3D 카메라 (멀리.. 2025. 6. 9. WXT 기반 (React) 확장 프로그램 개발 https://wxt.dev/ Next-gen Web Extension Framework – WXTWXT provides the best developer experience, making it quick, easy, and fun to develop web extensions. With built-in utilities for building, zipping, and publishing your extension, it's easy to get started.wxt.dev1단계: 브라우저 확장 개발 기본 이해1. 브라우저 확장이란?브라우저 확장(Extension)은 크롬, 엣지, 파이어폭스 같은 웹 브라우저의 기능을 확장하거나 사용자 경험을 향상시키기 위해 작성된 작은 웹앱입니다.특징:HTML/CSS/.. 2025. 6. 2. Getter/Setter 사용 기준 1. Getter 허용 기준 (상대적으로 자유로움)● 허용: 조회 목적의 필드조회용으로 필드 값을 외부에 제공할 필요가 있을 때 허용됩니다.public String getEmail() { return email;}● 제한 또는 금지:민감 정보 (password, token, salt, secretKey, 등)내부적으로만 사용하는 정보 (internalFlag, deleted, 등)// ❌ 이렇게 민감한 값은 외부 노출 Xpublic String getPassword() { return password;}권장:필요한 필드만 Getter 생성 (@Getter 대신 개별 작성)Lombok @Getter는 DTO나 읽기 전용 뷰 모델에만 사용2. Setter 허용 기준 (매우 신중)● 기본 원칙: 엔.. 2025. 5. 31. React Three Rapier React Three Rapier @react-three/rapier@react-three/rapier 📣 @react-three/rapier v2 has been released, which adds support for @react-three/fiber v9 and react v19. If you are using react v18, you will need to use @react-three/rapier v1 and @react-three/fiber v8. For contributions, please readpmndrs.github.io1단계. 기초 이해: Rapier란 무엇인가1.1 Rapier의 개념Rapier는 Rust로 개발된 고성능 물리엔진입니다.**WASM(WebAssembly)**으.. 2025. 5. 27. Blender 관련 사이트 Poly Haven은 고품질의 3D 에셋을 무료로 제공 Poly Haven • Poly HavenThe Public 3D Asset Librarypolyhaven.com 2025. 5. 27. 무료로 R3F 아바타 생성하기 ReadyPlayerMe에서 캐릭터를 생성할 수 있다. Integrate an avatar creator into your game in days - Ready Player MeThousands of companies use Ready Player Me developer tools to give their users high-quality personalized avatars that increase retention and engagement.readyplayer.meDeveloper 클릭해서 회원 가입React 선택 후 0000000.readyplayer.me -> 클릭캐릭터 생성 후 next 누르면 다운로드 할 수 있다. Mixamo www.mixamo.comMixamo에서는 생성된 캐릭터가 움직일.. 2025. 5. 26. Blender 단축키 General (공통 기능 – 대부분 창에서 사용 가능)Toolbar (툴바 열기/닫기): TProperties (속성 패널 열기/닫기): NAdd Object/Node (오브젝트 또는 노드 추가 메뉴 열기): Shift + ADelete (선택 항목 삭제): X 또는 DeleteSearch (기능 검색창 열기): F3Move (오브젝트 이동): GScale (크기 조절): SRotate (회전): RRotate along axis (축 방향으로 회전): R 후 X, Y, ZRotate along local axis (로컬 축 기준 회전): R 후 X,X / Y,Y / Z,ZTrackball Rotate (트랙볼 자유 회전): R, RPrecise movement (정밀 이동): Shift 누른 채 이동.. 2025. 5. 26. WebGL WebGL 공식문서 요소에서 사용할 수 있는, OpenGL ES 2.0을 " data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla.org/ko/docs/Web/API/WebGL_API" data-og-url="https://developer.mozilla.org/ko/docs/Web/API/WebGL_API" data-og-image="https://blog.kakaocdn.net/dna/e9RY1/hyYWWSodtf/AAAAAAAAAAAAAAAAAAAAALEx61p-OI8vW5TSnM62_5ZpyME7SIviIDeRed5ud1s1/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1780239599&allow_ip=&allow_referer=&signature=DxmIufiQ6Bh5QzC4B4qYoKwHnoM%3D WebGL - Web API | MDNWebGL(Web Gra.. 2025. 5. 26. 이전 1 ··· 19 20 21 22 23 24 25 ··· 39 다음
