분류 전체보기108 [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. 웹사이트 스위그(SWYG)로 배포하기 PARD에서 숏커톤 결과물에 대해 배포하게되면서 SWYG라는 좋은 플랫폼에 대해 알게 되었고, 사용 방법에 대해 나누고자 한다. 스위그(SWYG)? 스위그(SWYG)란 메타 콘텐츠 공유 및 호스팅 플랫폼이다. 웹 호스팅과 도메인을 제공해주며, 깃허브 연동으로 쉽고 빠른 출시를 할 수 있다는 장점이 있으며, 프로젝트를 배포한 후에도 플랫폼 내부에서 콘텐츠들을 홍보해주며 콘텐츠 제작자들과 개발자들의 네트워킹 기회를 제공해주고 있다. SWYG 이용가이드에 대해서는 아래 링크에 자세히 나와있으니 참고하면 된다. https://swygbro.notion.site/SWYG-4673dcfd50024f45af908bd80e44d5dd 아래는 내가 배포하면서 겪은 순서이다. 스위그에 웹 서비스 배포하기 프로젝트 개요 입.. 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. 이전 1 ··· 23 24 25 26 27 다음
