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

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..

이 시리즈는 노마드 코더님의 "초보자를 위한 리덕스 101"을 보고 배운 내용을 정리합니다. 비약이나 틀린 내용이 있다면 언제든 댓글로 알려주세요..! (매우 환영입니다😀) 🎛️ TO-DO Apps 저번이랑 결과물은 같지만 내용은 아예 다르다. 결론적으로 말하면 React에서는 dispatch와 subscribe 함수를 props로 받아와야 한다는 것! TypeScript에서 쓸 생각하니까 벌써 막막하다🤣 👜 store.js 따로 만들어주기. React에서 ReactDOM으로 렌더링해주는 과정에서 최상단에서 store를 뿌려줘야한다. 결론적으로 파일을 따로 만들어줘야한단 소리! store.js import { legacy_createStore } from "redux"; const ADD = 0; con..

예전 프로젝트에서 이거 때문에 삽질 좀 했던 것 같은데 또 까먹었다. 별거 없기 때문에 쓸 것도 없다. Check 1. 부모 요소에서 overflow 설정 부모 컴포넌트에서 overflow가 hidden; auto; scroll;이 아닌지 확인해준다. sticky는 뷰포트가 아니라 부모 컨테이너에 영향을 받는다고 한다. Check 2. 부모 요소의 크기를 설정해줬는가? 크기를 적절하게 설정해줘야 한다. 부모의 위치에 대해서 붙기 때문에, 개발자 도구에서 크기를 가지도록 설정해주면 된다. Check 3. [가장 중요⭐] align-self: start 해주기! align-self는 flex 내부 요소의 정렬을 스스로 설정할 수 있도록 지원해준다. start로 넣어주면 flex container 앞쪽으로 정..

1. 스플래시를 한 번만 나오게 할 순 없을까? 란 생각 문득 문서를 만들다가 이런 생각이 들었다. (이 내용은 어쩌면 개발보다는 약간 기획에 더 가까울 지도 모르겠다.) 나는 메인 화면인 "/" 경로에서 스플래시를 무조건 한 번 돌리고, 그 다음에 안에 문서를 네비게이션을 클릭해서 들어가게 설계했다. 그리고 이 서비스의 가장 main contents인 메타마스크와 nft 민팅에 관한 정보를 담은 아티클을 볼 수 있다. 누군가 이걸 보고 세상 비효율적인 구조라고 피드백을 할 수 있겠지만, 애초에 그게 여기의 그라운드 룰이니.. 아무튼 웬만한 건 다 참을 수 있겠는데 이건 못참겠다. 사실 저 스플래시는 사이트에 처음들어올 때, "어떤 콘텐츠가 있을지에 대해 기대감을 주는 장치"이다. 그렇기 때문에 이미 메..