Library

이전 게시글에서 3D 공간인 Scene을 만들었다. 이제 해당 공간에 박스를 생성해보자. 우선 3D 객체의 구성을 알아보자.3D 객체는 다음과 같이 이루어져있다. 이하, 3D 객체를 모델로 표현하겠다. 🍕 Model∙ 📦 MeshMesh란, 객체를 생성하기 위해서 여러 폴리곤(다각형)의 집합을 이루고 있다.점들이 무수히 모여 선이 되고, 그 선이 모여 폴리곤을 이루고, 해당 폴리곤들이 모여 Mesh라는 객체를 이룬다. ∙ 🌏 Geometry공간의 속성과 관련한 수학 값들이다. ∙ 👕 Material해당 물질을 이루는 재료를 나타낸다.   이 세 가지가 있으면 모델을 표현할 수 있다.  그럼 이제 모델을 만들어보자. 📦 Box박스를 불러오기 위해 📄 BoxLoader.tsx를 생성해주었다. 나는..

작성자가 자바스크립트를 써와서 타입스크립트에 대해 미숙하여 타입스크립트에 미흡한 부분이 포함되어 있습니다. 📄 fiber / drei리액트에서 three.js를 좀 더 편하게 사용하기 위해 사용하는 라이브러리 입니다. 작성자는 이 두개를 사용하여 게시글을 작성해보겠습니다. 🙂 https://docs.pmnd.rs/react-three-fiber/getting-started/introduction React Three Fiber DocumentationReact-three-fiber is a React renderer for three.jsdocs.pmnd.rs https://github.com/pmndrs/drei GitHub - pmndrs/drei: 🥉 useful helpers for reac..

참고 사이트∙ seongminn님의 벨로그  현재 작성자는 그래픽 기반의 솔루션 회사에 재직중입니다.threejs에 대해 공부중이라 완벽한 내용은 아니게 될지는 모르겠으나, 잘못된 내용이 기재되어 있을 경우 따끔한 피드백 주시면 겸허히 받아들이고 수정하겠습니다. 📦 three.jsthree.js란, 웹페이지에 3D 객체를 쉽게 렌더링 할 수 있도록 도와주는 3D 라이브러리이다.WebGL 기술을 기반으로 렌더링과 카메라, 조명 등의 3D 프로그래밍 기술을 간단하게 사용할 수 있도록 한다. https://threejs.org/ Three.js – JavaScript 3D Library threejs.org 🖋️ WebGL인터넷 브라우저 환경에서 OpenGL을 플러그인 도움 없이 공식적으로 사용할 수 있도..

참고사이트 • 리액트 공식 문서 - Custom Hook ⚙️ Custom Hook 앞서 게시글에서 다양한 Hook을 사용해왔다. React에는 useState, useContext, useEffect와 같은 여러 내장 Hook이 함께 제공된다. 데이터를 가져오거나, 사용자가 온라인 상태인지 추적하거나 채팅방에 연결하는 등 좀 더 구체적인 목적을 위해 Hook이 있었으면 하는 경우가 있다. React에서 이러한 Hook을 모두 지원할 수 없다. 그래서 어플리케이션 요구사항에 맞게 직접 자신만의 Hook을 만들 수 있다. 🧐 왜 사용할까? 재사용성이 높아 코드가 간결해진다. 내장 Hook을 사용할 수 있다. 독립적으로 동작한다. 📡 구성요소 간 논리 공유 네트워크에 크게 의존하는 앱이 있다고 상상해보자. ..

참고사이트 • 리액트 공식 문서 - useContext 🌐 useContext useContext는 컴포넌트의 Context를 읽고 구독하게 해주는 리액트 Hook이다. 리액트에서 데이터값을 하위 컴포넌트로 전달하기 위해 컴포넌트 호출 시, 데이터 prop을 담고, 해당 props를 이용하여 데이터를 사용한다. useContext는 해당 과정에 상관없이 useContext로 감싼 컴포넌트들을 해당 데이터를 접근할 수 있도록 도와준다. 비슷한 기능의 외부 라이브러리로는 recoil이 있다. 📦 Parameter useContext 컨텍스트를 읽고 구독하려면 컴포넌트 최상위에서 호출해야한다. const value = useContext(SomeContext); • SomeContext: 해당 컨텍스트는 cr..

참고 사이트 • 리액트 공식 문서 - useCallback • 별코딩님의 youtube - useCallback 강의 🪣 useCallback useCallback은 재렌더링 사이에 함수 정의를 캐시할 수 있는 React Hook이다. 📢 참조 useCallback 재렌더링 사이에 함수 정의를 캐시하려면 구성 요소의 최상위 수준에서 호출하면 된다. const cachedFn = useCallback(fn, [dependencies]); 📦 Parameters • fn: 캐시하려는 함수이다. 모든 인수를 취하고 모든 값을 반환할 수 있다. React는 초기 렌더링 중에 함수를 다시 반환한다(호출X). 다음 렌더링에서 dependencies가 변경되지 않은 경우 동일한 기능을 다시 제공하며, 그렇지 않다면 ..

참고 사이트 • 리액트 공식 문서 - useMemo 📝 useMemo useMemo는 재렌더링 간 계산 결과를 *캐시(Cache)할 수 있는 React Hook이다. 비용이 많이 드는 재계산을 건너뛰기 위하여 사용한다. *캐시(Cache): 컴퓨터 과학에서 데이터나 값을 미리 복사해 놓는 임시 장소로 데이터 접근하는 시간이 오래걸리거나 다시 계산하는 시간을 절약하고 싶은 경우에 사용 출처: Wikipedia 반환값을 캐싱하는 것을 메모이제이션(memoization)이라고도 하며, 이것이 이 Hook이 불리는 이유이다. 📢 참조 useMemo 재렌더링 간의 계산을 캐시하려면 구성 요소의 최상위 수준에서 호출한다. const cachedValue = useMemo(calculateValue, [depende..

참고사이트 • React 공식 문서 - useRef 🪣 useRef 렌더링이 필요하지 않은 값을 참조할 수 있는 React Hook이다. useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지된다. 📦 Parameter • initialValue: 초기에 저장되는 값을 넣으며, 모든 유형의 값이(lite, DOM...)이 될 수 있다. 이 인수는 초기 렌더링 후에 무시된다. 🎁 Return useRef는 단일 속성을 가진 객체를 반환한다. {current: value} • current: initialValue값이 들어가 있으며 null을 사용해도 된다. 향후 다른 것으로 설정할 수 ..