에바니네

자동 재생 무한 슬라이더 만들기

1. 슬라이더 디자인의 완성 저 페이지에서는 일단 슬라이더가 위와같이 나왔고, 디자이너랑 내가 생각한 애니메이션은 아래와 같은 무한 스크롤을 차용해서 서로 다른 방향으로 진행하려고 하였다. 2. 라이브러리를 사용해야할까 ? 관련 라이브러리로 Swiper와 React-slick을 고려해보았다. - Swiper 고려해봤지만 약간 저렇게 흘러가듯한 슬라이더 구현은 좀 힘들거 같다는 생각이 들었다. 관련 Example도 안보였고.. 무겁기도했다. https://swiperjs.com/demos#infinite-loop Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and ama..

Scroll-Snap ? 해볼게요.

조사 일단 이런 스크롤스냅이 가능한 쥬뗌 치킨 웹사이트를 만들고 싶었습니다. 막 뭔가 엄청난 에니메이션이 필요할 줄 알았는데, 방법은 여러가지가 있지만 제일 간단해 보이는 방법으로 일단 적용해봤습니다. https://ditisbobo.nl/ Dit is BoBo De BoBo is een handige sidekick voor elke ruimte in huis. Aaibaar en eigenwijs. ditisbobo.nl https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type scroll-snap-type - CSS: Cascading Style Sheets | MDN The scroll-snap-type CSS property sets ..

NextJS 프로젝트 세팅 w/ Husky, eslint, prettier

일단 프로젝트 CNA을 해줍니다 ㅎㅎ ... yarn create next-app --ts --tailwind --eslint 사실 저는 이 과정에 대해서 한번 적은적이 있었기 때문에, 간단하게 설정 파일들만 기록해놓으려고 합니다. 그냥 가져가서 install만 하면 사용할 수 잇게끔.. 일단 저는 제일 보편적인 airbnb꺼를 설치하고 사용했습니다 ~ package.json "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", // 허스키가 사전 커밋 훅을 설치하고 설정하기 위한 준비 스크립트 "prepare": "rm -rf .husky && husky install && npx..