Web/HTML,CSS,JS
-
React 동영상 업로드 및 썸네일 생성 구현기Web/HTML,CSS,JS 2025. 3. 8. 17:52
대단한 기능은 아니지만 새로운 기능과 JS 메서드, Safari 이슈를 알게 되어 공유겸 메모겸 블로그 글로 작성하게 되었다.요구사항 시나리오1. 유저가 우리 서비스에 동영상을 업로드 한다2. 업로드한 동영상을 s3 서버에 저장한다3. 업로드한 동영상에서 썸네일을 추출하여 이미지로 렌더링한다4. 유저는 본인이 올린 영상의 썸네일을 보게된다 과정먼저 검색을 통해 썸네일을 어떻게 추출할지 조사했다.가장 도움이 된 글은 이것이다 자바스크립트 Canvas를 활용해 동영상에서 이미지 추출해서 저장하기라인은 동영상 url과 프리뷰 url을 같이 전송해야합니다. 그런데, 세일즈포스에서는 동영상 저장시 프리뷰 이미지를 제공해주지 않습니다. 고로 동영상에서 이미지 썸네일을 추출해서 저장해줘claver-pickle.tis..
-
CSS ) Animate on Scroll 스크롤 애니매이션 구현Web/HTML,CSS,JS 2022. 1. 19. 15:19
새로운 프로젝트를 시작하며 준비기간 동안 하고 싶었던 공부를 하고 있는데 벤치마킹을 하며 여러 쇼핑몰을 돌아보니 https://lckshop.com/ LCKshop.com - LCK샵 LCKshop.com - LCK샵 The official Online Shop of LCK lckshop.com 이 사이트처럼 애니메이션 css를 도입하면 좋을 거 같아서 Hook으로 만들어 적용해 보자 라는 생각에 여러 가지 블로그와 깃허브를 참고했습니다. 구현 결과 화려하진 않지만 나름 쓸만 합니다. 구동방식은 다음과 같습니다. 특정 element를 사용자가 보고 있는지 확인한다 Animation을 실행한다. 이벤트를 DOM에 지정한다. hook을 실행하기전 props값을 받아 재사용성을 고려합니다. const useS..