킹미넴의 예민한 코드

빌드때마다 env파일의 주소를 바꾸지 않고 빌드하자.

1. 라이브러리 설치

// bash
npm i env-cmd

혹시 안되면 뒤에 —force

2. package.json > scripts에 명령어 작성하기

"build": "craco build", // 프로덕션으로 빌드
"build:dev": "env-cmd -f .env.development craco build", // dev로 빌드

혹시 에러뜨면 기존 빌드폴더를 프로젝트 폴더에서 삭제하고 다시 명령어 실행

3. 빌드생성

// bash
npm run build:dev

Cypress는 E2E테스트에 주로 활용하는데, cypress만으로도 유닛테스트도 충분히 가능하다.

둘중 하나를 한다, 둘 다 한다가 중요한것 보다 테스트코드를 작성한다.가 더 중요하다!

1. 라이브러리 설치

npm install --save-dev cypress

2. cypress.config.ts 자동생성 확인 및 baseUrl 지정

// 테스트를 실행할 baseUrl을 지정해주고, 해당 환경이 돌아가고 있어야한다.
// cypress.config.ts

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    baseUrl: "<http://localhost:3000>",
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

3. package.json에 실행 단축어 지정

"scripts": {
    "start": "craco start",
    ...
    "cypress": "npx cypress open"
  },

4. 실행 후, 자동 실행되는 GUI에 따라 cypress 실행

table형태로 정보를 보여주고 한 행을 선택할 수 있는 select를 만들어보기로 했다.

popper를 사용함

1. import

import Box from "@mui/material/Box";
import Popper from "@mui/material/Popper";

2. return에서 사용

<div onClick={(e: React.MouseEvent<HTMLElement>) => {
	setOpenTable((prev) => !prev);
	setAnchorEl(e.currentTarget);
}}>
	<Popper open={openTable} anchorEl={anchorEl} placement="bottom-end" sx={{ zIndex: "1500", position: "absolute" }}>
		<Box sx={{ bgcolor: "background.paper", overflowY: "auto", maxHeight: "250px", width: "fit-content" }}>
			<table>원하는 테이블 작성</table>
		</Box>
	</Popper>
</div>

div에 anchorEl를 걸고, 클릭할때 table을 open할 state를 따로 설정해서 open에 적어줍니다(openTable)

MUI의 Tooltip은 hover시에만 유지되고 요구사항에 맞지않는 점이 있어서 popper로 변경해보기로 하였다.

내가 원하는 모습 : 클릭으로  toggle하고, 유지되었다가 닫기 상호작용이 가능한 tooltip

1. import

import Popper from "@mui/material/Popper";
import CloseIcon from "@mui/icons-material/Close";

2. 사용하기

const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const tooltipOpen = Boolean(anchorEl);
...
<div onClick={(e) => setAnchorEl(anchorEl ? null : e.currentTarget)}>
	<Popper open={tooltipOpen} anchorEl={anchorEl} sx={{ zIndex: "1500", position: "absolute" }} placement="bottom-start">
		<div className="flex flex-row text-xs w-[200px] bg-white rounded-md shadow-md p-2 border border-solid mt-2">
			<div className="flex items-center justify-center p-1">{코멘트코멘트코멘트}</div>
				<div className="flex pl-2 text-gray-500 cursor-pointer hover:text-gray-700" onClick={() => setAnchorEl(null)}>
				<CloseIcon fontSize="small"/>
			</div>
		</div>
	</Popper>
</div>

주의할점은 popper가 나타날 주체인 아이콘이던 div던에 anchorEl을 걸어줘야 작동합니다.

저는 zIndex가 높은 div에서 작업했기때문에 별도로 z index를 보다 높게 지정했습니다.

MUI Tooltip을 커스텀없이 사용했을때의 모습

내가 필요한것 : 흰바탕에 검정글씨 툴팁

1. import

import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
import { styled } from "@mui/material/styles";

2. lightTooltip 별도 선언

- 함수 컴포넌트 외부에 선언해도 괜찮습니다

const LightTooltip = styled(({ className, ...props }: TooltipProps) => <Tooltip {...props} classes={{ popper : className }} />)(({ theme }) => ({
	[`& .${tooltipClasses.tooltip}`]: {
    	backgroundColor : theme.palette.common.white,
        color: "rgba(0,0,0,0.87)",
        boxShadow: theme.shadows[1],
        fontSize: 11,
        width: 150,
        lineHeight: 1.5,
       },
 }));

3. return 절에서 사용

<LightTooltip title ={툴팁에 들어갈 내용}></LightTooltip>

리액트 쿼리에서 특정 조건일때는 data를 불러오지 않도록 처리할 수 있다.

export const useData = (id: number) => {
  const query = useQuery(["data"], () => axios.get<DataType[]>(`{api주소}`).then((res) => res.data), {
    enabled: id === 0 ? false : true,
  });
  return query;
};

id를 넣어서 데이터를 불러오는데, 사용처에서 useEffect안에서 use훅으로 조건에 맞춰 데이터를 불러오는 동작을 할 수 없다보니 에러가 생긴다.

이럴땐 기본값이거나 데이터를 불러오는 동작을 하지 않고 싶을땐 의도적으로 id값을 0으로 설정해주고,

enabled를 추가하여서 id가 0이 아닐때만 동작하게 하도록 한다.

CSS이긴 한데, 현재 사용하는게 tailwind고 어떤 div에 어떤 css가 들어갔는지 확인이 한번에 되기 때문에 tailwind 기준으로 작성하도록 하겠다.

1. 맨 상위 컨테이너는 너비 높이를 설정한다.

2. 자식 컨테이너에 grow, overflow-hidden을 적용한다.

3. 그 컨테이너의 안에 overflow-y-auto를 넣어 스크롤이 생성되게 해준다.

이렇게 하면 grow를 해도 전체가 커지는게 아닌 그 안쪽에서 컨텐츠 너비에 맞춰 내용은 늘어나고, 스크롤이 생긴다.

<div className="w-10/12 h-full">
	<div className="grow overflow-hidden">
		<div className="w-full h-full overflow-y-auto">{내용}</div>
	</div>
</div>

import { t } from "i18next";
import React from "react";
import Chart from "react-apexcharts";

function TempertureGraph() {
  const series: ApexAxisChartSeries | ApexNonAxisChartSeries | undefined = [
    {
      name: "",
      data: [10, 20, 30, 40, 50, 60, 70, 80, 90],
    },
    {
      name: "",
      data: [20, 30, 40, 50, 60, 70, 80, 90, 100],
    },
    {
      name: "",
      data: [5, 15, 25, 35, 45, 55, 65, 75, 85],
    },
    {
      name: "",
      data: [90, 80, 70, 60, 50, 40, 30, 20, 10],
    },
    {
      name: "",
      data: [70, 60, 50, 40, 30, 20, 10, 5, 15],
    },
    {
      name: "",
      data: [40, 50, 60, 70, 80, 90, 100, 90, 80],
    },
    {
      name: "",
      data: [15, 25, 35, 45, 55, 65, 75, 85, 95],
    },
    {
      name: "",
      data: [50, 40, 30, 20, 10, 5, 15, 25, 35],
    },
  ];
  const options: ApexCharts.ApexOptions = {
    colors: ["#E41A1C", "#377EB8", "#4DAF4A", "#984EA3", "#FF7F00", "#FFD92F", "#A65628", "#F781BF"],
    chart: {
      // 구간확대 비활성화
      zoom: {
        enabled: false,
      },
      // download 버튼 비활성화
      toolbar: {
        show: false,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: "straight",
      width: 3,
    },
    xaxis: {
      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
    },
    legend: {
      show: false,
    },
    grid: {
      show: series.length !== 0,
    },
    noData: {
      text: "정보없음",
      style: {
        fontSize: "18px",
      },
    },
    states: {
      hover: {
        filter: {
          type: "lighten",
          value: 0.15,
        },
      },
    },
    tooltip: {
      shared: false,
    },
  };
  return (
    <div>
      <Chart type="line" width={"100%"} height={400} series={series} options={options} />
    </div>
  );
}

export default TempertureGraph;

암튼 타입이 문제여..