본문 바로가기

Projects

 (13)
구글 스프레드시트 데이터를 API로 가져오기 구글 스프레드시트의 데이터를 API로 가져오고, 웹페이지에서 이 데이터를 자유롭게 이용할 수 있는 방법이 없을까? 구글스프레드시트를 API로 변환해주는 Third party 서비스가 일부 있지만 (sheety, sheet2api, sheetdb) 대부분 유료여서 (무료 티어에는 제약이 많다) 토이프로젝트에서 자유롭게 데이터를 이용하기에는 어려움이 많다. 그래서 다른 서비스를 이용하지 않고 구글 고유의 API를 이용해서 데이터를 API로 가져오는 방법을 소개하고자 한다. 간단한 정적 사이트를 만들려고 하고, 그 정적 사이트에 들어갈 데이터는 필요한데 MYSQL 같은 무거운 DB는 굳이 필요없는 경우에 잘 활용할 수 있다. 코드 소개 const getSheetData = async () => { const ..
구글 스프레드시트로 RE100 대시보드 만들기 (5. Deep Dive 인터렉티브 대시보드 만들기) 지난 편에 이어서 이번 편에는 5. Deep Dive 대시보드를 살펴볼 예정이다. 4편에서 확인한 'Overview'대시보든가 RE100 기업들의 전체적인 현황을 살펴보기 위한 목적이라고 한다면, 5편의 Deep Dive 대시보드는 각종 필터를 통해서 유저가 원하는 데이터를 선별적으로 확인할 수 있는 인터렉티브 대시보드이다. 인터렉티브 대시보드를 통해서 아래의 질문들에 대해서 답을 구할 수 있다. 2020년 한 해동안만 RE100에 가입한 기업들은 어떻게 될까? 2021년 가입한 총 기업들 중에 한국 기업의 비중은 얼마나 될까? 한국의 경우 어떤 산업들이 주로 RE100에 가입을 했을까? 서비스 산업의 경우 어떤 국가의 기업들이 가입을 했을까? 구글시트로 인터렉티브 대시보드 제작을 위한 3가지 요소 구글..
구글 스프레드시트로 RE100 대시보드 만들기 (4. Overview 대시보드 만들기) 이번 편에서는 실제로 대시보드를 어떻게 만들었는지, 각 요소별로 어떤 방식으로 데이터를 가공하여 시각화하였는지를 살펴볼 예정이다. 4편에서는 대시보드의 첫번째 부분인 'Overview'애 대해서 살펴볼 예정이고, 5편에서는 대시보드의 두번째 부분인 'Deep Dive' 에 대해서 살펴볼 예정이다. 2~3편을 통해서 웹페이지에서 데이터를 수집하고, 시트에 자동으로 업데이트하는 시스템을 구축하였고, 그 결과 아래와 같은 dataset이 준비되어 있다. 이 dataset을 이용해서 대시보드의 각 요소를 하나씩 구축할 예정인데, 대시보드의 각 요소에 대한 자세한 설명은 1편에 적어두었다. ① 최근에 업데이트된 항목 가져오기 : Recent Updates '최근'의 기준 설정 '최근'이라는 것은 항상 기준 시점에..
구글 스프레드시트로 RE100 대시보드 만들기 (3. 트리거 설정 및 업데이트 자동화) 1편과 2편에 이어 이번 편에서는 2가지를 살펴볼 예정이다. 1.기존 데이터와 새로 수집하는 데이터의 비교를 통해서 신규로 추가된 데이터만 시트에 업데이트 2.트리거 설정을 통해서 만들어둔 함수를 일정 주기마다 실행되도록 설정 (Trigger) 1. 데이터를 업데이트하는 함수 : updateData() 우선 코드부터 살펴보면 다음과 같다. function updateData(){ //1. getCurrent 함수를 통해서, 웹의 데이터를 가져와서 2차원 배열 형태로 저장해둔다 var dataFromWeb = getCurrent() //2. getSheetItems 함수를 통해서, 기존 시트의 데이터를 2차원 배열 형태로 변수에 저장한다. var dataFromSheet = getSheetItems() /..
구글 스프레드시트로 RE100 대시보드 만들기 (2. 데이터 수집) 지난 1편에서는 구글 스프레드시트 기반으로 RE100 현황을 확인할 수 있는 대시보드를 기능 위주로 살펴보았다. 이번 글에서는 이번 대시보드 제작 과정에서 첫 단계에 해당하는 "데이터 수집" 단계에 대해서 알아볼 예정이다. 구글시트에서 웹 데이터 수집방법 구글 스프레드시트에서 웹페이지 데이터를 수집하는 방법으로는 크게 2가지가 있다. 이번 대시보드에서는 1주일에 한번씩 RE100 웹페이지를 크롤링해서 새롭게 추가된 기업이 있는지 체크하고, 있는 경우 데이터를 대시보드에 자동으로 반영한다. 이처럼 자동 스케쥴링 기능을 위해서 (자동으로 1주일에 한번씩 데이터를 수집) 데이터 수집을 위해서 앱 스크립트를 이용하였다. * 앱 스크립트는 확장 프로그램 → Apps Script를 클릭하게 되면 새 창이 뜬다. 준..
구글 스프레드시트로 RE100 대시보드 만들기 (1. 대시보드 소개) 최근 대선토론회에서 "RE100"이라는 단어가 등장해 화제가 되고 있다. RE100 은 Renewable Energy 100%의 약자로, 기업이 사업활동을 수행하는 데 사용하는 모든 에너지를 재생에너지로 사용하겠다는 민간 차원의 자발적 켐페인이다. 2014년부터 기업들이 하나 둘씩 RE100을 선언하기 시작해서, '22년 2월 현재 기준으로 전 세계의 351개 기업이 RE100 캠페인에 동참한 상황이다. 어느 기업이 RE100에 동참한다고 하면, "우리는 20XX년까지 RE100을 달성하겠다"와 같이 목표연도(Target Year)를 포함한 공약을 발표한다. 예를 들어 최근 상장한 LG에너지솔루션도 2021년, 2030년까지 RE100을 달성하겠다고 선언하였다. RE100 대시보드의 필요성 RE100 참..
신재생에너지 공급인증서(REC) 대시보드 (feat. RPS 제도) DEMO 및 주요 기능 https://hanalia.github.io/react_rec_hosting/ 1. 주 2회(매주 수요일, 금요일) 최신 REC 가격 자동 업데이트 2. Recharts 라이브러리를 사용하여 최근 가격 동향에 대한 그래프 시각화 3. React-Table 라이브러리를 활용한 테이블 구현 (Sorting, Pagination 기능 포함) 4. 데이터 CSV 내보내기 기능 추가 신재생에너지 공급인증서(REC, Renewable Energy Certificates)는 정부가 신재생에너지 발전사업자에 발급해주는 증명서류 한국의 현행 신재생에너지 정책에 의하면, 발전설비규모 500MW 이상인 발전사업자는 총 발전량의 일정 비율 이상을 신재생에너지원으로 발전해야 하는 의무가 있음. (= 신..
[파이썬] Plotly-Dash를 이용한 동적 대시보드 프로젝트 개요 스터디 카페를 운영하는 지인이 있는데, 스터디 카페에 어떤 손님들이 방문하는지에 대해서 확인이 잘 안된다는 이야기를 들었다. 키오스크에서 고객 결제 데이터를 확인할 수 있지만, 아래와 같이 각 결제내역별로 하나의 행으로 이루어져 있어서, 고객별, 일자별, 월별로 정리해서 한눈에 매출 추이나 경향을 파악하기 힘들다. 데이터를 가공, 수집하여 대시보드에서 신속하게 원하는 정보를 선별해서 볼 수 있도록 프로젝트를 진행해 보았다. 주요 개발 프레임워크 : 파이썬, Flask, Pandas, Dash, Skeleton CSS, 주요 코드 from typing import DefaultDict import dash import dash_core_components as dcc from dash.dep..

티스토리툴바