본문 바로가기

분류 전체보기

 (265)
[React] 기한까지 보이도록 설정하기 (feat:day.js) dayjs 를 사용해서 지난 번에는 남은 시간 타이머 구현을 해보았다. 이번에는 기한안에 따른 함수를 실행시킬 예정이다. case1: 시작 날짜, 종료날짜 정하기 - 기한에 맞게 실행 기한을 설정하고 오늘 날짜가 기간 안에 해당할 경우에는 페이지가 보여지도록 설정하려고 한다. 그냥 날짜를 아래와 같이 직접 코드에 쳐도 되지만, const startDate = dayjs('2023-09-04'); const endDate = dayjs('2023-10-01'); 개발환경에서와 실제 배포에서 날짜가 자동 변경되도록 하기 위해 아래와 같이 env에 작성하였다. (production의 경우에는 날짜만 다르게 env에서 작성해주면 된다.) 09-04 부터 10-01 까지 해당 기한일 경우 보여지도록 할 예정이다...
[React] 구글 애널리틱스(페이지, 버튼 클릭 방문자 수 수집 ) GA 사용법 https://analytics.google.com/ Redirecting... analytics.google.com GA 세팅 GA에 우선 가입을 하고 아래 사이트 방법을 참고해 세팅한다. https://shanepark.tistory.com/123 Google Analytics 구글 애널리틱스 활용하기 - 웹 어플리케이션에 적용 https://shanepark.tistory.com/121 Google Analytics 구글 애널리틱스 활용하기 - 티스토리 연동 최종 프로젝트에서 Google Analytics 를 사용해 볼 예정입니다. 아직 프로젝트가 생성 중이니 저의 티스토리에 연동 shanepark.tistory.com 위와 같이 Web 선택후 URL에 내 localhost를 확인하기 위한 ip를 ..
[React] 페이지 이동시 스크롤 최상단 위치시키기 navigate를 통해 페이지 이동 후 스크롤이 아래에 똑같이 머무는 현상이 발생했다. 이를 해결하기 위한 코드는 다음과 같다. ScrollToTop 컴포넌트 생성 import { useEffect } from "react"; import { useLocation } from "react-router-dom"; export default function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null; } BrowserRouter안에 컴포넌트를 import 시킨다. 그럼 페이지 이동시 최상단으로 스크롤을 고정할 수 있다. https://c..
[error] input 창 수정시 기존값 관련 오류(A component is changing an uncontrolled input to be controlled.) 수정페이지 구현을 위해 input 에 api를 통해 기존 값을 받아오자 아래와 같은 에러가 발생했다. Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info input에서 부터 발견한 에러인데 그 전까진 없다가 수정시에 발생했다. 이는 기존 value에 값..
[React] 팝업 띄우기(feat. Modal, 오늘 그만 보기) 사이트의 메인 페이지에 들어갔을 때 모달창이 뜨고 그 안에 '오늘 그만 보기' input checkbox에 체크를 하고 '닫기'를 누르면 모달창이 닫히도록 구현하고자 한다. 설치 npm install react-cookie npm install dayjs 사용 import { useEffect, useState } from 'react'; import { useCookies } from 'react-cookie'; import Modal from '@mui/material/Modal'; import Paper from '@mui/material/Paper'; import dayjs from 'dayjs'; export default function MainPopupModal() { const [isMod..
[React] lottie-react 사용법 (lottie 애니메이션) https://lottiefiles.com/ LottieFiles: Download Free lightweight animations for website & apps. Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Create, edit, test, collaborate, and ship Lottie animations in no time! lottiefiles.com 위 사이트에서 가입후 사용이 가능하다. 사이트에서 원하는 Lottie의 json을 다운받는다. (색 , 시간 커스텀도 가능) 설치 https://www.npmjs.com/package/lotti..
[css] background image hover시 확대하기 React 컴포넌트에서 다음과 같이 image가 변경되는 경우 scss를 아래와 같이 설정하자 hover시 이미지가 점차 확대되었다. .product-img { ... background-position: center; background-size: 100%; transition: background-size 0.5s ease-in; &:hover { background-size: 110%; } } 참고사이트) (CSS) background-size에 hover transition animation 적용 안될때 해결방법 오늘은 background image를 hover시 확대되는 효과와 자연스러운 transition 애니메이션 효과를 간단하게 해결해보도록 하겠습니다. background-size tran..
[React] 남은 시간 타이머 구현 (feat:day.js) [마켓컬리 클론코딩- 타이머 구현] 정해진 기한의 값을 받아와서 현재시간과의 차이를 구해 남은 시간을 계산하는 타이머를 만들고자 한다. 현재 day.js 라이브러리를 사용하고 있어 이를 활용하였으며, 활용도를 높이기 위해서 커스텀 훅을 사용하여 만들었다. 사용 커스텀 훅을 사용하는 컴포넌트는 다음과 같다. targetTime: 기한 날짜(언제까지인지 날짜 작성) export default function TimeArticle() { const targetTime = '2023-07-29 00:00:00'; const { remainingTime } = useCountDownTimer(targetTime); return ( {remainingTime} ); } 타이머 커스텀 훅 import { useEff..

티스토리툴바