1단계 Boiler-plate 다운로드
마음만은 항상 시니어 개발자입니다. 그러나 나의 현재 실력은 그렇지 못합니다. 그런 경우에는 일단 가져다 쓰도록 합니다. 영어로는 이렇게 최소한으로 구현되어 있는 것을 Boiler-plate라고 표현합니다. 수많은 개발자들이 Boiler-plate를 각자의 스타일대로 만들었다는 게 때로는 단점이기도 하지만 일단은 넘어가도록 합시다.
https://electron-vite.org/guide/
Getting Started | electron-vite
electron-vite.org
위 페이지로 가서 중간에 Scaffolding Your First electron-vite Project 부분에 가면, npm, yarn, pnpm으로 해당 boiler-plate를 다운로드 받는 방법에 대해 나와있습니다. 저는 yarn을 기준으로 작성했으니, yarn으로 해보겠습니다. 참고로 해당 프로젝트는 vite 기반 electron입니다. vite가 뭔지는 나중에 좀 더 찾아보도록 하겠습니다. 간편한 이해로는 노드가 관리해 주는 패키지들을 좀 더 빠르게 처리할 수 있는 프레임워크로 알고 있습니다.
yarn create @quick-start/electron
그러면 아래와 같이 설정 이 나옵니다. 저는 일단 호기롭게 TypeScript등등을 적용하기로 했습니다. 어렴풋한 기억에 typescript로 하면 꽤나 프로젝트가 빡빡해지긴 하는데, 일단 해보도록 합니다.
위 다운로드 과정을 거친 후 "yarn"을 입력하면 패키지가 설치가 됩니다. 패키지를 설치한 후 첫 화면을 띄워보고 싶다면 "yarn dev"를 치면 됩니다. 관련한 명령어에 대해서는 package.json이나 vite-electron 가이드 페이지를 참조하시면 되겠습니다.
저는 예전에 프로젝트를 할때 윈도우에서 진행했습니다. 지금은 맥에서 진행하고 있습니다. 그리고 분명 두 OS에서 설치파일 형태로 결과물을 만들어 낼 수 있습니다.
React탬플릿을 사용했으니 일단 react는 된다 치고 넘어가면 됩니다. 그럼 여기에 threejs를 더해봅시다.
https://r3f.docs.pmnd.rs/getting-started/introduction
위 페이지에서 요구하는 패키지를 설치하도록 팝시다. Yarn에서는 add커맨드를 써서 할 수 있습니다. 해당 패키지를 입력하면 이제 r3f를 사용할 준비가 되었습니다. 리엑트의 꽃은 두 가지로 하나는 state관리고 다른 하나는 컴포넌트 관리입니다. 사실 잘못 쓰면 상당한 어려움을 겪게 되지만 일단 패스합니다.
yarn add three @types/three @react-three/fiber
엔트리 컴포넌트 수정하기
아무튼 사짜가 무언가를 설명하면 용어도 제멋대로 입니다. 핵심 개념은 화면에 보여줘야 하는 모든 요소를 불러오는 가장 상위의 물건이 있습니다. 저는 여기서 엔트리 컴포넌트라고 하겠습니다. 실제로 엔트리 포인트라는 말이 쓰이긴 하던데 아마 그것과는 약간 다를 겁니다. 위에서 쓰인 Boiler plate기준으로 엔트리 컴포넌트는 다음과 같습니다.
위 App.tsx에 다양한 내용이 들어있습니다. 하지만 저는 R3F 내용으로 바꿧습니다.
위와 같이 바꿨고, 코드를 대략 보시면 알겠지만 "./components/R3F"안에 ThreeScene이 존재합니다.
해당 코드는 위와 같습니다. r3f 공식 사이트에 있는 내용을 그대로 가져온거라 그냥 복붙 하셔도 됩니다. 이 과정을 거치면
위와 같은 그림을 얻을 수 있습니다. 화면에 비해 상자가 아주 작다는 단점은 존재하지만 기본적인 기능은 하는 것을 확인할 수 있습니다. 이제 하고 싶은 꿈을 펼쳐보면 됩니다.
오늘까지 한 내용은 아래 commit에서 확인할 수 있습니다.
https://github.com/Chaeguevara/playGround/commit/e2c6672614ad0d4c727907d680a04602aa7fb04a