한발 먼저 가본 문과생이 알려주는
데이터 시각화 – API data를 chart로 표현하자!

‘한벌 먼저 가본 문과생이 알려주는 데이터 시각화'(이름도 길다..😅) 시리즈가 이번 아티클로 4편을 맞이한다.

지금까지 연재된 아티클을 조금 정리해보자면 Git과 Github의 기초를 알아보고, React로 SPA(Single Page App)을 만들었다. 이후 React의 props와 state에 대해서 공부해봤다.

이제 4편에서는 data를 불로오고, chart로 표시해 볼 것이다.

내가 경험해본 개발은 매력적이다. 매력적이라는 모호한 말에는 ‘재밌다’는 긍정적인 의미도 있지만 흔히 말하는 나쁜 남자처럼(?) 끌리게 하는 의미도 포함된다.

 

그런데 나쁜 남자가 조금 거칠다..

3일 정도를 개발한다고 하면, 2일은 오류가 뜨거나 어떻게 만드는지 몰라서 화가나고 (작은 비속어가 떠오르지만 순화했다) 좌절감을 느끼지만 하루는 막혔던 부분이 해결되고 내가 구현하고자 하는 모습이 나와 희열을 느낀다.

자 이제 시작해보자!

자신이 원하는 data를 어떻게 모을까?

data

이번 시간은 저번에 만든 react web app에

data를 불러와 chart로 표현하는 것이 목표다.

아직 react web app이 없다면 다음의 링크로 가서 만들어보자!

(아무것도 모르고 React 시작하기)

우리는 data가 필요하다! 그래야 chart로 표현하던지 그냥 둘지 할 수 있다.

 

자신이 원하는 data를 직접 수집하면 좋겠지만, 현실적으로 너무 힘든 일이다.

생각해보자. 내가 서울 어느 구에 사는 20대의 일주일 평균 운동 시간을 원한다고 한다면, 일일이 물어보고 다기는 현실적으로 너무 어렵다..

아마 평생을 쏟아 부어야 가능할지도 모른다.

그래서! 우리는 API를 사용할 것이다.

API는 어떤 정보의 사용 권리를 주고 서비스나 데이터를 더 쉽게 이용하여 개발할 수 있도록 도와준다.

조금 더 쉽게 이야기하면 많은 정보가 있는 창고가 있다. 창고의 배송자가 API이다.

우리는 그 배송자를 통해서 창고의 정보를 이용할 수 있다.

우리가 원하는 정보를 모으기 어려우니,

해당 정보를 가지고 있는 곳의 API를 이용해야 한다.

 

모든 코드를 직접 작성하면 좋겠지만 어렵고 오래 걸리므로

우리는 구현된 코드에 자신이 원하는 API를 불러오는데 초점을 맞추자.

원하는 API를 불러오자.

 

dropshipping-3264486_1920

우선 텍스트에디터를 이용해 API를 불러오고 싶은 component로 이동하자.

나는 ExampleTwoDeepComponent.js에 API를 불러올 것이다.

(다시 한번 말하지만 아직 web page가 준비되지 않았다면 아무것도 모르고 React 시작하기 여기 먼저 읽어보면 좋다!)


import React, {Component} from 'react';

그리고 Component를 react에서 불러와야한다. 위와 같이 {Component}를 추가해주자.

이제 API를 불러올 수 있는 환경을 세팅하자.

api data in react 링크

해당 영상은 API data를 받아오기 위한 쉬운 tutorial이다. (찾아보면 간단하게 구현된 tutorial들이 많다.)

위 tutorial을 따라 만들어보자.

영상을 보고 만들어도 되지만 어렵다면 아래와 같은 코드를 추가해자.

아직 API는 불러오지 않았지만 불러오기 위한 기본적인 세팅이다.

이제 API를 찾아 이 코드에 넣어주면 된다.

React가 궁금하다면 React 그놈.. (props vs state)여기를 참고하자.

나는 스포츠를 좋아한다. (물론 보는 것만 좋아한다. 이불 밖은 위험해..)

스포츠 중에서 축구를 제일 좋아하기 때문에 축구 관련 API를 활용해 시각화를 할 것이다.

구글신을 이용해 찾아보니

football-data 이라는 open API가 있다.

내가 이용할 API는 key가 필요하다.

key는 사이트를 찾아보면 발급받는 방법이 적혀있다.

football-data.org라는 사이트는 다행히 발급받는 방법이 아주 간단하다. 메일과 이름, 목적을 적으면 메일로 key를 보내준다.

그리고 API URL을 알아야 한다. 사이트의 docs를 읽어보면 API를 어떤 식으로 정리했는지 알 수 있다.

나는 어떤 리그 팀들의 득점과 실점 기록을 불러오고 싶다. 그렇다면 LeagueTable에서 정보를 불러와야 할 것 같다.

오오 맞다! LeagueTable에 특정 팀의 득점과 실점 기록이 있다. 잘 보니 http://api.football-data.org/v1/competitions/{id}/leagueTable

이란 URL로 정보를 기록했다. {id}를 바꿔주면 다른 리그의 정보가 나온다.

 

 

눈치 빠른 사람이라면 알겠지만, API URL을 Web Browser에 띄워서 정보가 나열되면 올바른 API라는 뜻이다.

만약 error가 나오면 존재하지 않는 API URL이므로 다시 확인해봐야 한다.

이제 API key, URL을 코드에 적용시키자.

아까 위 코드에서 API key를 위한 코드와 API URL 그리고 해당 URL의 모든 정보를 불러오게 지정했다.

개발을 조금 해봤다면 브라우저의 ‘개발자 도구’라고 들어봤을 것이다.

내가 짠 코드에 오류가 없는지, css가 어디에 적용되는지 등 정말 다양한 기능을 지원한다.

Chrome 개발자 도구를 이용하려면 [설정]-[도구]-[개발자 도구]가 있을 것이다.

혹은 Ctrl + Shift + I (윈도우) / Cmd + Opt + I (Mac) 단축키를 이용할 수 있다.

이 개발자 도구를 통해 Console 항목으로 들어가면

그림과 같이 지정한 API URL의 모든 정보를 불러왔다.

 

 

만약 정보를 불러오지 못 했다면 어딘가에서 실수를 저지른 것이다.

정확한 API URL인지, 제대로 된 정보를 불러오게 지정했는지 확인해 보아라.

이제 API data를 불러왔으니 이제 recharts로 예쁘게 보여주자.

 

gui-2311261_1280

recharts(링크)라는 도구를 이용해 chart를 넣을 것이다.

다른 chart library도 있지만 recharts을 선택한 이유는 간단하고, 보기 좋고, 편집하기도 쉽기 때문이다.

 

일단 recharts라는 도구를 알아보자.

recharts 들어가 Guide 항목으로 들어가면 어떻게 사용할 수 있는지 설명해준다.

터미널을 이용해 위에서 작업 중인 directory로 이동하고


$ npm install recharts

를 입력하면 recharts가 설치된다.

그리고 recharts 홈페이지의 예제에서 마음에 드는 chart를 골라보자.

나는 예쁘게 생긴 파이모양의 차트를 골라보았다.

그리고 사이트 아래쪽에 있는 jsfiddle을 선택하여 지금 보이는 chart의 코드를 보자.

jsfiddle은 온라인에서 간단하게 html, css, javascript 등의 코드를 적용하고 확인해볼 수 있는 재밌는 에디터다.

우리에게 필요한 코드만을 추출해오자.

필요한 것은 import할 chart 정보와 data, chart의 모양 및 크기가 전부다.
텍스트 에디터를 이용해 구현할 component로 이동해서


import {PieChart, Pie, Legend} from 'Recharts';

const data = [
     {name: 'Group A', value: 400}, {name: 'Group B', value: 300},
     {name: 'Group C', value: 300}, {name: 'Group D', value: 200},
     {name: 'Group E', value: 278}, {name: 'Group F', value: 189}
]

위에서부터 recharts와 data를 넣어주고


<PieChart width={800} height={400}>
<Pie startAngle={360} endAngle={0} data={data} cx={200} cy={200} outerRadius={80} fill="#8884d8" label/>
</PieChart>

아래쪽 코드에 파이 chart의 정보를 넣어주면 화면에 노출된다.

나는 ExampleComponent.js에 구현했다.

이런 식으로 example charts 코드를 살짝 수정하여 만들었다.

짜잔!!

파이 모양의 chart가 아니라 다른 모양으로도 넣어보고 data, chart 크기 등을 여러 방면으로 바꿔보며 확인해보면 재밌다.

간단한 차트지만, 처음만들어본 나에게는 어떤 것보다 크게 느껴졌다.

마치 데이터 시각화의 전문가가 된 기분이었다!

 

 

그리고 이때의 나는 ‘코딩’이라는 단어의 ‘ㅋ’자를 알아가고 있다고 생각했는데, 어림없는 생각이라는 것을 알게 되기 까지는 오래 걸리지 않았다.

recharts라는 도구를 어떻게 사용했는지 알아봤으니, API에 적용해보자.

 

 

먼저 내가 미리 만들어둔 코드를 보자.

종이접기의 김영만 아저씨처럼 미리 만들어왔다. 위에 API를 불러오지 않은 코드와 뭐가 다른지 비교해보면 더 좋다!

API를 불러오고 recharts로 표현한 완성된 코드다.

차근차근 살펴보면,

이 부분이 API에서 원하는 정보를 불러온 것이다.

‘Bayern’이라는 이름을 가진 팀의 실점(goalsAgainst)만 살펴보면 [0]이라는 이름으로 지정된 팀의 실점을 불러오라고 지정해준 것이다.

나머지 팀들도 같다.

‘Dortmund’라는 팀은 이 API에서 [1]이라는 이름을 가지고 있다. [1]팀의 득점(goals)와 실점(goalsAgainst)를 불러온 것이다.

그리고 이 부분이 불러온 API data를 chart로 표현해주는 코드다.

불러올 데이터를 {this.state.data}로 지정해주어서 chart로 표현했다. 

다른 적당한 chart를 넣어봐도 재밌다.

데이터 API를 chart로 표현하면서 ‘아 내가 굉장히 오만했구나.. 코딩의 ㅋ자를 알아간다고 생각했다니..’라며 반성하는 시간을 가졌다.

 

겸손하게 살아야 한다.

사족으로 덧붙이자면, 우리가 만든 react web app은 home→ExampleComponent→ExampleTwoDeepComponent 이런 순서로 구현되어 있다.

ExampleComponent와 ExampleTwoDeepComponent가 다른 페이지가 아니다.

 

 

별로 키보드를 만지지 않았는데, API를 불러와 chart로 표현했다!!

설명하기는 어렵지만 매우 뿌듯한 감정이 든다!

그런데 뭔가 지저분하고 예쁘지 않다. 내가 생각한 데이터 시각화는 이런 모습이 아니었다🤔 좀 멋지게 꾸밀 필요가 있을 것 같다.

두둥! 그래서 다음에는 css, html 이라는 화장품을 이용해 아름답게 꾸며보도록 하자.

Summary
한발 먼저 가본 문과생이 알려주는, 데이터 시각화 - API data를 chart로 표현하자!
Article Name
한발 먼저 가본 문과생이 알려주는, 데이터 시각화 - API data를 chart로 표현하자!
Description
'한벌 먼저 가본 문과생이 알려주는 데이터 시각화'(이름도 길다..) 시리즈가 이번 아티클로 4편을 맞이한다. 지금까지 연재된 아티클을 조금 정리해보자면 Git과 Github의 기초를 알아보고, React로 SPA(Single Page App)을 만들었다. 이후 React의 props와 state에 대해서 공부해봤다. 이제 4편에서는 data를 불로오고, chart로 표시해 볼 것이다.
Author