게이지 차트/바 만들기

자기소개 페이지를 계속 만들고 있다. 계속 다양한 기능과 해보지 못했던 것들을 추가하면서 재미도 조금씩 채우고 있다. 오늘은 그 중에서 게이지 차트/바를 만드는 작업을 진행했다.

Skill

나는 Resume 페이지의 Skill란을 만들고 싶었다. 이를 어떻게 만들까 고민하다가 다른 사람들이 만든 페이지에서 영감을 얻어 만들었다.

결과

우선 결과를 보여주면 아래와 같다.

Skill을 Front/Back/Database로 나누어 표현했다. 내용을 아직 제대로 채우지는 않았지만 틀은 만족스럽다. 이를 만드는 과정을 하나하나 적어보려 한다.

nivo

링크 : https://nivo.rocks/

우선 차트/바는 nivo라는 홈페이지에서 필요한 차트/바를 찾아서 컴포넌트로 만들어 활용했다. Nivo는 React 기반의 데이터 시각화 도구로, 사용자가 다양한 차트와 그래프를 생성하고 사용자 인터랙션을 추가할 수 있는 기능을 제공해주는 라이브러리다.

이 사이트를 선택한 이유는 우선 다양한 종류로 시각화를 할 수 있는 것들을 지원해준다. 그리고 커스터마이징이 용이하다는 장점이 있다. 그래서 다른 사람들도 많이 이용하고, 나 또한 이를 활용해서 이번 Skill란을 채웠다.

<ResponsiveRadialBar
  data={data}
  valueFormat=">-.2f"
  padding={0.4}
  cornerRadius={2}
  margin={{ top: 40, right: 120, bottom: 40, left: 40 }}
  radialAxisStart={{ tickSize: 5, tickPadding: 5, tickRotation: 0 }}
  circularAxisOuter={{ tickSize: 5, tickPadding: 12, tickRotation: 0 }}
  legends={[
           {
             anchor: "left",
             direction: "row",
             justify: false,
             translateX: -40,
             translateY: 130,
             itemsSpacing: 6,
             itemDirection: "left-to-right",
             itemWidth: 100,
             itemHeight: 18,
             itemTextColor: "#999",
             symbolSize: 18,
             symbolShape: "square",
             effects: [
               {
                 on: "hover",
                 style: {
                   itemTextColor: "#000",
                 },
               },
             ],
           },
           ]}
/>

nivo 코드는 위와 같다. 이런 코드를 사용하는데 문서가 잘 되어 있어서 이해하면서 나에게 필요한 형태로 커스터마이징 할 수 있었다.

코드

이번에 이를 활용하기 위해서 내가 짠 코드 순서는 다음과 같다.

1. 차트/바 컴포넌트화
2. Skill 컴포넌트 & 차트 연결
3. Resume와 Skill 연결
4. ResumeContents 화면 렌더링
5. json 데이터 연결

git : https://github.com/leeyulgok/yulgok-page

이런 순서로 Skill란을 만들었다. 처음부터 만들 수 있었던 건 아니고 계속되는 오류와 해결방안을 고민했기 때문에 만들 수 있었다.

정리하기

nivo라는 라이브러리를 통해서 간단하게 게이지 차트/바를 만들어보았다. 계속해서 무언가를 만들어 봄으로써 확실하게 실력이 늘고 있다는 생각이 든다.

또한 이전에는 컴포넌트를 구성할 때, 전체 코드를 다 짜고 난 후 컴포넌트를 나눴다. 하지만 이제는 어떤 방식으로 컴포넌트를 나눠야 할 지 미리 생각하고 나눌 수 있게 되었다. 오늘로써 많이 이전에 비해서는 많이 성장했다고 느끼게 된 경험이었다.