1 프로젝트 요약
사내 Excel로 관리되는 내용을 시각화 해주는 프로그램 입니다. Electron,
2 배경
발주처의 요구사항은 도면이 아닌 대부분 엑셀과 같은 수치로 제공된다. 대형 설계사의 업무는 이러한 요구사항을 공간으로 표현하는 일이다. 이 프로젝트는 엑셀로 제공된 데이터가 변경될때마다 수많은 맨아워가 소비된다는 점에서 시작되었다.
3 프로젝트 기간
2024.02~ 2024.05 종료
4 기대효과
- 잦은 디자인 변경으로 인한 각종 그래픽 작업 맨아워 절감
- OnPremise 앱 개발로 데이터 유출 방지 기대
5 기술스택
- Three.js
- Electron
- React Three Fiber
- Sheet.js
- Chat.js
5.1 Three.js
Three.js는 webgl을 쉽게 쓸 수 있도록 만든 library임. 사내에 onpremise이면서 유려한 UI를 가진 프로그램 개발 수요가 증가해 three.js 사용을 고려하게 되었음. 개인적으론 상당한 챌린지 였음. 왜냐하면 부트캠프 교육이후 사실상 Frontend를 처음하는 것이기 때문이었음.
현재 앱을 계속 발전시키고 있음. 나름 상당히 재밌는 도구임. React와 합쳐진 r3f는 꽤나 흥미로운 라이브러리 였음.
5.2 Electron
Electron을 택한 이유는 하나임. Three.js는 웹 라이브러리 인데, 이를 onpremise 앱을 만들때 쓰기 위해 선택할 수 있는게 많지 않았음. 최초에 React를 생각하지 않았기 때문에 React native보단 Electron을 생각함.
Three.js와 결합하는 과정에서 무수한 문제가 있었으나 어찌저찌 해결하고 있음. 현재는 React와 연결 중이며 여기 링크를 따라하면 React, R3F를 통합하는데 큰 무리가 없었음
5.3 R3F(React Three Fiber)
Three.js를 React용으로 바꿔놓은 것이라고 보면됨. 내 미천한 React와 Three.js 실력에 불구하고 비교적 쉽게 할 수 있었음. 또한 많은 기능들이 제공되고 있어서 개발경험도 좋은편임. 정확한 용어인지는 모르겠지만 Wrapper 기능들을 쓰기전에 기본적인 Three.js에 대해 아는 것이 상당히 중요해 보임.
6 개발 결과물
하이