728x90 반응형 분류 전체보기86 [React] 웹 배포하기 전 Index.html에 콘텐츠 설명(OG 태그) 넣어주기. 흔히 우리가 웹사이트 링크를 다른 사람들에게 공유하다보면 아래 사진과 같은 해당 링크에 대한 제목, 설명과, 썸네일 사진을 확인할 수 있을 것이다. 이러한 내용들 또한 배포하기 직전 웹에서 오픈 그래프를직접 설정해줘야한다! 오픈 그래프(Open Graph)란? 오픈 그래프(Open Graph, 이하 OG)는 웹사이트가 소셜 미디어 플랫폼에서 공유될 때 메타데이터를 제공하는 프로토콜이다. OG는 페이스북(Facebook)에서 처음 도입되었으며, 웹사이트의 콘텐츠가 소셜 미디어에서 미리보기로 제공되는 정보를 제어하기 위해 사용되고 있다. OG는 웹사이트의 만약 배포에 있어 개발자 도구 콘솔창을 관리하고 싶다면 아래 페이지로! https://quddkflty.tistory.com/39 [React] 배포 전 .. 2023. 6. 7. 웹사이트 스위그(SWYG)로 배포하기 2탄 드디어! 웹사이트가 스위그(SWYG) 배포가 됐다. 배포 신청 하루만에 배포가 됐다는 메일이 오른쪽 사진처럼 왔다! 사진과 같은 메일을 확인했다면 배포에 성공한 것이다....! 프로젝트 업데이트 방법 : 배포 후 수정 내용이나 업데이트 내용이 있을 경우에는 프로젝트 코드 수정과 GIt push 한 후에 해당 스위그 프로젝트 페이지에서 배포 신청하기 버튼을 클릭하여 신청하면 된다. 광고 : 스위그에서는 배포한 웹사이트에 광고를 첨부할 수 있는데 원하는 광고 규격 크기에 맞는 광고 첨부 코드를 Body에 입력하여 업데이트한 후에 배포하여 활용할 수 있다. 2023. 6. 7. [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. 이전 1 ··· 17 18 19 20 21 22 다음 반응형
