[웹사이트 개발일지] 주먹구구로 그래프 구현, 달콤한 상상

일차적으로, 목표했던 데이터의 시각화는 모두 구현했다. 최대주주현황(pie), 재무상태표(treemap), 실적추이(bar). 막상 써놓고 보니 별거 없다. 그래도 맨땅에 하다 보니 꽤 고단했다.ㅎㅎ 실적 추이 차트를 구현하고 달콤한 상상을 했다. 프로젝트를 완성하고 주위 사람들에게 자랑하는 상상이다. "자, 내가 만든 사이트야. 이거 봐봐 검색도 돼. 그래프도 나오고 항목 제거할 수도 있어. 대박이지." 아직 구현 안 된 기능들이 남아있지만 할 수 있을 거라 믿는다. 언제나 문제는 시간일 뿐이다. 하루키의 말처럼, 리듬을 단절하지 않고 계속하면 그 뒤는 어떻게든 풀려 나간다.

 

자아도취는 여기까지하고, 오늘은 char.js의 combo bar 차트를 구현하며 '주먹구구'로도 개발은 가능하다는 걸 느꼈다. 사이트에 예제 코드는 있는데, 이걸 어디에 어떻게 넣어야 하는 건지 감이 오지 않았다. 코드도 config, setup, actions로 나뉘어있었다. 일단 하나씩 넣고 실행시켜봤다. console 창에 에러 메시지를 보면서 조금씩 수정해나갔다. 데이터가 들어가는 자리에 숫자도 넣어보고 문자열도 넣어보고 배열도 넣어보고 그랬다. 화면에 차트가 안 나타나는 문제도 있었다. 검색하다 스택오버플로우의 질문이 눈에 띄었다. 나처럼 chart.js에서 비슷한 차트를 만드는 사람이었는데, 자기 코드를 보여주면서 화면에 차트가 안 나온다고 질문했다. 그 코드에서 힌트를 얻어 적용했더니 구현에 성공했다.

 

단위를 조정하는 편이 좋을 거 같은 생각이 들지만, 우선 다음 단계로 넘어간다.

 

이제 검색을 손 볼 때가 왔다. 지금까지는 고유의 종목번호를 입력해서 검색했다. json 통신에 고유번호가 사용되기 때문이다. 일반 포털 검색이 그렇듯 종목명을 검색해도 관련 데이터를 찾아와야 한다. 오픈 DART는 이 데이터를 XML 형식으로 제공하고 있다. 앞서 XML 파일도 다운받아놨는데, 지금 보니 파일을 프로젝트에 넣어서 사용하는 것보다 API를 통해 그쪽 서버에서 받아오는 방법을 궁리해봐야겠다.

---

알게 된 것

• chart.js 구현 형식

모르는 것

• 3년치 이상의 데이터 시각화(json에서 요청 연도 기준 3년 치만 제공함)

해결할 문제

• 종목명으로 검색 구현(xml 데이터 받아와서 처리)

---

웹페이지 만들기 깃허브 링크(포스팅 시점)

프로젝트 결과물 | 느낀점