발단 요즘 과제 테스트를 몇 번 해보다보니 함수형 프로그래밍을 통해 추상화하여 구현하는 예제들을 요구한다. 처음엔 막막했지만 쓰다보니 꽤 익숙한 부분들도 있어서 몇 번 풀어보면 금방 감이 올 것 같다. 명령형 vs 함수형 이 비슷한 듯 다른 두 가지 방식의 차이는 재사용성에 있다고 본다. React에서 컴포넌트를 재사용할 수 있는 로직이 함수형이라고 말한다. 예를 들면, 아래처럼 id="app"인 어떤 dom 아래에 카드 레이아웃을 만들어주는 코드를 짜보자. // 명령형 방식으로 구현. const app = document.getElementById("app"); const card = document.createElement("div"); card.classList.add("cardcontainer")..

React가 아닌 vanilaJS를 다룰 때 scss를 사용하고 싶은데 WebStorm에서는 검사기에 따로 설정을 해줘야한다. 0. NodeJS 설치 https://nodejs.org/en/download/ Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 당연하지만 노드는 다운 받아야한다. 1. sass 설치 npm i -g sass 번들러가 따로 있다면 글로벌로 설치하지 않아도 좋다. windows에서는 node-sass를 사용하지 않고 sass를 사용함에 조심해야한다! 2. File Inspector 설정 내 WebStorm은 설치부터 한글이 기본이라서 '파일 감시기..

🔦raycaster의 역할과 배경 three.js를 사용하다보면 각 Mesh에 메타데이터를 넣어주고 싶은 일들이 생긴다. (누르면 관련 웹페이지로 넘기던가, 아니면 내부 로직을 위해 id 같은 key값을 리턴해주던가...) 이런 처리를 raycaster 에서 해주는데 적용하고 나면 onClickEvent나 onMouseOverEvent를 구현할 수 있다. raycaster는 뜻 그대로 광선이라고 생각하면 된다. 마우스가 있는 값 기준으로 광선을 쭉 쐈을 때, 그 광선을 맞은 Mesh에 대한 정보를 얻어낼 수 있다. 예를 들면 이런 식으로 구현이 가능하다. 구현을 위해선 몇 가지의 트릭(?)이 존재하는데 주로 사용자 인터렉션 관련된 내용이다. 구현 목표는 다음과 같다. 1. raycaster 생성 in R..

클라이언트에선 다 그렇지만, 언제나 리소스를 가져오는데에 딜레이는 생기기 마련이다. Three.js에서는 이런 체감이 훨씬 더 심한데, 3D 모델링을 기반으로 하거나, 엄청나게 큰 (화질도 크기도) 사진을 종종 import 해와서 Scene에 넣는 경우가 많기 때문에 그렇다. 내 포트폴리오 프로젝트가 절반정도 완료되었는데, import 해와야하는 리소스가 무려 36개다. 네트워크 탭에서 확인해보면 캐시된 메모리들도 있고 해서 로컬에서 실행시키면 거진 바로 켜지는 느낌이 들곤 한다. 시간 탭을 보면 거의 1000ms 안쪽으로 전부 리소스가 받아진다. 리소스를 THREE.TextureLoader에서 받아오니까 결론적으로 모든 렌더링까지 1초정도가 걸리는 셈! 반면 이건 gh-pages 라이브러리로 깃허브 페..

React에서 종종 있는 일일 수도 있고, 누군가는 당연히 알고 있을 수도 있지만.. assets에 있는 static 이미지를 한 10개 가져와야한다고 하면, 어떻게 가져올 것인가? import IMAGE1 from "@asssets/image1"; import IMAGE1 from "@asssets/image1"; import IMAGE1 from "@asssets/image1"; import IMAGE1 from "@asssets/image1"; import IMAGE1 from "@asssets/image1"; import IMAGE1 from "@asssets/image1"; import IMAGE1 from "@asssets/image1"; ... 설마 이렇게..? (사실 내 첫 리액트 프로젝트..

사건의 발단은 이렇다. Three.js를 React에서 다루면서 페인팅이 두 번 되는 느낌이 들었다. (개인 플젝 뿐만 아니라 처음 배우면서 썼던 Next.js에서도 두 번 그려졌다.) useEffect에서 렌더링이랑 카메라랑 오브젝트랑 모든 걸 다루기 때문에 repainting이 되는 순간 조명도 두 배! 오브젝트도 두 배! 가 되버린다. 사실 분명 예전에도 여러 번 타는 걸 본 적이 있는데 별 생각이 없었어서 냅뒀었다. 의존성 문제인가 하고 사이드 이펙트를 다 뒤졌는데 결론은 바로 제목에 써놓은 것처럼 React.StrcitMode가 문제였다. 보통 CRA로 만들어지는 프로젝트는 기본적으로 StrictMode로 나오게되니.. 뭔가 불안하지만 일단 Index.tsx에 있는 React.StrictMode..