AppSignal은 최근 신규 사용자를 위한 "시작하기(Getting started)" 페이지를 추가했습니다. 이 페이지는 추천 단계들로 구성되어 있어 사용자가 AppSignal을 최대한 활용하는 데 도움을 줍니다.
일부 사용자는 서비스를 시작할 때 가이드가 있는 것을 선호하는 반면, 어떤 사용자는 스스로 제품을 탐색하거나 이미 AppSignal에 익숙한 경우도 있습니다.
모든 사용자에게 가이드형 또는 독립형 경험 중 선택권을 주기 위해, 저희는 "시작하기" 페이지를 숨기고 보여줄 수 있는 토글 기능을 설계했습니다.
과제: 서로 다른 환경 간 상태 동기화
사용자가 개인 설정 메뉴에서 "시작하기" 페이지를 켜고 끌 수 있게 하는 작업은 생각보다 까다로웠습니다. 그 이유는 "시작하기" 페이지가 React.js로 빌드되어 있는 반면, 개인 설정 메뉴는 React 앱 외부에서 렌더링되는 Rails 생성 템플릿이기 때문입니다.
결국 Rails 기반 설정 화면과 React 앱 사이에서 토글 상태를 동기화해야 했고, 이상적으로는 현재 상태를 확인하려고 서버에 지속적으로 요청(폴링)하지 않는 방식으로 구현하고 싶었습니다.
해결책: 문서 레벨의 커스텀 이벤트
React 외부의 인터랙션에는 AppSignal이 "Rails다운(Rails way)" 방식으로 StimulusJS를 사용합니다. 애플리케이션 전반에 가볍고 재미있는 JavaScript 스프링클을 뿌리듯 인터랙티브 요소를 더하는 접근법입니다.
바닐라 JS 성격의 StimulusJS를 선택한 이유는 표준화된 구조와 잘 정리된 문서를 갖추고 있어서, JavaScript 경험이 조금만 있어도 어떤 Rails 개발자든 쉽게 도입할 수 있기 때문입니다.
React.js와 StimulusJS의 상태를 동기화하기 위해, 저희는 document body에서 디스패치(dispatch)되는 커스텀 이벤트를 만들었습니다. 그리고 React와 StimulusJS 양쪽 설정 모두 hide_getting_started 이벤트를 연결하고 리스닝하도록 구성했습니다.
StimulusJS에서의 구현
StimulusJS 컨트롤러가 연결(connect)될 때 document의 이벤트를 리스닝합니다. 코드를 깔끔하게 유지하기 위해 컨트롤러 연결이 해제(disconnect)될 때 이벤트 리스너를 제거합니다:
React.js에서의 구현
React.js에서도 StimulusJS와 동일한 방식을 적용합니다. React 코드 역시 document의 이벤트를 리스닝하고, 컴포넌트가 언마운트될 때 이벤트 리스너를 정리합니다:
토글 온, 토글 오프
이런 구조 덕분에 서로 독립적인 React.js와 StimulusJS 구현체 어느 쪽에서든 커스텀 이벤트를 발생시킬 수 있고, 두 시스템이 서로 소통하며 항상 올바른 상태를 반영하게 됩니다:
JavaScript의 장점은 바로 이런 부분에 있습니다. 여러 프레임워크를 함께 사용하는 시나리오에서도 이벤트를 활용하면 React.js 컴포넌트나 StimulusJS 컨트롤러 외부에서 발생하는 변경 사항을 손쉽게 처리할 수 있습니다.
이 단순하고 직관적인 솔루션을 통해 DOM을 직접 수정하거나, 백엔드와 프론트엔드 사이에서 불필요한 요청을 주고받는 복잡한 구조를 만들지 않고도 서로 다른 JavaScript 구현체 간의 상태를 관리할 수 있습니다.
AppSignal로 프론트엔드 JavaScript 모니터링하기
개발자를 위해 개발자가 만든 도구로 애플리케이션의 JavaScript 프론트엔드를 모니터링하고 싶으신가요? 많은 개발자들이 저희 모니터링 도구를 만족스럽게 사용하는 이유는 다음과 같습니다:
- 탐색이 쉬운 직관적인 인터페이스
- 단순하고 예측 가능한 가격 정책
- 개발자 대상 개발자의 지원
아직 AppSignal을 처음 사용하신다면, 무료 스트룹와펠(stroopwafel)을 요청하는 것도 잊지 마세요! 애플리케이션의 모든 지표를 한눈에 파악할 수 있는 기분만큼 맛있다는 평이 있습니다 😉🍪
Connor James
AppSignal의 Developer Marketing Manager. 팟캐스트 중독자로, 카놀리를 너무 사랑해서 이름을 'Connoli'로 바꾸는 것까지 고민 중입니다. 'color'에 'u'가 들어가야 한다고 믿습니다. 마이크 앞이나 무대 위에서, 아니면 퇴근 후 소파에 누워 있는 모습을 발견할 수 있습니다.
Connor James의 모든 글 보기
Robert Beekman
공동 창업자로서 AppSignal의 첫 번째 커밋을 직접 작성했습니다. 지원 업계의 롤모델이며, 코드 속 아주 작은 디테일까지 모두 알고 있습니다. 여행과 사진 촬영(동시에!)을 즐깁니다.
Robert Beekman의 모든 글 보기