<div id="readability-page-1" class="page"><p><span>by</span>
                
                <span></span>
                                    <span>May 18. 2024</span>
                            </p><div><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;안녕하세요 낭만학습자입니다!&quot;}],&quot;size&quot;:&quot;h3&quot;}">안녕하세요 낭만학습자입니다!</h3><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;이번에는 &quot;},{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#ec4c6a&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;Latitude&quot;}]}],&quot;styleType&quot;:&quot;bold&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; (&quot;},{&quot;type&quot;:&quot;anchor&quot;,&quot;url&quot;:&quot;https://tools.latitude.so/&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;https://tools.latitude.so/&quot;}],&quot;target&quot;:&quot;_blank&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;) 라는 재미있는 오픈소스 프레임워크를 소개해드리고자 합니다.&quot;}],&quot;size&quot;:&quot;h3&quot;}">이번에는 <b><span>Latitude</span></b>&nbsp;(<a target="_blank" href="https://tools.latitude.so/">https://tools.latitude.so/</a>)&nbsp;라는 재미있는 오픈소스 프레임워크를 소개해드리고자 합니다.</h3><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;anchor&quot;,&quot;url&quot;:&quot;https://tools.latitude.so/&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;https://tools.latitude.so/&quot;}],&quot;target&quot;:&quot;_blank&quot;}]}"><a target="_blank" href="https://tools.latitude.so/">https://tools.latitude.so/</a></p><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;이 프레임워크는 접근방법이 다는 것과는 다소 다릅니다. 기존 및 다른 애플리케이션과의 임베디드 (embedded)가 쉽도록 하는 것과 SQL을 작성하면 그 데이터를 기반으로 쉽게 시각화를 만들 수 있다는 점입니다.&quot;}],&quot;size&quot;:&quot;h3&quot;}">이 프레임워크는 접근방법이 다는 것과는 다소 다릅니다. 기존 및 다른 애플리케이션과의 임베디드 (embedded)가 쉽도록 하는 것과 SQL을 작성하면 그 데이터를 기반으로 쉽게 시각화를 만들 수 있다는 점입니다.</h3><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#5c5cb2&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;사이트에서 소개글은 다음과 같습니다.&quot;}]}],&quot;styleType&quot;:&quot;bold&quot;}],&quot;size&quot;:&quot;h3&quot;}"><b><span>사이트에서 소개글은 다음과 같습니다.</span></b></h3><blockquote data-app="{&quot;type&quot;:&quot;quotation&quot;,&quot;kind&quot;:&quot;bar&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;Create API endpoints on top of your database or warehouse using just SQL, and embed interactive visualizations natively in your favorite frontend framework or through an iframe. (SQL만 사용하여 데이터베이스 또는 웨어하우스 위에 API 엔드포인트를 생성하고 즐겨 사용하는 프런트엔드 프레임워크 또는 iframe을 통해 대화형 시각화를 기본적으로 포함하세요.)&quot;}]}">Create API endpoints on top of your database or warehouse using just SQL, and embed interactive visualizations natively in your favorite frontend framework or through an iframe. (SQL만 사용하여 데이터베이스 또는 웨어하우스 위에 API 엔드포인트를 생성하고 즐겨 사용하는 프런트엔드 프레임워크 또는 iframe을 통해 대화형 시각화를 기본적으로 포함하세요.)</blockquote><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[]},{&quot;type&quot;:&quot;br&quot;}],&quot;size&quot;:&quot;h3&quot;}"><span></span><br></h3><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Noto Sans DemiLight&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#5c5cb2&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;또 다른 소개로는 다음과 같습니다.&quot;}]}],&quot;styleType&quot;:&quot;bold&quot;}]}]},{&quot;type&quot;:&quot;br&quot;}],&quot;size&quot;:&quot;h3&quot;}"><span><span><b><span>또 다른 소개로는 다음과 같습니다.</span></b></span></span><br></h3><blockquote data-app="{&quot;type&quot;:&quot;quotation&quot;,&quot;kind&quot;:&quot;bar&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;The missing analytics layer between your database and your users. (데이터와 사용자간의 빠져있는 분석 계층을 채우고자는 목표)&quot;}]}">The missing analytics layer between your database and your users. (데이터와 사용자간의 빠져있는 분석 계층을 채우고자는 목표)</blockquote><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#5c5cb2&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;만들어진 개발 언어는 다음과 같습니다.&quot;}]}]},{&quot;type&quot;:&quot;br&quot;}],&quot;size&quot;:&quot;h3&quot;}"><span><span>만들어진 개발 언어는 다음과 같습니다.</span></span><br></h3><div data-app="{&quot;type&quot;:&quot;img&quot;,&quot;align&quot;:&quot;content-full&quot;,&quot;mobileAlign&quot;:&quot;full&quot;,&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/sJg/image/lNmXpBcZg_i3_H3v76pJo8hR9Mc.png&quot;,&quot;caption&quot;:&quot;&quot;,&quot;width&quot;:&quot;708&quot;,&quot;height&quot;:&quot;264&quot;,&quot;originalName&quot;:&quot;스크린샷 2024-05-18 오전 12.27.32.png&quot;}"><p><img src="https://img1.daumcdn.net/thumb/R1280x0/?fname=http://t1.daumcdn.net/brunch/service/user/sJg/image/lNmXpBcZg_i3_H3v76pJo8hR9Mc.png" data-filename="스크린샷 2024-05-18 오전 12.27.32.png"><span></span></p></div><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Noto Sans DemiLight&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;node 기반으로 vite를 활용해서 만들어졌기에 node에 대한 간단한 개념만 있으면 공식문서대로 따라하면 설치는 어렵지는 않습니다. &quot;}]}],&quot;size&quot;:&quot;h3&quot;}"><span>node 기반으로 vite를 활용해서 만들어졌기에 node에 대한 간단한 개념만 있으면 공식문서대로 따라하면 설치는 어렵지는 않습니다.&nbsp;</span></h3><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Noto Sans DemiLight&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;다만, 아마도 로컬 개발을 한 후에 node 애플리케이션으로 빌드하고 그 빌드한 것을 기존 시스템에 통합 (현재는 react만 지원) 하거나, iframe태그를 이용해서 연동을 하는 개념이기에 Latitude의 설계 개념에 익숙해 지는데 약간의 시간이 필요합니다.&quot;}]}],&quot;size&quot;:&quot;h3&quot;}"><span>다만,&nbsp;아마도 로컬 개발을 한 후에 node 애플리케이션으로 빌드하고 그 빌드한 것을 기존 시스템에 통합 (현재는 react만 지원) 하거나, iframe태그를 이용해서 연동을 하는 개념이기에 Latitude의 설계 개념에 익숙해 지는데 약간의 시간이 필요합니다.</span></h3><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#ec4c6a&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;2024년 5월 18일 현재 지원하는 데이터 소스는 다음과 같습니다. 유명한 데이터베이스 및 데이터플랫폼과 연동은 가능한데 의외로 오라클(Oracle)은 보이지 않네요 ^^&quot;}],&quot;styleType&quot;:&quot;bold&quot;}]}],&quot;size&quot;:&quot;h3&quot;}"><span><b>2024년 5월 18일 현재 지원하는 데이터 소스는 다음과 같습니다. 유명한 데이터베이스 및 데이터플랫폼과 연동은 가능한데 의외로 오라클(Oracle)은 보이지 않네요 ^^</b></span></h3><div data-app="{&quot;type&quot;:&quot;img&quot;,&quot;align&quot;:&quot;content-full&quot;,&quot;mobileAlign&quot;:&quot;full&quot;,&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/sJg/image/Dbinh4Ot2xrw4Ez7dYxAcgBIZtA.png&quot;,&quot;caption&quot;:&quot;&quot;,&quot;width&quot;:&quot;1568&quot;,&quot;height&quot;:&quot;1068&quot;,&quot;originalName&quot;:&quot;스크린샷 2024-05-18 오전 12.23.11.png&quot;}"><p><img src="https://img1.daumcdn.net/thumb/R1280x0/?fname=http://t1.daumcdn.net/brunch/service/user/sJg/image/Dbinh4Ot2xrw4Ez7dYxAcgBIZtA.png" data-filename="스크린샷 2024-05-18 오전 12.23.11.png"><span></span></p></div><div data-app="{&quot;type&quot;:&quot;img&quot;,&quot;align&quot;:&quot;inner-center&quot;,&quot;mobileAlign&quot;:&quot;content-full&quot;,&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/sJg/image/yfqx2NYbwcq2lYKhoXP_xSaA9jA.png&quot;,&quot;caption&quot;:&quot;&quot;,&quot;width&quot;:&quot;302&quot;,&quot;height&quot;:&quot;1116&quot;,&quot;originalName&quot;:&quot;스크린샷 2024-05-18 오전 12.23.17.png&quot;}"><p><img src="https://img1.daumcdn.net/thumb/R1280x0/?fname=http://t1.daumcdn.net/brunch/service/user/sJg/image/yfqx2NYbwcq2lYKhoXP_xSaA9jA.png" data-filename="스크린샷 2024-05-18 오전 12.23.17.png"><span></span></p></div><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#ec4c6a&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;아래와 같이 로드맵도 가지면서 꾸준히 개발되고 있기에 한번 관심을 가져보시는 것도 좋을 것 같습니다.&quot;}],&quot;styleType&quot;:&quot;bold&quot;}]}],&quot;size&quot;:&quot;h3&quot;}"><span><b>아래와 같이 로드맵도 가지면서 꾸준히 개발되고 있기에 한번 관심을 가져보시는 것도 좋을 것 같습니다.</b></span></h3><div data-app="{&quot;type&quot;:&quot;img&quot;,&quot;align&quot;:&quot;content-full&quot;,&quot;mobileAlign&quot;:&quot;full&quot;,&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/sJg/image/GVxfSkGLjG40GPMnbudjI6wnclk.png&quot;,&quot;caption&quot;:&quot;&quot;,&quot;width&quot;:&quot;2890&quot;,&quot;height&quot;:&quot;2470&quot;,&quot;originalName&quot;:&quot;스크린샷 2024-05-18 오전 12.26.08.png&quot;}"><p><img src="https://img1.daumcdn.net/thumb/R1280x0/?fname=http://t1.daumcdn.net/brunch/service/user/sJg/image/GVxfSkGLjG40GPMnbudjI6wnclk.png" data-filename="스크린샷 2024-05-18 오전 12.26.08.png"><span></span></p></div><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#16b06d&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;background-color&quot;:&quot;#5c5cb2&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;background-color&quot;:&quot;#ffffff&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#5c5cb2&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;데이터 대시보드를 만들기 위해서 태블로, PowerBI, Spotfire 등을 활용하거나, 오픈소스 라이브러리를 통해 직접 코딩을 해서 만들게 되는데 이 Latitude은 데이터 연결 그리고 시각화할 유형에 맞는 SQL 작성만 하면 쉽게 데이터 대시보드를 만들 수 있습니다. SQL 작성한 것에 대한 시각화를 할 수 있다는 점에서 SQL 공부에도 참 좋을 것 같습니다.&quot;}]}]}]}]}],&quot;styleType&quot;:&quot;bold&quot;}],&quot;size&quot;:&quot;h3&quot;}"><b><span><span><span><span>데이터 대시보드를 만들기 위해서 태블로, PowerBI, Spotfire 등을 활용하거나, 오픈소스 라이브러리를 통해 직접 코딩을 해서 만들게 되는데 이 Latitude은 데이터 연결 그리고 시각화할 유형에 맞는 SQL 작성만 하면 쉽게 데이터 대시보드를 만들 수 있습니다. SQL 작성한 것에 대한 시각화를 할 수 있다는 점에서 SQL 공부에도 참 좋을 것 같습니다.</span></span></span></span></b></h3><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#16b06d&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;background-color&quot;:&quot;#5c5cb2&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;background-color&quot;:&quot;#ffffff&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#5c5cb2&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;그리고, 무엇보다도 쉽게 기존 시스템과 연동이 가능하다는 것이 또다른 장점이 아닐까 생각됩니다. 비록, iframe이라는 방법을 이용하지만... ㅠㅠ&quot;}]}]}]}]}],&quot;styleType&quot;:&quot;bold&quot;}],&quot;size&quot;:&quot;h3&quot;}"><b><span><span><span><span>그리고, 무엇보다도 쉽게 기존 시스템과 연동이 가능하다는 것이 또다른 장점이 아닐까 생각됩니다. 비록, iframe이라는 방법을 이용하지만... ㅠㅠ</span></span></span></span></b></h3><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#16b06d&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;background-color&quot;:&quot;#5c5cb2&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;background-color&quot;:&quot;#ffffff&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#5c5cb2&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;물론 개별적으로 데이터 대시보드 운영하는 것도 가능합니다. &quot;}]}]}]}]}],&quot;styleType&quot;:&quot;bold&quot;}],&quot;size&quot;:&quot;h3&quot;}"><b><span><span><span><span>물론 개별적으로 데이터 대시보드 운영하는 것도 가능합니다.&nbsp;</span></span></span></span></b></h3><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#16b06d&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;background-color&quot;:&quot;#5c5cb2&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;background-color&quot;:&quot;#ffffff&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#5c5cb2&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;추가로, 데이터 시각화보다 데이터는 제공하는 API 서버역할도 할 수 있다는 것이 장점 중에 하나입니다.&quot;}]}]}]}]}],&quot;styleType&quot;:&quot;bold&quot;}],&quot;size&quot;:&quot;h3&quot;}"><b><span><span><span><span>추가로, 데이터 시각화보다 데이터는 제공하는 API 서버역할도 할 수 있다는 것이 장점 중에 하나입니다.</span></span></span></span></b></h3><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#16b06d&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;background-color&quot;:&quot;#5c5cb2&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;background-color&quot;:&quot;#ffffff&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#5c5cb2&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;그동안, 글을 많이 쓰지 못했는데, 앞으로 Latitude 를 활용하면서 데이터 이야기와 SQL문도 같이 이야기해보겠습니다!!!&quot;}]}]}]}]}],&quot;styleType&quot;:&quot;bold&quot;}],&quot;size&quot;:&quot;h3&quot;}"><b><span><span><span><span>그동안, 글을 많이 쓰지 못했는데, 앞으로 Latitude 를 활용하면서 데이터 이야기와 SQL문도 같이 이야기해보겠습니다!!!</span></span></span></span></b></h3><h2 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;감사합니다!!!&quot;}],&quot;styleType&quot;:&quot;bold&quot;}],&quot;size&quot;:&quot;h2&quot;}"><b>감사합니다!!!</b></h2></div></div>

김영하

안녕하세요 낭만학습자입니다! 이번에는 Latitude (https://tools.latitude.so/) 라는 재미있는 오픈소스 프레임워크를 소개해드리고자 합니다.  https://tools.latitude.so/ 이 프레임워크는 접근방법이 다는 것과는 다소 다릅니다. 기존 및 다른 애플리케이션과의 임베디드 (embedded)가 쉽도록 하는 것과 SQL을

SQL만 사용해서 쉽게 데이터 대시보드 만들기 - 독립적인 대시보드 보다는 기존 시스템에 쉽게 융합하는 대시보드

댓글