if(life){code();}

Edit Mode (편집 모드) 구현 Obejct 회전 기능localStorage 저장 기능  회전 기능 추가Overlay.jsx : 회전 아이콘 추가, Edit Mode일 때 동물을 회전할 수 있도록 함EditContext.jsx : rotate 함수를 만들어 선택딘 동물의 방향을 변경할 수 있도록 구현 Overlay.jsxexport const Overlay = () => { const { isEditMode, setEditMode, selectedId, setSelectedId, rotate } = useContext(EditContext); return ( {isEditMode && selectedId ? ( rotate("left")} /..

Edit Mode (편집 모드) 구현 객체 추가 및 이동 기능 구현 (객체 리스트 동적 관리/ 동물 및 공룡을 사용자가 마우스로 선택, 원하는 위치에 배치할 수 있는 기능 구현)오브젝트 컴포넌트에 물리엔진 적용gridHelper 추가하여 편집 모드 시각화 개선UI 크기 조정 상태관리에 데이터 추가Environment 컴포넌트에서 기존에 하드코딩된 동물 제거EditContext.jsx 파일에 데이터를 관리할 objects state생성 후 데이터를 objects state의 초기값으로 넣어줌데이터 구성crypto 객체를 통해 생성된 고유한 uuid동물인지 공룡인지 나타내는 typepositionrotation data 코드조각const data = [ { id: crypto.randomUUID(),..

Edit Mode (편집 모드) 구현 1. GUI 추가 : 사용자가 모드를 변경할 수 있도록 Canvas 위에 버튼 추가2. 상태 관리 :  EditMode를 관리하는 상태 관리 시스템 구축 (React Context API 활용)  상태 관리 (EditContext) 설정 context 폴더를 만들고 EditContext.jsx 파일 추가 EditContext.jsximport { createContext, useState } from "react";export const EditContext = createContext(); // createContext 함수를 사용, EditContext 생성export const EditProvider = ({ children }) => { const [isEd..

물리엔진 현실 세계의 물리 법칙들을 3D 공간에서 실현해 주는 엔진→ React Three Fiber(R3F)에서 Rapier라는 물리엔진을 사용할 수 있게 해주는 React3 Rapier 라이브러리 사용  @react-three/rapier 패키지 설치npm install @react-three/rapier  기본적인 물리 설정Suspense비동기로 로딩되는 컴포넌트들이 모두 로딩될 때까지 기다렸다가 렌더링Physics물리 법칙이 적용되는 공간을 정의RigidBody실제로 물체가 물리적으로 상호작용하도록 설정import { Suspense } from "react";import { Physics, RigidBody } from "@react-three/rapier";   ..

Animal.jsx (동물 오브젝트)import { useAnimations, useGLTF } from "@react-three/drei";import { SkeletonUtils } from "three-stdlib";import { useMemo, useEffect, useRef } from "react";export const Animal = ({ name, ...props }) => { const group = useRef(); const { scene, animations } = useGLTF(`/models/animals/${name}.glb`); const clone = useMemo(() => SkeletonUtils.clone(scene), [scene]); con..

3D 오브젝트로 동물원 구성  프로젝트 준비 모델 다운로드 및 폴더 정리프로젝트의 public/models 경로에 3D Object asset을 넣어줌 사용할 3D 오브젝트 카테고리animals (동물 모델)dinos (공룡 모델)map (환경 모델)프로젝트 구조 정리scr폴더에서 불필요한 asset폴더 삭제components 폴더 생성, 환경을 담당할 Environments.jsx 파일 생성 Environments.jsx 초기 코드import { OrbitControls } from "@react-three/drei";export const Environments = () => { return ( );};  3D 모델 불러오기 Animal..

useContext React의 Context API를 활용해 컴포넌트 트리 전체에서 데이터를 전달하는 방식→ props 없이도 전역적으로 상태를 공유할 수 있음→ 부모 컴포넌트에서 Context의 Provider를 설정하면, 해당 Provider 하위의 모든 컴포넌트에서 데이터 공유 가능 ※ 전역 상태 관리와는 다름Context Provider 내부의 컴포넌트에서만 상태 공유 가능  Context API 활용 예다크 모드 / 라이트 모드 테마 설정로그인 상태 관리 (Auth Context)언어 설정 (i18n, 다국어 지원) useContext 사용법 createContext로 컨텍스트 생성Context.Provider에서 value로 상태, 함수 전달useContext(Context)로 데이터 접근 ..

useEffect & useRef useEffect 컴포넌트에서 부수 효과(Side Effects)를 처리할 때 사용되는 Hook Side Effects 관리API 호출, 타이머 설정, 구독(subscription)등의 작업을 처리할 때 사용React의 렌더링 흐름과 독립적으로 실행됨컴포넌트 생명주기 관리(라이프사이클 제어 가능)클래스형 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount를 대체특정 시점(마운트, 업데이트, 언마운트)에서 실행되는 코드를 넣을 수 있음의존성 배열을 활용한 조건부 실행특정 상태 값이 변경될 때만 실행되도록 제어 가능 useEffect 기본 문법useEffect(() => { console.log("컴포넌트가..

전통적인 웹 개발 (HTML, CSS, JavaScript + jQuery) 기존의 웹 개발 방식→ HTML, CSS, JavaScript를 직접 사용해서 웹사이트를 제작특히 jQuery 같은 라이브러리를 사용해서 DOM을 조작하는 방식이 일반적 HTML, CSS, JS가 분리된 상태로 개발됨DOM을 직접 조작페이지 새로고침이 많음 (서버 렌더링 중심)복잡한 UI에서는 유지보수가 어려움재사용성 부족함 동작 원리서버 → 클라이언트(브라우저)로 HTML 파일 전송브라우저 :  HTML을 렌더링하고, CSS를 적용JavaScript가 실행되면서 동적인 UI 추가 (이벤트 리스너, 애니메이션 등)특정 이벤트 발생 시 document.querySelector() 같은 방법으로 DOM을 직접 수정새로운 데이터를 불..

Component 리액트(React)에서 UI를 구성하는 기본 단위→ 레고 블록처럼, 여러 개의 작은 컴포넌트를 조합하여 복잡한 UI를 만들 수 있음→ 컴포넌트는 재사용 가능해야 함 (한 번 만든 컴포넌트는 다양한 곳에서 반복적으로 사용할 수 있어야 함) 재사용성 : 동일한 UI 요소를 여러 곳에서 사용할 수 있어 코드 중복을 줄임유지보수 용이 : 코드가 잘 조직되어 있어 변경 및 수정 용이가독성 증가 : 역할별로 컴포너트를 분리하면 전체 코드의 가독성이 높아짐  컴포넌트의 유형 함수형 컴포넌트 (Functional Component)ES6 함수 형태로 작성되며, 간결하고 가독성이 좋음React Hooks(useState, useEffect 등)를 사용하여 상태 및 생명주기 기능을 관리 가능최근 리액트 ..