SG의 개발 공부로그

useStats useStats는 기능적 구성 요소에 상태를 추가할 수 있는 React의 훅입니다. 상태는 구성 요소 내에서 변경될 수 있는 데이터를 저장하는 방법이며, React에서 동적 및 반응형 사용자 인터페이스를 구축하는데 중요한 측면입니다. hook 이전에는 상태관리가 클래스 구성요소로 제한되었습니다. hook의 도입으로 기능적 구성 요소에 대한 상태 관리도 가능해지면서 더욱 다양하고 강력해졌습니다. 다음은 useState 훅을 사용하는 방법의 예를 보겠습니다. import React, { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( You clicked {count} ti..

React를 중점으로 둘 거지만 React 대안으로는 무엇이 있는지 알아볼 거다 React는 React는 간결하고 집중된, 컴포넌트 기반 UI라이브러리이다. 컴포넌트에 중점을 두고 있기 때문에 그 외에 내장된 기능은 많지가 않다. Routing이라는 기능을 쓰고 싶으면 외부패키지를 가져와야 한다. 리엑트자체는 화면에 어떤 요소를 보여주고 업데이트하는데 중점을 두고 있다. 사용자 지정 HTML elemnet를 만들 수 있게 해 준다. 이런 컴포넌트들 중점이 리엑트의 관심사이다. Angular는 더 다양한 내장 기능을 가진 리엑트의 대체로 Angular (앵귤러)가 있다. Angular 역시 인기 있는 프런트엔드 프레임워크이다. 리엑트처럼 컴포넌트 중점 기반 UI 프레임워크이다. 하지만 리엑트보다 더 내장된..

React는 무엇인가? 리엑트는 자바스크립트 라이브러리이다. 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리 정의는 간단하다. 사용자 인터페이스 구축을 도와주는 자바스크립트 프로그랭밍 언어의 라이브러리이다. 정확히 말하면, 클라이언트 측 라이브러리. 즉, 방문자의 브라우저에서 실행되는 자바스크립트코드이다. 웹페이지에서 로딩이 된 후에 화면을 변경하려면 브라우저상에 자바스크립트를 사용해야 하기 때문에 다채롭고 상호작용이 뛰어난 사용자 인터페이스를 구현할 수 있다. 동작들이 아주 매끄럽고 빠르게 진행되는 것처럼 느껴진다. 새 HTML페이지를 요청하지 않았고, 서버로부터 생성되기를 기다릴 필요도 없다. 자바스크립트가 내부적으로 작업을 수행하면서 화면을 업데이트하기 때문에 가능한 일이다. 그래서 UI 도 ..

일단 먼저 Three.js 에서 추가하는 방법을 보자 Three.js 에서의 Mesh 추가 const geometry = new BoxGeometry(2, 2, 2); const material = new MeshStandardMaterial() const cube = new Mesh(geometry, material) scene.add(cube) BoxGeometry , MeshStandardMaterial 도 변수에 담아서 Mesh( geometry(기하학), material(재질) ) 을 넣으면서 인스턴스화한다. 그리고 scene 에 추가한다. React Three Fiber 에서의 Mesh 추가 import { Canvas } from "@react-three/fiber"; export defau..