개발자20 [React] 배경화면 동영상 스크롤 제어 기능 코드 리뷰 PARD 동아리 웹사이트를 만들면서 웹사이트 HomePage에 처음 딱 들어왔을 때 동영상으로 이루어진 배경화면을 스크롤 제어를 통해 마치 스크롤에 따른 애니메이션 기능을 구현하고자 아래와 같은 코드를 짜봤다. GSAP(GreenSock Animation Platform)라는 라이브러리를 통해 웹 애니메이션을 구현하고자 하였다. gsap.to(window, {}) 를 통해 동영상의 재생과 정지를 스크롤에 따라 제어하였으며, window.pageYOffset; 를 활용하여 현재 스크롤 위치 정보를 저장하였다. videoPRogress를 계산하여 스크롤 값에 따라 비디오의 정지 포인트를 관리하였다. 아래는 내가 기능 구현을 위해 짜보았던 코드이다. import React, { useRef, useEffect.. 2023. 6. 7. [React] Firebase CRUD 다양한 예시 코드! React로 Firebase 연동 후 CRUD 기능에 대해서 복사해서 사용하려 했던 코드들을 공유하고자 한다. 개발자 모두 화이팅! create 원하는 collection 안에문서에 의미 있는 ID가 필요하지 않을 경우 id를 생성하여 DB에 저장한다. import { collection, addDoc } from "firebase/firestore"; function handleOnSubmit() { const docRef = addDoc(collection(dbService, "create"), { // create라는 collection 안에 넣겠다는 뜻 create: 'create', }); if (docRef) { console.log('create 성공'); } } 원하는 collection .. 2023. 6. 7. IT 연합 동아리 PARD 해커톤&MT 회고 PARD IT와 벤처 스타트업에 관심이 있고, Pay it forward를 실천하고자 하는 대학생들이 모인 학부 연합 IT/벤처 동아리입니다. 현재 한동대학교 21학번으로 들어와 나는 앱 개발 & UI/UX 디자인 교육 학회 SODA를 거쳐 새로운 시작을 준비하고 있다. 현재 한동대학교는 디자인,기획,개발에 있어 많은 관심과 열정을 가진 학생들이 많지만 이들이 하나의 목표를 가지고 협업하는 일은 거의 없다. 우리 PARD는 이러한 문제들을 해결하고, 한동대학교와 우리들의 발전을 위해 만들어졌다. 나는 PARD에서 앱 개발 파트장을 맡고 있으며, 웹&앱 전반적인 개발파트에 대해 고민하고, 준비하고 있다. 우리는 11월부터 사람들을 모으고 1월 초 마침내! 11명의 PARD 0기 맴버들이 모이게 됐다! 우리.. 2023. 2. 15. TISTORY 시작! 미래를 위한 준비 과정중 훌룡한 개발자로, 사업가로 성장하기 위해 코딩에 대한 주제를 시작으로 저를 기록하려고 합니다~! 2022. 10. 25. 이전 1 2 3 4 5 다음
