🤔Zod 가 무엇인가요? Zod is a TypeScript-first schema declaration and validation library. Zod는 타입스크립트 우선 스키마 선언 및 검증 라이브러리 입니다. 🤔왜 Zod를 사용하나요? 타입스크립트는 컴파일 시점에서 타입을 검사합니다. 런타임에 동적으로 생성되는 값과 타입스크립트의 타입 간의 불일치가 발생하여 에러가 발생할 수 있는데요, 이를 방지할 수 있는 라이브러리가 바로 Zod입니다. 아래와 같은 상황이 런타임에 동적으로 생성되는 값과 타입스크립트 타입 간의 불일치가 발생하는 코드의 예 입니다. interface User { id: number; name: string; } const Json = '{"id": 1323, "username":..
캐러셀(Carousel) 이란? 캐러셀은 회전목마라는 뜻인데요, 쉽게말해서 슬라이드라고 생각하시면 됩니다. 티빙, 넷플릭스 같은 곳과 핸드폰 화면에서 많이 쓰입니다. Swiper.js를 사용하는 이유? 이전까지는 Framer-motion으로 수동으로 캐러셀을 만들었습니다. 애니메이션을 넣는 것도 여간 힘든일이 아니지만, 제일 큰 이유는 Pagination을 구현하기 위함입니다 수동으로 만들 땐 Pagination 기능을 만들 순 있어도, 애니메이션을 구현하는 것은 굉장히 복잡합니다. (적어도 저는 복잡했습니다..) 슬라이드를 한 장 넘길때의 애니메이션을 구현, 두 장 넘길 때의 애니메이션 구현, … 원하는 만큼의 애니메이션을 각각 구현해야 합니다. (저의 지식에서는 이렇게 하는게 최선이라 생각이 되네요...
티빙 홈페이지 배너는 가만히 있으면 이미지가 다음으로 넘어가는 슬라이드 형식의 배너입니다. 위와 같은 기능을 리액트에서 구현하기 위해 setInterval 사용하는 법을 알아보겠습니다 리액트에서 setInterval()함수 사용하는 법 리액트에서 setInterval()을 사용하기 위해선 useEffect를 사용하면 됩니다. function HomeBanner({ backScreenData }: { backScreenData: ITrending[] }) { const [order, setOrder] = useState(1); const [isPlay, setIsPlay] = useState(true); const handleAfterClick = () => { setOrder((prev) => (prev..