React Three Fiber 프로젝트 시작
D+39
Three.js얘기를 시작하다 보니 React Three Fiber로 오게 되었다. 간략한 소개와 함께 무엇을 이루고자 하는지 독자들에게 공유하고, 내가 머리가 깨져가며 무언갈 만들어 나가는 과정을 공유하고자 한다.
React Three Fiber === R3F
React Three Fiber라는 말에서도 알 수 있듯, Three.js의 React버전이다. 논문처럼 이야기를 전개하려면 왜 React를 써야 하는지 그리고 왜 Three.js가 아닌 React Three Fiber를 써야 하는지 설명하는 게 옳은 설명이다.
나의 짧은 프런트앤드 지식을 섞어보면 이렇다. React는 웹의 DOM의 변경을 최소화할 수 있다고 얘기한다. 그리고 DOM을 빠르게 업데이트할 수 있다는 장점이 있다. 여기서 DOM이 무엇인지는 나도 모르니 일단 다음에 알아보도록 하자. 코드를 쓰며 느낀 것은 웹을 표현하는 최소 단위들을 뜻하는 것으로 보인다. 그리고 코드를 굉장히 빠르게 구성할 수 있다. 나는 예전에 jsp 이런 걸 썼는데, 그때는 상당히 고통스러웠다. 자바랑 jsp를 왔다 갔다 하며 정신없었다. 그러나 react에서는 iterator기능 등이 굉장히 좋았다.
그런 React의 장점에 동의한다면, 어떤 라이브러리를 React에서 쓰는 방법에 대해서 논해야 한다. 대부분 일반 라이브러리들을 보면 react용으로 다시 구성하는 것을 볼 수 있다. 여기까지 아직 나의 지식은 부족하나, 너무나 뻔하게도 react에서 잘 쓸 수 있도록 변환하는 과정을 거치는 것으로 보인다. wrapper라는 말들도 많이 쓴다. 이렇게 한 덕분에 사용자는 몇 줄의 코드를 쓰지 않아도 매우 빠르게 결과물을 만들어 낼 수 있다.
물론 라이브러리(프레임워크가 맞는지도)를 쓰는 단점도 존재한다. 그들이 주어지는 기능 안에서는 굉장히 쉽게 쓸 수 있지만, 내 입맛에 맞게 바꾸기엔 Vanilla Javascript보다 훨씬 어려울 수 있다. 결국 하나의 라이브러리를 제대로 알아야 하기 때문이다. 뭐 그래도 괜찮다. 하나의 라이브러리를 제대로 알게 되면 다른 라이브러리를 다루는 것은 큰 문제가 안되니까.
R3F로 가능한 예제 찾아보기
각 라이브러리는 본인들을 홍보하기 위해 예제 페이지를 만들어 놓는다. R3F경우엔 화려한 예제로 눈을 이끈다. https://docs.pmnd.rs/react-three-fiber/getting-started/examples 이 링크를 통해 어떤 것들이 가능한지 확인할 수 있다.
내가 시작 포인트로 삼을 예제
나는 사진을 가지고 우선 무언가를 해보려 한다. 회사에선 어떻게 뚝딱뚝딱 만들었는데, 집에서 하려니 꽤나 난항이다. 아무튼 예제는 여기에 있다. https://codesandbox.io/p/sandbox/infinite-scroll-x8 gvs? file=%2 Fsrc%2 FApp.js
죽이 되든 밥이 되든 해본다
어쨌든 나는 독자들이 내게 원하는 것은 Three.js를 통해 무언갈 만드는 것이라고 느꼈다. 두괄식으로 얘기했어야 했는데 끝에 의도를 적게 된다. 우선 토이 프로젝트를 진행한 후, 첫 임무는 opensource AutoCAD를 만드는 일을 한번 해보려 한다. 원대한 꿈. 그러나 배워야 하는 수많은 내용들. 그렇지만 죽을동말동 하면 될 거 같은 이 느낌. 한번 해보도록 한다
