캐로셀2 [React/Next.js] 라이브러리 없이 구현하는 3D carousel 라이브러리를 사용하지 않고 3D carousel 구현 carousel 은 라이브러리로 구현하면 사용하기 편리하지만, 이 구현을 한 포트폴리오 프로젝트는 최소한의 라이브러리를 사용해서 직접 구현하고자 정했기에, next.js와 css와 html 만으로 구현하였다. 2d 형식의 슬라이드는 너무 못생겼고 간단했기에, 3d로 구현해보았다. 핵심 원리를 요약하자면, Transform 속성 활용: 각 캐러셀 아이템에 transform CSS 속성을 사용하여 3D 회전(rotateY)과 깊이(translateZ)를 조정해 입체적인 효과를 구현 조건부 렌더링과 인덱스 관리: active 상태 변수를 사용하여 현재 활성화된 캐러셀 아이템을 추적하고, 이를 바탕으로 각 아이템의 위치와 스타일을 동적으로 변경 사용자 상호작.. 2023. 12. 31. carousel 은 CSR 로 구현하자 메인 페이지의 배너를 히어로 캐러셀로 넣기 위해서 많이 쓴다는 embla 캐러셀을 사용하려 했으나 아래의 에러 발생... 해당 캐러셀의 공식 홈페이지에서 react 에서의 사용법으로 준 스켈레톤 코드 자체에 useRef 가 사용되어 있어서, hook을 사용하기 위해서는 CSR 을 적용하기 위해서 "use client" 를 사용해야만 했다.(Next.js 13버전의 CSR 구현법...) 근데, 메인 페이지 배너를 csr 로 만들고 싶지 않았으므로... 그냥 ssr 로 구현가능한 다른 라이브러리를 찾아보기로 했다 swiper slider 를 사용하였으나, 같은 에러가 발생하였다 그냥 "use client" 를 사용해서 CSR로 구현하면 된다지만, 히어로 캐러셀은 SSR로 만들고 싶었기에 더 찾아보았더니 아래.. 2023. 2. 23. 이전 1 다음
