[티맥스가이아] GAIA Docs 오피스 - 선 도형 관련 기능 개발
2024.05 - 2024.08
기여도: 100%
상세 설명
•
레퍼런스 제품(MS Office, Google Slide) 분석을 통한 기능 정의
◦
다양한 상황(복사/붙여넣기, 그룹화, 문서 import/export, 동시편집)에서의 기능을 상세하게 분석함으로써 완성도 있는 기능 구현 달성
•
도형 간 연결 기능 구현
◦
선 도형 조작 시, mouse over된 도형 및 연결점의 정보를 전역 상태로 저장
◦
도형 간 위치 관계에 따른 연결선 도형의 최적 경로 계산 로직 구현
◦
계산된 경로에 따라 엘리먼트의 svg path 변경 및 위치/크기/회전 상태에 맞게 transform 적용
◦
도형 간 연결 관계를 Map 구조로 관리 (key: 도형, value: 연결된 선 도형 배열) → 각 도형이 편집될 때 연결된 선 도형들을 get하여, 도형 변형 상태에 따라 선 도형의 모양 변경 처리
•
Cucumber, Puppeteer을 사용하여 UI 테스트 코드 작성
배운점
•
초기 설계의 중요성을 깊이 깨달았습니다. 부실한 설계는 개발 과정에서 많은 시간을 소모하게 하며, 팀 내 피드백을 통해 탄탄히 다지는 과정이 필수적임을 배웠습니다. 좋은 설계가 개발 속도와 품질을 결정한다는 점을 실감하게 되었습니다
•
코드의 가독성을 높이기 위해 컴포넌트와 커스텀 훅으로 분리하고, 또한 반복적인 로직을 재사용 가능한 형태로 분리하여 최소화하는데 집중했습니다. 대규모 프로젝트에서는 확장성과 유지보수를 고려해 코드의 구조를 고민하는 것이 매우 중요하다는 것을 다시 한 번 깨달았습니다.