[웹사이트 개발일지] 재무상태표 treemap 구현 문제 해결

jscharting 라이브러리를 이용한 재무상태표 시각화에 성공했다. 파라미터에 변수를 넣을 때 오류가 발생하는 문제를 해결했다. 이유는 예상했던 대로 데이터 타입이 다르기 때문이었다. Number 타입을 넣어줘야 하는 자리에 String 타입을 넣어주고 있었다.

 

문제가 발생했을 때 검색하기 전에 잠시라도 곰곰이 생각해보는 게 효과가 있는 거 같다. 왜 안될까. 이것도 문제 없고 저것도 문제없고. 이것과 비슷한 패턴인 위 코드에서는 됐는데. 하는 식으로 말이다. console.log를 찍어보는 것도 효과가 있었다. 여기까지는 코드가 잘 먹는데, 이 뒤부터는 안되네. 이런 식으로 하나씩 찍어보니 정답에 가까워졌다.

시각화 코드를 구현하기 시작한 뒤로는 라이브러리가 무엇인지 조금씩 깨닫고 있다. 맨땅에 해야했다면 많은 시간과 노력을 쏟았어야 할 것들. 그것들을 완성된 제품 형태로 제공하는 라이브러리의 효용에 감탄하는 한편, 이 정도로 떠먹여 주는 라이브러리를 사용하는 것조차 애를 먹고 있는 나에 대한 연민이 동시에 느껴진다.

---

알게 된 것

• javascirpt 쉼표(,) 표현식 활용해 제거
• API로부터 받아 변수에 담은 String 데이터와 이를 필요에 맞게 Number 형태로 변환하는 과정

모르는 것

• treemap의 css 지정
• chart.js 복합(bar, line) 그래프 구현

해결할 문제

• 매출, 영업이익, 당기순이익 등 실적 복합(bar, line) 차트 구현

 

---

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

프로젝트 결과물 | 느낀점