Next.js[react]7 React에서 터치 스와이프 구현하기 배경우테코에서 개발하고 있는 요즘카페 서비스에선 메인 화면의 카페들을 스와이프 형식으로 보여주고 있습니다. 따라서 터치 스와이프 구현이 필요합니다.이 글에서 JavaScript로 구현한 scroll snap의 소스 코드는 https://gist.github.com/solo5star/ca5788e3c2b75c3c8ab017a4fb97c438 에서 확인할 수 있습니다정말 간단하게 구현하기 (CSS).container { height: 500px; overflow-y: scroll; scroll-snap-type: y mandatory;}.container > .item { scroll-snap-align: start;}터치 스와이프를 구현하는 정말 간단한 방법은 CSS의 scroll-snap을 사용하.. 2024. 7. 1. React에서 터치 스와이프 구현하기 2 (유한 상태 머신으로 리팩토링) 배경지난 글에서 요즘카페 서비스의 터치 스와이프를 고도화하는 구현을 진행했었습니다.요구사항 1, 2까지 구현했었는데요, 터치하였을 때 터치에 반응하여 요소가 따라오게 하는 구현이랑, 판정을 통해 이전 혹은 다음 요소로 snap이 일어나게 하게끔 구현해보았습니다.// 모든 경우에서 사용const [scrollPosition, setScrollPosition] = useState(0);// 터치 중일 때 사용 (그 외엔 null)const [prevPosition, setPrevPosition] = useState(null);const [recentPosHistory, setRecentPosHistory] = useState(null);// snap 애니메이션 중에 사용 (그 외엔 null)const [sn.. 2024. 7. 1. next/image 컴포넌트 이미지의 비율을 유지 Next.js의 next/image 컴포넌트를 사용하실 경우 이미지의 비율을 유지하면서 채우고 싶으시다면, 다음과 같이 layout과 objectFit 속성을 사용하실 수 있습니다:import Image from 'next/image'코드를 설명드리자면, layout="fill" 속성을 이용하면 Image 컴포넌트가 부모 요소를 가득 채우게 됩니다. objectFit="cover" 속성은 이미지의 원본 비율을 유지하면서 이미지를 확대/축소해 필요한 부분만 잘라내어, Image가 부모 요소의 크기를 정확히 맞추도록 합니다. 그래서 원본 이미지의 비율은 그대로 유지되고, 이미지가 부모 요소를 가득 채우게 됩니다. 필요하다면 objectFit 속성 값을 contain으로 변경하여 이미지 콘텐츠가 부모 요소를 .. 2024. 6. 27. aspect-ratio: 372 / 220; tailwind에서 설정하는 먼저 플러그인 설치npm install @tailwindcss/aspect-ratio 그런 다음, tailwind.config.js에서 이 플러그인과 원하는 비율을 추가하세요. module.exports = { theme: { extend: { aspectRatio: { '372/220': '372/220', } }, }, plugins: [ require('@tailwindcss/aspect-ratio'), ],} 이렇게 설정한 이후부터는 다음과 같이 aspect-[name] 클래스를 사용하여 비율을 설정할 수 있습니다. 이 비율이 classname에서 불안정하게 작동한다면, 비율을 소숫점 형태로 제공하는 것도 고려해볼만합니다. 이 경우 위의.. 2024. 6. 27. 이전 1 2 다음
