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를 초기화 시키자. 클라이언트가 이미지를 업로드하기 전에는 디폴트 이미지를 보여주고 클라이언트가 비디오나 이미지를 업로드하면 해당 이미지를 보여주도록 하자. 그리고 사용자가 업로드하는 비디오의 시간을 제한하는 기능도 추가해보자! 예를들어 서버의 자원을..

react-dnd react-dnd는 react에서 쉽게 Drag & Drop을 사용할 수 있게 해주는 라이브러리이다. 모바일에서 작동하지 않는 drag 이벤트를 touch 이벤트로 바꿔주기 때문에 모바일 환경에서도 Drag & Drop 기능을 사용할 수 있게 해준다. 또한 Drag중인 요소를 추적해서 css 속성을 바꿔주거나 Drag가 끝난 상황도 커스터마이징 해줄 수 있는 유용한 라이브러리이다! 예를 들어 아래 그림처럼 드래그중일 때 opacitiy와 같은 css 속성을 넣고 state를 수정해서 요소의 순서를 바뀌게 할 수 있다! 아래 공식 문서와 여러가지 example code를 보고 참조하자! 내가 간단히 구현한 것보다 훨씬 많은 기능을 추가할 수 있다! https://react-dnd.gith..