👆기술 스택 선택 이유

프론트엔드

Untitled

저희 프로젝트의 특성상 백엔드에서 처리한 맵 데이터를 프론트엔드에서 3D 오브젝트들로 매핑해야 합니다. 맵 데이터는 트리 구조로 이루어져 있으며, 같은 유형의 중복되는 요소들이 많습니다. 이에 따라 맵 데이터를 절차적으로 3D 오브젝트로 변환하기보다는 재사용 가능한 컴포넌트화하여 개발하는 것이 이점이 많기 때문에, 컴포넌트 기반 개발에 적합한 React Three Fiber를 선택하였습니다.
팀원이 바닐라 Three.js에 대한 경험이 없는 대신, React 경험이 많은 것을 고려하여, 익숙한 문법에서 개발을 할 수 있으며 React스럽게 개발할 수 있는 React Three Fiber를 채택했습니다.
threejs용 react 렌더러이며, 재사용 가능한 컴포넌트 단위로 오브젝트를 분리하거나 자체 포함된 요소들을 활용하여 선언적으로 코드를 작성할 수 있습니다.
공식문서에 따르면 threejs와의 호환성이 정말 높으며, 추가 오버헤드가 없고, React의 스케줄링 기능을 통해 오히려 성능이 더 뛰어납니다.
기본적으로 여러 이벤트(onClick 등)를 지원하여 레이캐스터를 선언하지 않고도 3D 마우스 피킹을 손쉽게 구현할 수 있습니다. (보일러 플레이트 코드가 줄어듬)

Untitled

타입을 명시하는 과정에서 컴파일 단계에 미리 오류를 잡아낼 수 있어, 추후 디버깅 과정과 테스트 과정에 드는 비용을 줄일 수 있어 사용하였습니다.

Untitled

별다른 추가 설치 없이, 기본적으로 typescript 컴파일링, 스타일 임포트, 파일 임포트 등을 기본적으로 지원하기 때문에, 초기 프론트엔드 설정에 들어가는 비용을 줄일 수 있습니다.
Vite의 빠른 번들링 속도로 인한 시간 감축이(이 글에 따르면 Webpack대비 약 278% 향상) Vite를 배워야 하는 추가적인 학습 시간보다 더 빠르다고 판단되었기에 채택하였습니다.
팀원 중 컴퓨터 성능이 좋지 않은 팀원이 있어, Webpack을 번들링하면서 들어가는 시간으로 개발을 하지 못하면서 비생산적으로 소요되는 시간을 절감할 수 있을 것이라고 판단되었습니다.