<aside>

기술 항목

</aside>

*척척이 = 프로젝트에서 관절별로 구동되는 삼각기둥의 집합 *척 = 척척이를 이루는 하나의 삼각기둥

• 리액트 (라이브러리)

  프로젝트 특성상 작은 단위의 척이 시시각각 위치가 변화합니다.

  이러한 변화마다 화면의 모든 부분이 재랜더링 된다면 성능적인 측면에서 많은 이슈가 발생할 것이라 예측했습니다.

  성능 이슈를 최소화하고 변경되는 부분만 화면에 보여주기 위해 리액트 사용을 채택했습니다.

• Three.js 및 React Three fiber (3D 렌더링 라이브러리)

  3D 요소를 랜더링 하기 위해 WebGL 과 Three.js 를 비교했을때, WebGL 은 Three.js에 비해

  조금 더 원시적인 언어로 같은 기능을 구현하더라도 필요한 보일러 플레이트의 양이 비대해짐을 확인했습니다. 제한된 프로젝트 기간동안 사용해 보지 않았던 3D 라이브러리를 학습, 구현 해야함을 고려했을때,

  시간 비용, 학습 비용 측면 모두 Three.js를 사용하는 것이 합리적이라 생각되어 선택했습니다.

  더하여, 리액트를 사용하기로 선택하였고, 리액트 랜더링 사이클과 연관이 깊은 React Three Fiber 를

  추가적으로 선택하여, 랜더링 성능 최적화를 고려했습니다.

• Tailwind Css (스타일 라이브러리)

  개발 도중 또, 개발 이후 추가적으로 스타일 요소를 보완할 경우 모두 파일간 이동이 필요없이 비즈니스

  로직 내부에서 바로 스타일을 적용 가능하기에, 혼동의 가능성을 줄이고 관리의 효율이 증가될 것이라

  판단하여 채택했습니다.

• Zustand (상태관리 라이브러리)

  여러개의 척에 대한 데이터를 관리할때, 그 상태를 각 컴포넌트 마다 별도로 관리한다면, 효율이 떨어진다

  판단했습니다. 데이터의 효율적인 관리 및 통일성을 보장하기 위해 전역 상태관리를 채택했고, top-down

  방식을 사용하는 상태관리 라이브러리 중 보일러 플레이트의 양이 작아 시간 비용 측면에서 유리하다 판단하여 채택했습니다.

• Netlify (배포)

  깃허브와 연동하여 자동 배포를 진행할 수 있고, 배포 이후 수정 사항에 대한 대처가 편리할 것으로

  생각되어 채택했습니다.

• Vite (번들러)

  테스트 코드 작성시 단위 테스트를 진행함에 있어, 번들과 테스트 툴 모두를 지원하는 연관성을 고려하고,

  빠른 서버 실행 속도, 개발 커뮤니티의 크기를 고려하여 채택했습니다.