Frontend/UI&UX

carousel 만들기

What to do? react-slick이라는 라이브러리를 이용해서 간단하게(?) carousel(캐러셀)을 구현해보자. 우선 react-slick을 설치하자. yarn add react-slick 그리고 react-slick에 기본적인 디자인을 입혀줄 slick-carousel을 설치하자. yarn add slick-carousel react-slick과 slick-carousel만 이용하면 디자인이 별로?라서 조금의 커스텀을 해주었다. 위 두 라이브러리를 설치한 후 개발자도구를 열어서 태그의 classname을 확인하면서 누구든 css를 수정하면서 커스텀할 수 있다. 사용법 Slider 컴포넌트 우선 react-slick의 Slider 컴포넌트와 기본적으로 slide될 아이템들을 하나씩만 보이게 해..

snap-scroll & scroll된 동영상 재생 (youtube shorts)

What to do? snap-scroll을 이용해서 부드러운 스크롤을 구현해보자. 스크롤을 조금만 내려도 바로 다음 아이템의 가운데까지 스크롤된 후 멈추게하자! 스크롤할 아이템을 감싸는 컨테이너는 scroll-snap-type: y mandatory를 사용! 스크롤될 아이템은 scroll-snap-align:center를 사용! 유튜브 shorts 처럼 스크롤된 아이템의 가운데 화면이 멈추고 동영상이라면 동영상을 재생시키고 그렇지 않은 동영상들은 중지시키자 스크롤되어 화면 가운데에 보이는 동영상만 재생시킴! 사진은 재생 x! 소스코드 App.js 스크롤할 아이템을 감싸는 컨테이너의 뷰포트에서 맨 위 Y좌표(snapScrollTopY)와 맨 아래 Y좌표(snapScrollBottomY) 사이에 스크롤될 ..

이미지&비디오 여러개 업로드 - 미리보기/시간제한/삭제

What to do? 이미지와 비디오를 여러개 업로드하고 미리보기를 할 수 있게 하자. 동영상이 여러개 올라올 수 있으므로 autoplay는 false로 해둠! 한번에 여러개 재생되면 어지러워.. 만약 비디오의 길이가 16초보다 길면 해당 비디오는 alert를 띄우고 업로드가 안되게하자. 각 이미지와 비디오를 hover하면 우측 상단에 삭제 버튼이 보이게 하고 클릭하면 삭제하는 기능도 추가하자 css로 해결할 부분! 미리보기 URL을 createObjectURL로 만들기 때문에 사용하지 않을 때나 컴포넌트가 언마운트될 때는 적절히 revokeObjectURL로 미리보기 URL을 폐기하자 소스코드 App.js import Uploader from "./components/Uploader"; const Ap..

비디오&이미지 업로더 - 미리보기/시간 제한

What to do? 페이지에서 클라이언트가 로컬 컴퓨터로 이미지나 비디오 파일을 업로드하고 서버에 전송하기 전에 미리 사용자가 업로드할 이미지를 보여주고 싶을 경우가 있을 것이다. 아래처럼 input 태그에 type을 file로 주고 accept라는 키워드를 사용해서 비디오와 이미지 형식의 파일만 받게 태그를 변경하면 비디오&이미지 업로더를 구현할 수 있다. 클라이언트로 부터 받은 비니오와 이미지 파일은 state에 저장하고 삭제 버튼을 클릭하면 state를 초기화 시키자. 클라이언트가 이미지를 업로드하기 전에는 디폴트 이미지를 보여주고 클라이언트가 비디오나 이미지를 업로드하면 해당 이미지를 보여주도록 하자. 그리고 사용자가 업로드하는 비디오의 시간을 제한하는 기능도 추가해보자! 예를들어 서버의 자원을..