개요
Three.js를 활용한 3D 인터랙션을 지원하는 웹뷰 개발
TypeScriptNext.jsThree.js
개발 상세 내용
웹뷰 메시지 통신의 구조적 개선을 위한 옵저버 패턴 적용
[옵저버 패턴 적용 전]
[옵저버 패턴 적용 후]
문제
- 웹뷰 메시지를 처리하는 로직이 중복되고 분산되어 있어, 메시지 흐름을 예측하기 어렵고 유지보수 및 확장 시 에러 발생 가능성이 높음
원인
- 메시지를 수신할 때 관심사에 따라 분리된 구조가 아닌 브로드캐스트 방식으로 전달되어 관심 없는 메시지까지 수신
대안
- 옵저버(Observer) 패턴을 적용해, 각 컴포넌트가 자신이 필요한 메시지 타입만 구독하도록 구성
해결
- pub/sub 패턴을 도입하여 메시지를 중앙에서 수신하고, 관심사에 대해서만 구독하도록 리팩터링하여 메시지 수신/처리의 관심사를 분리하였다.
- 제네릭 타입을 활용해 메시지 구조를 명확하게 정의하고, 각 구독자가 처리하는 메시지 타입에 대한 타입 안정성을 보장하였다.
- 또한, 싱글톤 패턴을 적용해 메시지 Publisher 인스턴스의 유일성을 보장함으로써 중복 리스너 등록을 방지하였다.
결과
- 기존의 분산된 이벤트 리스너 구조를 중앙화함으로써, 메시지 흐름을 예측 가능하게 만들고 디버깅이 훨씬 용이해졌다.
- 제네릭 타입과 pub/sub 패턴 덕분에 메시지 스펙 변경 시 각 컴포넌트에서의 수정 범위가 명확해지고, 확장성과 유지보수성이 크게 향상되었다.
긴 글 읽어주셔서 감사합니다.
더 궁금하신 내용이 있으시다면,
bangdori8865@gmail.com으로 연락주시면 감사하겠습니다.