React
-
side-project) 미래의 지구그래픽스/WebGL 2022. 10. 22. 14:50
Link https://classy-fudge-f9b073.netlify.app/ 메시지가 있는 컨텐츠를 webgl을 활용하여 만들면 재밌겠다는 생각이 들었습니다. 그래픽스 라이브러리 중 하나인 three.js를 활용한 웹페이지 제작에 대한 아이디어는 이미 공식문서 예제에 수없이 많이 나와있습니다. 그 중 내장된 메서드를 활용하여 바다와 하늘을 구현하면 유사자연(?)을 만들 수 있을 것 같아서 환경을 주제로 한 페이지 제작을 시작하게 되었습니다. 페이지에서 뭐가 꿈틀거리니 생동감도 있고 무엇보다 개발하는 입장에서 상상력을 확장시킬 수 있어서 좋은 것 같습니다. 무엇보다 해당 프로젝트를 진행하면서 그래픽스 기술에 대한 관심이 많이 생겼습니다. 그럴려면 opengl을 배우는 수밖에 없겠구나 싶어서 현재는 c..
-
react-three-fiber) 오브젝트 중복 생성 피하기그래픽스/WebGL 2022. 10. 12. 12:54
WebGL에서는 모델 하나하나가 렌더링 시 자원 소모가 때문에 오브젝트의 중복 생성을 아주 금기시하고 있습니다. props의 상태 변화가 일어날 때마다 계속 렌더링 되는 react에서는 신경 쓸 게 한두가지가 아닌 것 같습니다. 그중에 geometry, material의 중복 생성을 피하는 방법을 공식 문서에서 몇 가지 소개하고 있고 이를 적용한 예시를 보도록 하겠습니다. import React, { useRef, useState } from 'react' import { Canvas, useFrame } from '@react-three/fiber/native' function Box(props) { const mesh = useRef(null) const [hovered, setHover] = use..
-
react three fiber + typescript ) glb 애니메이션 타입 정의 오류그래픽스/WebGL 2022. 10. 11. 22:50
타입스크립트를 쓰다 보면 라이브러리 끌어다 쓸 때 매번 타입 문제가 자주 생기는데 이번에도 역시 피해 갈 수 없었습니다. react-three-fiber에서는 정말 편리하게도 glb 파일을 바로 jsx 컴포넌트로코드로 변환해주는 기능을 공식문서에서도 사용하라고 권장하고 있습니다. (npm으로도 설치 가능) https://gltf.pmnd.rs/ GLTF -> React Three Fiber gltf.pmnd.rs 파일을 업로드하고 우측 탭에서 type 체크해주면 type까지 알아서 정의해주는 아주 쿨한 기능이라 쉽게 쉽게 모델을 불러오고 화면에 띄울 수 있습니다. 그런데 바로 쓰고자 할 때 문제에 봉착하게 됩니다. 자동으로 정의해준 타입이 맞지 않다고 뜨네요. 구글링 해보니 다른 이들도 이미 2년 전부터..
-
징검다리 건너기) 프로젝트 회고그래픽스/WebGL 2022. 10. 10. 01:46
📌 바로가기 링크 https://glass-stepping-stone.netlify.app/ 대략 일주일에 걸쳐 저의 첫 번째 WebGL 토이프로젝트 '징검다리 건너기'를 완성시켰습니다. 완성이라기엔 자잘하게 고치고 싶은 부분이 많지만 일단 생각했던 기능들을 다 구현해보는 게 목표였습니다. 게임으로서의 최소한의 기능만 갖춘 후 수정은 이후 계속 공부한 내용을 바탕으로 천천히 해나가면 되니깐요. Three.js를 배운다면 만들어보고 싶었던 프로젝트 중 하나가 게임이었고 마침 인프런에서 평소 좋아하던 개발자님(1분코딩님 최고👍😎)께서 오픈하신 강의가 있어서 기초를 쌓을겸 찾아 듣게 되었습니다. canvas를 가져와 렌더링하고 scene 세팅하는 것부터 camera, light, mesh 같이 한 화면에 갖춰..
-
react-currency-format 라이브러리 활용하기React 2022. 6. 30. 00:06
카드 결제를 위해 카드 번호를 입력할 때 우리는 빈칸에 그냥 숫자만 입력하는데 위 그림과 같이 자동으로 4글자 단위로 띄어쓰기가 되는 경우가 있습니다. 다른 예로는 쇼핑몰 사이트에서 5000원의 상품을 데이터로 받으면 장바구니에서는 이를 합계에 포함시킬 수도 있고, 또는 5000원이라는 value를 활용하여 다른 형태의 컴포넌트로 나타내고 싶을 수도 있습니다. 이 때 react-currency-format 이라는 라이브러리를 사용하면 구현이 편리합니다. 터미널에 아래 코드를 입력하면 설치할 수 있습니다. (버전 문제로 설치가 안될 경우 npm 강제설치를 하면 된다고 한다.) npm install react-currency-format 설치가 끝나면 작성하고 있는 코드 맨 윗줄에 라이브러리를 import ..
-
Could Not resolve dependency tree 에러React 2022. 6. 29. 10:53
문제의 원인은 React의 버전이 높아서 설치하려는 라이브러리가 따라가지 못하여 발생한 것이다. 에러코드에서 17.0.0으로 안내를 해주고 있기 떄문에 해당 버전에 맞게 다운그레이드 해주면 된다. npm install react@^17.0.1 react-dom@17.0.1 --legacy-peer-deps --lagacy-peear-deps 는 기존 버전을 다 무시하고 일단 설치하는 명령어이다. react와 react-dom은 서로 의존적인 관계라 하나를 낮추게 될 경우 다른 하나랑 안맞아서 설치가 안되기 때문에 반드시 강제로 설치를 해줘야한다. 다운그레이드로 설치를 하고 npm start로 렌더링을 해보면 다음과 같은 오류가 나타난다. Compiled with problems:X ERROR in ./s..
-
리액트 Hooks) useCallbackReact 2022. 6. 17. 15:44
함수 컴포넌트는 함수다. 함수 컴포넌트는 상태변화시 다시 렌더링이 된다. 렌더링시, 함수 내부 변수는 초기화가 된다. 그리고 함수는 객체다. 초기화가 된다는건 새로운 객체가 다시 만들어지고, 메모리 주소도 새로 생성 된다. 대부분의 경우 이러한 방식은 문제없지만, 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분을 최적화해 주는 것이 좋다. 예제 1) import { useEffect, useState } from "react"; function App() { const [number, setNumber] = useState(0); const someFunction = () => { console.log(`someFunc: number: ${number}`); }; u..
-
리액트 Hooks) useRefReact 2022. 6. 17. 14:08
useRef가 유용한 두 가지 상황 1) 저장공간 State가 변하게 되면 렌더링이 되고 컴포넌트 내부 변수들이 초기화가 된다. 하지만 Ref가 변하면 렌더링이 되지 않고 따라서 변수들의 값이 유지된다( 불필요한 렌더링을 막을 수 있음). 또한 State의 변화로 렌더링이 된다 하더라도 Ref의 값은 유지된다. 2) DOM 요소에 접근 ex) Input 을 클릭하지 않아도 focus() 를 주고 싶을 때, 로그인 화면이 주어졌을 때 클릭하지 않아도 자동으로 focus()가 가게끔 할 때 예시 1) 버튼을 누르면 카운트가 증가하고 렌더링이 될 때마다 콘솔을 출력해보자. import { useEffect, useState } from "react"; function App() { const [count, s..