TIL : 최종프로젝트 17일차

react-select 스타일 변경

react-select 커스텀하는 방법을 못 찾아서, 스타일 변경이 어렵다고 생각했는데, 멀티 셀렉트를 커스텀하다가 select 창도 커스텀하는 방법을 알게 되었다. ( 공식페이지 codesandbox )

const colourStyles: StylesConfig<optionType, true> = {
    control: (styles) => ({ ...styles, borderRadius: "0" }),
    option: (styles, { isDisabled, isFocused, isSelected }) => {
      return {
        ...styles,
        backgroundColor: isDisabled
          ? undefined
          : isSelected
          ? "#000000"
          : isFocused
          ? "#000000"
          : undefined,
        color: isDisabled
          ? "#ccc"
          : isSelected
          ? "#000000"
          : isFocused
          ? "#ffffff"
          : "#000000",
        ":active": {
          ...styles[":active"],
          backgroundColor: !isDisabled
            ? isSelected
              ? "#000000"
              : "#A0A4A8"
            : undefined,
        },
      };
    }, // select 선택하는 부분 custom
    multiValue: (styles) => {
      return {
        ...styles,
        backgroundColor: "#000000",
      };
    },
    multiValueLabel: (styles) => ({
      ...styles,
      color: "#ffffff",
      paddingLeft: 10,
      fontSize: 16,
    }),
    multiValueRemove: (styles) => ({
      ...styles,
      color: "#ffffff",
      ":hover": {
        color: "#e4291f",
      },
    }),
  }; // 멀티 셀렉트 나타내는 부분 custom 

<Select
   .
   . 
   .
  styles={colourStyles}
 />

amplitude

: 사용자들이 수행한 이벤트와 그 속성값들을 수집하여, 사용자들의 행동기록을 수집하고 기록하여 분석할 수 있는 유저 분석 도구이다.
이렇게 수집한 데이터를 이용하여 데이터기반 의사 결정이 가능하며, 이 데이터들을 바탕으로 사이트를 개선하여 유저 경험을 향상시킬 수 있다.

1. 가입하기 ( amplitude 사이트 )
2. sdk 선택하고 프로젝트 만들기
3. 프로젝트 루트 컴포넌트에 init 코드 추가하기

import { initAmplitude } from "./utils/amplitude";
import "react-loading-skeleton/dist/skeleton.css";

useEffect(() => {
    initAmplitude();
  }, []);

4. 기록남기고 싶은 이벤트에 amplitude.track() 추가하기

import * as amplitude from "@amplitude/analytics-browser";

  useEffect(() => {
    amplitude.track("메인페이지 접속");
  }, []);

5. 이벤트들을 추가한 후, 왼쪽 위 Create New 버튼을 눌러 수집한 데이터로 차트생성이 가능하다.