간단하게 막대 그래프 만들어보기

zep에서 동기들과 각자 학습을 진행하던 중 혼자 뜬끔없이 그래프를 만들어보고 싶다고 얘기했습니다.

그러면 각자 그래프의 길이 값 상태를 어떻게 관리해야할까 했는데 객체로 만들어서 한다는 얘기를 듣고 시도해보고 싶어졌습니다.

자바스크립트를 강의를 시작한지 1주차 상태라 그냥 시각적으로 표현하는 것에 일단 의의를 두었습니다.

( 어려워요 자바스크립트 😹 )

 

어떻게 코드를 작성해보았냐면

const graphWidths = {
  button1: 0,
  button2: 0,
  button3: 0,
};

1. graphWidths 라는 객체에 각각 button1, 2, 3 이라는 key와 value를 property로 작성해 사용할 그래프의 값을 만들어 주었습니다.

function increaseValue(button) {
  graphWidths[button] += 5;
  updateGraph(button);
}

1. increaseValue(button) 이라는 함수를 만들어 버튼들 중 하나 ( button1, 2, 3 ) 를 클릭할 때 호출되게 했습니다.
2. (button) 은 파라미터를 받을 때 버튼 식별자를 뜻합니다. ( button1, 2, 3 ) 
3. graphWidths[button] += 5; 는 객체에서 해당하는 key값의 value에 5를 증가시켜줍니다.
4. 그 후 updateGraph 함수를 호출하여 해당하는 버튼의 그래프의 시각적 너비를 업데이트 시켰습니다.

function resetGraphs() {
  graphWidths.button1 = 0;
  graphWidths.button2 = 0;
  graphWidths.button3 = 0;
  updateGraph('button1');
  updateGraph('button2');
  updateGraph('button3');
}

1. 위 함수는 Reset 버튼이 클릭될 때 호출됩니다.
2. graphWidths 객체 내의 키의 값을 0으로 재설정합니다.
3. 그런 다음 각 버튼의 그래프에 대해 updateGraph 함수를 호출하여 그래프들의 시각적 너비를 초기화시킵니다.

function updateGraph(button) {
  const graph = document.getElementById(`graph-${button}`);
  graph.style.width = graphWidths[button] * 20 + "px";
}

1. 위 함수는 객체 내의 키의 값에 기반해 그래프의 시각적 표현을 업데이트 해주는 함수입니다.
2. document.getElementById 를 사용하여 해당 그래프에 대한 HTML 요소를 가져옵니다.
3. 그 다음 그래프 요소의 너비를 graphWidths 객채 내에서 해당하는 그래프의 값에 20을 곱하여 지정해줍니다.

그래프 ? 라고 말할 수 있는지는 모르겠지만 그래도 머릿속으로 상상한 대로

( 버튼을 누르면 해당 그래프가 시각적으로 나타난당 ㅎ )

 

구현할 수 있었습니다. 그래도 이렇게 순수한 즐거움으로 배움을 가지는 것은 재밌네요.

지금은 바보처럼 이런거에 만족했지만 나중에는 EChart, Chart.js, D3.js 등도 사용해서 그럴싸하게 만들어봐야겠습니다.

 

그래도 블로깅하며 본인이 작성한 자바스크립트 코드들이 무엇이고 무엇을 위한 기능인지, 어떻게 작동하는지

한 번더 정리하면서 작성해보니 한 번 더 공부 및 이해가됩니다 ! 😸

 

+ 추가사항 )

const graphButtons = ["button1", "button2", "button3"];
function resetGraphs() {
  graphButtons.forEach((button) => {
    graphWidths[button] = 0;
    updateGraph(button);
  });
}

 

저의 빛나는 동기 승찬님께서 코드를 봐주시고 개선된 코드를 제시해주셨습니다. 🤗

초기화 기능을 해주는 함수 부분에서 forEach문을 사용해 무식하게 한 줄씩 작성한 코드를 보완.

forEach 함수는 주어진 배열을 처음부터 끝까지 순회하며 작동하기 때문에

주어진 배열의 요소를 하나씩 돌며 graphWidths의 프로퍼티 값 변경과 update 함수를 호출해줍니다.

훨씬 더 코드의 작동이나 효율성이 개선되었습니다.

 

혼자 공부하지 않으니 이렇게 코드 리뷰 및 리팩토링을 비슷하게 체험할 수 있군요 👍