언어 토글시 차트 업데이트 기능 구현(algoview)

내일 회의 안건

• 마크업: 뎁스 추가할지? section→section→article→canvas
  • 각 차트별 제목 태그 필요
• json 파일 하나로 통합(상수인 url 관리와 서버 요청 최소화를 위함)
• issue: chartPage 언어 토글시 차트 업데이트
• 현재 동작 방법: 마크업의 canvas 태그를 가져와서 그 안에 chart 클래스를 생성함
• 문제:
  1. chart를 업데이트하려면
     → 기존 차트 내부의 배열에서 label, data를 일일이 pop해야 함
     → 그 다음 아래 함수로 chart, label, data를 일일이 push해야 함
     function addData(chart, label, data) {
     // 프로퍼티 값 변경 chart.data.labels = label;
     chart.data.datasets.data = data;
     // 차트 업데이트
     chart.update(); }
  2. 혹은 chart가 담긴 canvas를 삭제하고 재생성해야 함. 이 때 각 파트 분들이 canvas dom 요소를 생성하고 id를 달고 article에 append 해주셔야 함
  3. 마크업을 지우고 각자가 js로 dom 요소를 생성하는 방법이 있음. 이 땐 append 순서로 대혼란이 올 듯함
  4. 최종적으로 선택한 방법은 chart.destroy() 메서드를 쓰는 것. 다수의 중복 작업을 막고자 했지만 chart라는 객체가 지정되어야 하므로 이것만은 어쩔 수 없이 일일이 해주셔야 함
     • 함수를 쓸 수 있는지는 차트 코드 직접 확인 필요
     • 테스트시 problemTypeChart, companyChart는 정상 동작하지만 같은 카테고리 내에 언어에 따라서 사용 안 되는 canvas가 있을 시 레이아웃이 깨질 수 있음. css 작업 필수
• issue: js 모듈화(중복 코드를 줄이고 가독성과 유지 보수를 위해 함수형 프로그래밍 적용)
  • 비모듈화: 코드는 길고 못생겼지만 단순해서 처음 작성할 때 편함. 여러 사람이 한 파일에서 작업하기 때문에 문제가 생기기 쉽고, 에러나도 문제가 되는 부분이나 로직 파악이 어려움
  • 모듈화: 함수형으로 짜두어서 작성이 어려워보일 수 있으나 읽는 입장에서는 가독성 좋도록 구성하였음. 각 차트를 카테고리별로 한 js 파일에 넣을지 뎁스를 더 줄지 고민 중. 최종적으로 chartpage 내에 6개의 함수가 import 됨
• js로 canvas 돔 요소 생성(HTML의 수정이 빈번하여 협업시 혼란 발생의 여지가 있음)
• 차트 작성과 CSS 작업 투 트랙

 

혼자 하는 프로젝트가 아닌지라 가독성과 코드 난이도, 중복 작업 최소화 사이에서 균형을 잡느라 생각보다 고민을 많이 했다. 단순하게 짰다가 개인적인 욕심으로 모듈화를 포기할 수가 없어서 추가로 리팩토링. 내일 잘 설명을 드려야 할텐데 자신이 없군...