[Toy project] 국내 신입 프론트엔드 개발자를 위한 통계

국내 신입 프론트엔드 개발자를 위한 통계

원티드에서 신입 프론프엔드 개발자 채용공고에 가장 많이 언급된 기술을 보여주는 페이지입니다.

📆 프로젝트 기간
2022.11.16 ~ 2022.11.17

Why?

요즘 어떤 프론트엔드 프레임워크가 취업시장에서 유리할까? 라는 생각으로 시작하게 되었고,
신입 프론트엔드 개발자에게 어떤 기술들을 요구하는지 한눈에 보고싶어 만들게 되었다.

Teck Stack

React, Recoil, Styled-components, Apexcharts

Custom Chart Example

import Chart from "react-apexcharts";
import { frontLabelObj } from "../../common/options";

const DonutChart = ({ labels, series, title = "", subTitle = "" }) => {
  const chartOptions = {
    chart: {
      type: "donut",
    },
    labels,
    colors: [
      "#ff6633",
      	... ...
    ],
    stroke: { show: true, width: 3, colors: ["#27282c"] },
    legend: {
      show: true,
      width: 200,
      offsetY: 85,
      offsetX: -20,
      labels: {
        colors: "#ffffff",
      },
      formatter(value, options) {
        const {
          seriesIndex,
          w: {
            globals: { series },
          },
        } = options;
        return `${seriesIndex + 1}. ${frontLabelObj[value]} (${
          series[seriesIndex]
        }) `;
      },
    },
    // title, subtitle은 svg외부로 분리함
    title: {
      text: title,
      align: "left",
      margin: 30,
      style: {
        fontSize: "20px",
        color: "#fff",
      },
    },
    subtitle: {
      text: subTitle,
      floating: true,
      offsetY: 40,
      style: {
        color: "#fff",
        fontSize: "14px",
        fontWeight: "bold",
      },
    },
    plotOptions: {
      pie: {
        dataLabels: {
          minAngleToShowLabel: 9,
        },
        offsetY: 20,
        donut: {
          labels: {
            show: true,
            total: {
              show: true,
              color: "#ff6633",
              fontSize: "22px",
              fontWeight: "bold",
              label: "Total Company",
            },
            name: {
              color: "#ff6633",
              formatter: (value) => {
                if (value === "isAll") return "All Select";
                return frontLabelObj[value];
              },
            },
            value: {
              color: "#fff",
              fontWeight: "600",
            },
          },
        },
      },
    },
    dataLabels: {
      formatter(value, options) {
        return value.toFixed(1) + "%";
      },
    },
    tooltip: {
      x: { show: false },
      y: {
        formatter(value, options) {
          return `${
            frontLabelObj[options.globals.labels[options.dataPointIndex]]
          }: ${value}`;
        },
        title: {
          formatter: () => "",
        },
      },
      fillSeriesColor: false,
    },
  };

  return (
    <Chart options={chartOptions} series={series} type="donut" width={600} />
  );
};

export default DonutChart;

🧑🏻‍💻 Later

1. 주기적인 데이터 수집을 자동화 (lambda, cloudwatch)
2. 데이터 수집이 쌓인 뒤, 기간별 결과 보여주기
3. chart animation이 동시에 실행되는것을 분리

📌 한 줄 회고

형식에 맞춰 데이터를 끼워넣을 것인가, 직접 고생하여 만들것인가? 그것이 문제로다🤔