Node.js를 사용하여 React 앱에 셀프 서비스 BI 포함

오늘날의 데이터 기반 세계에서는 대시보드와 분석 기능을 SaaS 애플리케이션 내에서 직접 통합하는 것이 필수입니다. 시장 출시 시간 단축, 생산성 및 성능 향상, 수익 증가 등 분석 기능을 내장하면 많은 이점이 있습니다.

React 애플리케이션에 분석 기능을 내장하면 사용자의 작업 흐름 내에서 적절하고 시의적절한 통찰력을 얻을 수 있어 데이터 중심 문화를 촉진하고 보다 분석적인 사고를 장려할 수 있습니다.

​임베디드 분석 솔루션인 Reveal 이를 달성하는 데 도움이 될 수 있습니다.

Reveal 사용하면 상황 내 편집, 데이터 혼합, 대시보드 연결, 계산된 필드 등과 같은 분석 기능을 사용하여 React 애플리케이션에 대화형 대시보드 및 보고서를 쉽고 빠르게 포함할 수 있습니다.

이 글에서는 Node.js를 사용하여 React 기반 앱에서 Reveal 구현하는 방법을 살펴보겠습니다.

Reveal 처음 사용하는 경우 웹 사이트를 둘러보거나 Reveal 제품 개요 비디오를 시청하여 제품에 대해 자세히 알아볼 수 있습니다.

React 앱에 BI를 포함해야 하는 이유는 무엇입니까?

React 앱의 목적에 관계없이 내장된 분석 기능은 워크플로를 간소화하고 리소스를 관리하며 성능을 최적화할 수 있는 엄청난 기회를 제공합니다. 그래프, 차트, 대시보드와 같은 BI 도구에는 조직 전체의 데이터 활용 능력을 향상시키는 기능도 있습니다. 데이터 리터러시(Data Literacy)는 데이터를 정보로 읽고, 이해하고, 생성하고, 전달하는 능력으로, 사용자가 더 좋고 현명한 결정을 내리는 데 도움이 됩니다. 데이터 기반 의사결정은 추측이나 직감이 아닌 사실을 기반으로 하기 때문에 매우 중요합니다. 분석에 액세스하면 모든 사람이 영향을 받는 순간에 자신 있게 더욱 지능적인 결정을 내릴 수 있습니다.

Node.js를 사용하여 Reveal React 앱에 분석 포함

내장된 분석을 Reveal 대화형 보고서, 대시보드 등을 React 앱에 쉽게 포함할 수 있습니다. 기계 학습, 대시보드 연결, 통계 기능, 계산된 필드, 풍부한 데이터 분석, 셀프 서비스, 화이트 라벨링, 데이터 혼합 등과 같은 기능을 통해 Reveal 모든 React 기반 애플리케이션에 엄청난 가치를 추가할 수 있습니다.

또한 Reveal의 기본 SDK를 사용하면 BI를 React 앱에 매우 쉽게 통합할 수 있으므로 추가 요구 사항 없이 애플리케이션에 분석 기능을 내장할 수 있습니다. Reveal의 유연한 아키텍처와 풍부한 API를 통해 앱 기능을 제어할 수 있어 앱이 사용자 경험의 일부로 원활하게 통합됩니다.

이제 Reveal SDK를 사용하여 React 앱에 분석을 포함해 보겠습니다.

이 자습서에서는 Node.js 서버를 사용합니다.

*우리는 이미 Node.js 서버를 가지고 있습니다. 직접 만드는 방법을 알아보려면 Node.js로 Reveal SDK 서버를 설정하는 방법에 대한 이 단계별 자습서를 확인하십시오.

1. index.html에 필요한 스크립트 참조를 추가합니다.

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" type="text/css">       

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> 
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script> 
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script> 
<script src="https://dl.revealbi.io/reveal/libs/1.3.1/infragistics.reveal.js"></script>

2. RevealView를 렌더링하는 데 사용할 app.tsx에 <div>를 추가합니다.

function App() { 

  return ( 

    <div id="revealView" style={{height: "100vh", width: "100%"}}></div> 

  ); 

}

3. app.tsx에서 RevealView 개체를 초기화하고 대시보드를 로드합니다.

useEffect(() => {     

    $.ig.RVDashboard.loadDashboard(dashboardId).then((dashboard: any) => { 

      var revealView = new $.ig.RevealView("#revealView"); 

      revealView.dashboard = dashboard; 

    }); 

  }, [dashboardId]);

간단한 3단계만 거치면 Reveal에서 대시보드를 로드하는 기본 사항을 익힐 수 있습니다. 전체 튜토리얼을 보려면 개발자 도구 수석 부사장인 Jason Beres와 함께 React 앱에서 대시보드를 로드하고 검색하는 방법을 단계별로 안내하는 이 비디오를 시청하세요.

내장된 분석 및 비즈니스 인텔리전스와 비즈니스에 대한 데이터의 중요성에 대한 자세한 정보를 보려면 YouTube 채널에서 다른 동영상을 시청하세요. Angular, Blazor 및 JavaScript HTML 앱에 분석 포함, 포함된 BI 대시보드를 만드는 방법 등과 같은 주제를 다루고 있습니다. 전문가가 제공하는 향후 동영상을 놓치지 않으려면 구독하는 것을 잊지 마세요.

Node.js를 사용하여 Reveal React 앱에 분석을 포함하려고 하는데 도중에 문제가 발생하는 경우 Discord 채널을 통해 제품 팀에 문의하세요.

또한 무료 제품 둘러보기를 예약하여 Reveal 및 작동 방식에 대해 자세히 알아볼 수 있습니다. 또는 SDK를 다운로드하여 직접 사용해 볼 수도 있습니다.