매일 공부한거 기록하기

M A T E R I A L - U I MUI란? material UI가 버전이 변경되면서 MUI로 이름이 변경되었다. 간단하게 React를 위한 UI라이브러리! 부트스트랩같은거라고 생각하면 되려나 :) Material UI is a library of React UI components that implements Google's Material Design. 구글 Material Design을 구현하는 React UI 컴포넌트 라이브러리 입니당! 공식문서 https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React co..

Array of objects 2개를 비교하려고 할때 이렇게 하면 된다.. 난 삽질을 했군아 const products = [ {ulid: 1, price : 1000, name : "a" }, {ulid: 2, price : 2000, name : "b" }, {ulid: 3, price : 3000, name : "c" }, {ulid: 4, price : 4000, name : "d" } ] const best = [ {ulid : 3 } ] const result = products.filter(({ ulid: value }) => best.some(({ ulid: value2 }) => value === value2) ); console.log(result); //[{ ulid:3, price:..

1. pages폴더 안에 파일을 만들면 그 파일명이 경로가 된다 이렇게 pages폴더 밑에 폴더를 만들면 폴더 명이 경로가 된다. 경로 이동을 해서 보여줄 파일을 만든다. 2. 경로 이동이 필요한 파일에 next/link로부터 Link를 import 시켜준다. import Link from "next/link"; 3. 로 감싸주고 href 로 경로를 정해준다. 그리고 태그로 감싸준다. click to brand! 4. Next.js공홈에 자세히 나와있다! https://nextjs.org/docs/api-reference/next/link

2023.02.02 - [Frontend/React] - React에서 setInterval() 과 useInterval()무엇을 써야할까 React에서 setInterval() 과 useInterval()무엇을 써야할까 setInterval()을 사용해서 자동으로 이미지가 넘어가는 carousel을 만들려고 했다^^... imgIndex를 하나씩 넘겨주고 마지막 인덱스라면 다시 0으로 보내는 간단한 기능이다. const autoSlide = () => { setImgIndex(im diary-of-lemon.tistory.com 위의 글 처럼 예상되로 동작하지 않는 상황이었다. useEffect에서 함수를 실행시켜주고, 실행이 끝날때마다 setInterval함수의 ID를 clear해줬다. setInte..

setInterval()을 사용해서 자동으로 이미지가 넘어가는 carousel을 만들려고 했다^^... imgIndex를 하나씩 넘겨주고 마지막 인덱스라면 다시 0으로 보내는 간단한 기능이다. const autoSlide = () => { setImgIndex(imgIndex + 1); if (imgIndex === imgData?.length - 1) { setImgIndex(0); } }; delay도 만들고 setInterval()로 하면 되지 않을까 생각했다^^.. const [delay, setDelay] = useState(1000); setInterval(autoSlide, delay); 근데 이게 어떻게 되냐면 1초 간격으로 잘 넘어가다가 1,2 -> 1,2 -> 1,2 -> 1,2 -> ..

Carousel을 직접 구현하려고 했을때 React에서 어떤걸 쓰는게 더 적합할지 고민했다. 우선 1. setTimeout() 2. setInterval() 두개를 생각했다. 우선 비교해보자. setTImeout() : delay 된 시간만큼 기다린 후에 function을 실행한다. 일정 시간이 지난 후에 함수를 실행한다. const timeoutId = setTimeout (function[,delay,arg1,arg2,...] ); //종료 clearTimeout(timeoutId); 1. setTimeout은 timeoutId를 리턴한다. 따라서 timeoutId로 생성한 타이머를 식별할 수 있다. clearTImeout()에 전달해 타이머를 취소 할 수 있다. 2. 함수를 실행하지 않고 넘겨야한다..

요렇게 `cal( )` 자체로 넣어주면 된다 ~~ 구냥 까먹을까 한번 더 써놓기

isLoading isFetching 언제 써야할까? isLoading은 쿼리 전체적인 상태를 가리키는것이고, 초기 로드를 포함한다. 반면에 isFetching은 쿼리가 오직 refetched될때만 가리킨다. 처음 data를 받아올땐 isLoading이 true가 되고 그 후에 다시 refetch한다면 isFetching이 true가 되는것이다.

id별로 data를 가져오려고 했다. 모든 data를 가져오는 query처럼 singleAPI에 id만 넘겨주면 될거라고 생각했으나..^^.. useQuery(QUERY_KEYS.PRODUCT,getSingleProductAPI(id)); Missing queryFn error 가 발생했다 위에 코드는 useQuery에 funtion을 전달하지 않고, 함수를 실행하는 것이였다. const {data: singleProduct} = useQuery( [QUERY_KEYS.PRODUCT, productId], () => getSingleProductAPI(productId) ); 이렇게 querykey에 의존성배열로 만들어주고 , () => api(param)을 넘겨주면 된다 ! 키키 틀리면 지적 환영

zzzz.ts파일에서 tsx파일을 import할때 생긴 에러이다. 이때 ts파일을 tsx파일로 수정해주면 된다