728x90 반응형 js16 [React] date-fns와 Style-Components로 커스텀하기 쉬운 달력 만들기(2편) 저번 1편에 이어서 2편으로 date-fns와 Style-Components로 커스텀 달력 편을 마무리 하고자 합니다! 2023.07.06 - [코딩/Javascript] - [React] date-fns와 style-components로 커스텀 달력 만들기(1편) [React] date-fns와 style-components로 커스텀 달력 만들기(1편) 올해 새로운 프로젝트를 맡게 되면서 달력에 서버에 있는 데이터를 보여줘야하는 기능을 구현하게 되었다. 다양한 라이브러리가 있었지만 디자이너의 요구에 맞는 달력을 제작하기가 어려워 da quddkflty.tistory.com 커스텀 달력 만들기 이제 date-fns에 대한 이해도가 어느 정도 생겼다는 가정하에 글을 쓰도록 하겠다. 1. Date-fns 라.. 2023. 7. 6. [React] date-fns와 style-components로 커스텀하기 쉬운 달력 만들기(1편) 올해 새로운 프로젝트를 맡게 되면서 달력에 서버에 있는 데이터를 보여줘야하는 기능을 구현하게 되었다. 다양한 라이브러리가 있었지만 디자이너의 요구에 맞는 달력을 제작하기가 어려워 date-fns를 사용하여 커스텀 달력을 만들어보았다. date-fns란? date-fns는 JavaScript와 TypeScript를 위한 유용한 날짜 관련 유틸리티 라이브러리이다. 이 라이브러리는 날짜를 다루는 다양한 함수를 제공하여 날짜 및 시간 관련 작업을 쉽게 처리할 수 있도록 도와주며 날짜 비교, 날짜 추가, 일,달,년, 요일 계산등의 다양한 기능이 많다. date-fns 라이브러리 설치하기 아래 코드를 입력하여 설치할 수 있다. npm install date-fns --save # or with yarn yarn a.. 2023. 7. 6. [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 2 3 4 다음 반응형
