[TIL] Typescript 세팅 + Chart.js, React 로 리포트 만들기

리액트와 타스로 리포트 만들기 시작!

타스 처음 써본다!!

 

새로운 프로젝트 생성

npx create-react-app "이름" —template typescript

npm i --save react react-dom typescript
npm i --save-dev @types/react @types/react-dom @types/node

나는 여기서 원격 리포지토리와 연결함

git remote add origin https://github.com/123456soobin-choi/adCampaign.git

git branch -M main

git push -u origin main

npm start로 빌드하고 시작해도 tsconfig.json이 생기지 않았다.

npx tsc --init

이렇게 하면 tsconfig.json 컴파일러가 생김

 

compilerOptions 매우 많다!

주석 해제한 항목들

    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ] /* 컴파일 과정에 사용될 라이브러리 파일 설정 */
    "jsx": "preserve"  /* 생성될 JSX 코드 설정: 'preserve', 'react-native', or 'react'. */
    "module": "commonjs" /* 생성될 모듈 코드 설정: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "moduleResolution": "node" /* 모듈 분석 방법 설정: 'node' (Node.js) 또는 'classic' (TypeScript pre-1.6). */
    "baseUrl": "./src" /* 절대 경로 모듈이 아닌, 모듈이 기본적으로 위치한 디렉토리 설정 (예: './modules-name') */
    "resolveJsonModule": true, // ts 파일에서 json imoprt 허용
    "allowJs": true /* JavaScript 파일 컴파일 허용 */
    "noEmit": true /* 출력 방출(emit) 유무 설정 */
    "isolatedModules": true /* 각 파일을 별도 모듈로 변환 ('ts.transpileModule'과 유사) */

tsc 가 확인해주는 것은 설정에 따라서 type이 올바르게 작성돼 있느냐이지 
내가 원하는데로 코드를 작성했는가를 확인해주지는 않는다.

 

그러므로 eslint & prettier 설정이 필요함.

우선 eslint 설정

npm install -D eslint
npx eslint --init

옵션들 설정해야 함

npm i -D eslint typescript eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin

그리고 .eslintrc.json 설정

  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": "off" // function에 return 타입을 명시해야하는 rule 해제
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }

그 외 추가한 규칙

    "linebreak-style": 0, // 개행
    "import/prefer-default-export": 0, // export default prefer 규칙 해제
    "import/extensions": 0, // ts 파일을 불러오기 위해
    "no-use-before-define": 0, // 정의 전에 사용 금지
    "import/no-unresolved": 0, // import로 가져온 파일 혹은 모듈이 unresolved가 되지 않도록 하는 옵션
    "react/react-in-jsx-scope": 0, // React를 import하지 않고 사용하려고 할 때 경고하는 규칙 해제
    "import/no-extraneous-dependencies": 0, // 테스트 또는 개발환경을 구성하는 파일에서는 devDependency 사용을 허용
    "no-shadow": 0, // 상위에 선언된 변수 사용하지 못하는 규칙 해제
    "react/prop-types": 0, // props의 타입체크를 처리에 proptypes가 아닌 typescript 사용 예정
    "react/jsx-filename-extension": [
      2,
      { extensions: [".js", ".jsx", ".ts", ".tsx"] },
    ], // 확장자 설정
    "jsx-a11y/no-noninteractive-element-interactions": 0, // div 나 span 등 의미 없는 태그 role 속성 추가 강제 규칙 해제

*eslint에서 module is not defined 에러

  env: {
    browser: true,
    es2021: true,
    node: true,
  },

이렇게 node: true, 써주면 됨

 

prettier 설정

npm install -D prettier

.prettier 파일 만들고

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "arrowParens": "always",
  "orderedImports": true,
  "bracketSpacing": true,
  "jsxBracketSameLine": false
}

추가하면 개발환경 설정 끝

 

이 시점에서 첫 commit 해주고

 

깃허브 페이지에 배포하기

npm install --save gh-pages

package.json. 을 열어서

  양식
  "homepage": "https://유저이름.github.io/저장소이름"
  
  예시
  "homepage": "https://123456soobin-choi.github.io/adCampaign"

homepage에 대한 정보를 입력해주어야 한다.

 

scripts에서는 아래 두 줄 추가

    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",

npm run build 하고 123456soobin-choi.github.io/adCampaign 페이지에 접속하면 404 not found 가 떴다.

 

Github Pages에서 Branch에 gh-pages 추가

npm run deploy

이렇게 하면 gh-pages가 생김

다시 페이지에 접속하면 정상 확인됨.

*나중에 이력서를 github page로 만들면 예쁠 것 같다.

 

MUI 도 써볼래~

npm install @mui/material @emotion/react @emotion/styled

 

과제는 리액트로 광고 정산 리포트를 만드는 것이다.

리포트는 차트와 표 형태로 구성됨.

차트 라이브러리에는 echats, visx, plotly.js, chart.js 등이 있다.

canvas 기반 chart.js 가 가장 크기가 작고 8가지 유형의 차트에 애니메이션도 적용됨.

 

Chart.js 와 Chart-2 모두 설치

리액트에서 Chart.js를 사용하려면 chart.js 뿐만 아니라 리액트에서 Chart.js를 렌더링하기 위해 필요한 
react-chartjs-2도 설치를 해야 합니다.

npm install react-chartjs-2 chart.js

지금까지 구현한 코드

// import { useState, useEffect } from 'react';
import { Bar } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
  Filler,
} from 'chart.js';
import styled from 'styled-components';

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
  Filler,
);

export const options = {
  responsive: true, // 반응형
  maintainAspectRatio: false, // 창 크기에 따라 크기가 바뀌던 하위 div가 상위 div에 구속됨
  interaction: {
    mode: 'index',
    intersect: false,
  }, // 마우스 위에 올렸을 때 보여줄 interaction
  plugins: {
    legend: { position: 'bottom' }, // 범례
    title: {
      display: true,
      text: 'Total', // 차트 제목
      font: {
        size: 20,
      },
    },
  },
  // x축과 y축 크기
  scales: {
    x: {
      grid: {
        display: false,
      },
    },
    y: {
      grid: {
        color: '#E3E3E3',
      },
    },
  },
};

const Chart = ({ chartData }) => {
  const data = {
    labels: ['구독하기', '간편참여', '게임하기'], // 차트 항목들
    datasets: [
      {
        data: chartData,
        borderColor: '#F1B0BC',
        backgroundColor: '#97CDBD',
        barThickness: 80,
      },
    ],
  };

  return (
    <StChartWrapper>
      <h3>캠페인별 수익 비율</h3>
      <StChartContainer>
        <Bar data={data} options={options} />
      </StChartContainer>
    </StChartWrapper>
  );
};

export default Chart;

const StChartWrapper = styled.div`
  width: 100%;
`;

const StChartContainer = styled.div`
  width: 90vw;
  max-width: 900px;
`;

이제 url을 호출해서 데이터를 보여주는 작업을 해야 한다.

크게 월별, 캠페인별 성과 두 가지로 보여주는 것 같다.

 

 

✔️ 대용량 처리 고려 방법은 프로젝트 완성하고 생각해보자

1. 성능 최적화

React에서는 성능 최적화를 위한 여러 가지 기능을 제공합니다. 이를 사용하여 불필요한 렌더링을 방지하고, 렌더링 시간을 최적화할 수 있습니다. React.memo, shouldComponentUpdate 등을 사용하여 성능을 향상시킬 수 있습니다.

2. 비동기 처리

React에서는 비동기 처리를 위한 여러 가지 라이브러리가 존재합니다. 이를 사용하여 데이터를 비동기적으로 가져오고 처리할 수 있습니다. Axios, Fetch 등을 사용하여 비동기 처리를 수행할 수 있습니다.

3. 코드 분할

React에서는 코드 분할을 통해 초기 로딩 속도를 개선할 수 있습니다. React.lazy와 Suspense를 사용하여 코드 분할을 수행할 수 있습니다.

4. 최적화된 데이터 구조

TypeScript에서는 데이터 구조를 최적화하여 처리 속도를 향상시킬 수 있습니다. Immutable.js와 같은 라이브러리를 사용하여 데이터 구조를 최적화할 수 있습니다.

 

*참고글

CRA + Typescript 개발환경 설정

https://velog.io/@junghyeonsu/React-create-react-app-Typescript-%EC%B4%88%EA%B8%B0-%EC%84%B8%ED%8C%85-%EC%99%84%EB%B2%BD-%EC%A0%95%EB%A6%AC

[React] create-react-app & Typescript 초기 세팅 완벽 정리

https://velog.io/@xortm854/Typescript-React-Webpack-%ED%99%98%EA%B2%BD%EC%84%A4%EC%A0%95-2%ED%8E%B8-tsconfig-%EC%84%A4%EC%A0%95%EC%9D%84-%ED%95%B4%EB%B3%B4%EC%9E%90

[Typescript & React & Eslint 환경설정 1편] tsconfig 설정을 해보자

https://velog.io/@dbsskdud60/Today-I-Learned-kg8lzk61

Today I Learned

https://velog.io/@haleyjun/React%EB%A1%9C-typescript-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%83%9D%EC%84%B1-%EB%B0%8F-%EC%B4%88%EA%B8%B0%EC%84%A4%EC%A0%95

React로 typescript 프로젝트 생성 및 초기설정

 

tsconfig.json 설정

https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-tsconfigjson-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-%EC%B4%9D%EC%A0%95%EB%A6%AC

[TS] 📘 타입스크립트 컴파일 설정 - tsconfig 옵션 정리

https://velog.io/@sooran/tsconfig.json-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%95%8C%EA%B3%A0-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

{ tsconfig.json } 제대로 알고 사용하기

https://yamoo9.gitbook.io/typescript/cli-env/tsconfig

컴파일 설정 - TypeScript Guidebook

 

eslint 와 prettier 설정

https://yelee.tistory.com/59

[ESLint] module is not defined 오류 제거 방법

https://gingerkang.tistory.com/98

[React] TypeScript와 ESLint, Prettier 설정하기

https://mui.com/

MUI: The React component library you always wanted

 

Chart.js

https://www.chartjs.org/docs/latest/

Chart.js | Chart.js

https://velog.io/@treejy/React%EC%97%90%EC%84%9C-Chart.js-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-with-TypeScript

React에서 Chart.js 사용하기 (with TypeScript)