내배캠 TIL 2023.02.28

 

지도 바운드 재설정하기

https://react-kakao-maps-sdk.jaeseokim.dev/docs/sample/map/setBounds

지도 범위 재설정 하기 | react-kakao-maps-sdk docs

const ListMap = ({ course }: ListProps) => {
  const courseList = JSON.parse(course.courseList);

  const [map, setMap] = useState<kakao.maps.Map>();

  let Arr: PositionType[] = [];
  courseList.forEach((point: CourseListType) => Arr.push(point.position));

  const bounds = useMemo(() => {
    const bounds = new kakao.maps.LatLngBounds();

    Arr.forEach((point) => {
      bounds.extend(
        new kakao.maps.LatLng(Number(point.lat), Number(point.lng))
      );
    });
    return bounds;
  }, [courseList]);

  useEffect(() => {
    if (map) map.setBounds(bounds);
  }, [Arr]);

  return (
    <Map // 지도를 표시할 Container
      center={{
        // 지도의 중심좌표
        lat: courseList[0].position.lat,
        lng: courseList[0].position.lng,
      }}
      style={{
        // 지도의 크기
        width: "300px",
        height: "300px",
      }}
      level={8} // 지도의 확대 레벨
      onCreate={setMap}
      draggable={false} //드래그 금지
      zoomable={false} //줌 금지
    >
      <ListMapMarker courseList={courseList} />
    </Map>
  );
};

 

progressive image 만들기

 

튜토리얼

https://velog.io/@eunbinn/progressive-image-loading-react-tutorial

[번역] 리액트로 점진적 이미지 로딩 구현하기: 튜토리얼

 

저용량 이미지 만드는 사이트

https://www.iloveimg.com/ko

iLoveIMG | 쉽고 빠른 온라인 무료 이미지 편집 툴

 

 

스켈레톤 ui 만들기

 

npm 문서

https://www.npmjs.com/package/react-loading-skeleton

react-loading-skeleton

 

 

검색 페이지에서 일어나는 layout shift를 줄여주기 위해서 min-h를 넣어서 검색된 게시물이 없더라도 어느 정도 공간은 확보되도록 해놓았다.

 

방법을 참고한 페이지

https://www.smashingmagazine.com/2021/06/how-to-fix-cumulative-layout-shift-issues/

How To Fix Cumulative Layout Shift (CLS) Issues — Smashing Magazine

 

styled component에서 호버했을 때 밝기 조절하는 코드

&:hover {
  filter: brightness(150%);
}

 

https://velog.io/@hanbok159/tailwindcss-%ED%8F%B0%ED%8A%B8%EC%A0%81%EC%9A%A9

tailwindcss 폰트적용

tailwind.config.ts 와 index.css에다가 global css 정리 후 사용

extend 안에 넣으면 기존에 있던것에 추가가 되는 것이고, 그냥 밖에 있는 것은 완전히 새로 설정하는 것이다. 

//tailwind.config.js

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}"],
  darkMode: false, 
  theme: {
    extend: {
      screens: {
        "3xl": "1700px",
        sm: "414px",
        xs: { min: "375px", max: "414px" },
      },

      colors: {
        error: "#B3261E",
        like: "#EC6762",
        correct: "#50AA72",
        gray: {
          "00": "#FBFBFB",
          "01": "#F7F8F9",
          "02": "#E9EBED",
          "03": "#CBCDD2",
          "04": "#A0A4A8",
          "05": "#474C51",
          "06": "#262829",
        },
      },
    },

    fontFamily: {
      sans: ["noto-sans-cjk-kr", "sans-serif"],
      eng: ["Montserrat", "sans-serif"],
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

//index.css

@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap");
@layer utilities {
  html {
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
  }

  .display1 {
    font-weight: 700;
    font-size: 100px;
    line-height: 100px;
    letter-spacing: -0.25px;
  }
  .display2 {
    font-weight: 700;
    font-size: 57px;
    line-height: 80px;
    letter-spacing: -0.25px;
  }

  .title1 {
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.25px;
  }

     .loading {
      filter: blur(10px);
      clip-path: inset(0);
    }
    .loaded {
      filter: blur(0px);
      transition: filter 0.5s linear;
    }
  }
}

 

 

한글 폰트를 적용하기 위해 public 안의 index.html에 adobe에서 복사한 script를 넣어주었다

 

영어 폰트는 index.css에 import 해주었다 .

 

기본 폰트를 전체적으로 변경하고 싶으면은 tailwind.config.ts 안의 font-family에서 sans 안에 있는 폰트를 바꿔주면 된다. 

 

 

inline-height란 정확히 뭔가?

https://m.boostcourse.org/cs120/lecture/92923

비전공자를 위한 HTML/CSS

 

 

typescript에서 styled - component에 props 내려주기 

 

https://thsd-stjd.tistory.com/134

Styled-component typescript Props 받기

나는 상황에 따라 밝기를 다르게 해주고 싶어서 이렇게 코드를 작성하였다.

const StMap = styled.div<{ category: string }>`
  opacity: 0%;
  ${(props) => (props.category === "MY" ? "filter: Brightness(20%)" : null)};
`;