project/final project 술고래5 2023.08.20 모달창 바깥을 눌러도 닫히도록 설정등 기능 수정 및 추가 import React, { useState, useRef, useEffect } from 'react'; import './Modal.css'; const Modal = () => { const dialogRef = useRef(); const [isOpen, setOpen] = useState(false); const handleOpenModal = () => { dialogRef.current.showModal(); setOpen(true); }; const handleCloseModal = () => { dialogRef.current.close(); setOpen(false); }; const handleOverlayClick = (event) => { if (event.target === di.. 2023. 8. 20. react로 리워드 부분 구현(2023.08.19) 어려웠던 부분 도형 사이를 잇는 점선 구현 input type="text"에 값을 정해놨더니 직접 수정이 안되는 것 질문할 것 1. input type text로 했는데 value값을 {number}로 넣었더니 텍스트 직접 수정 불가능 2. {number}의 값을 number에 대입하고 싶은데 안됨. 3. 수량 Maximum과 Mininum 제한하는 법 4.도형 사이를 잇는 점선 구현 Modal을 이용해 팝업창 구현하기 터미널에 입력 npm install react-modal =>모달 라이브러리를 사용할 수 있게 되었다. import Modal from 'react-modal'; 로 import Modal이라는 객체는 isOpen을 필수적으로 가지고 있어야한다. isOpen값은 true/false여야한다.. 2023. 8. 20. react로 리워드 부분 구현(2023.08.19) 어려웠던 부분 도형 사이를 잇는 점선 구현 input type="text"에 값을 정해놨더니 직접 수정이 안되는 것 질문할 것 1. input type text로 했는데 value값을 {number}로 넣었더니 텍스트 직접 수정 불가능 2. {number}의 값을 number에 대입하고 싶은데 안됨. 3. 수량 Maximum과 Mininum 제한하는 법 4.도형 사이를 잇는 점선 구현 Modal을 이용해 팝업창 구현하기 터미널에 입력 npm install react-modal =>모달 라이브러리를 사용할 수 있게 되었다. import Modal from 'react-modal'; 로 import Modal이라는 객체는 isOpen을 필수적으로 가지고 있어야한다. isOpen값은 true/false여야한다.. 2023. 8. 19. 넣을 효과 정리 최종 후원 금액이 올라감. https://unho94.tistory.com/242 [React] 숫자 증가 애니메이션 만들기 (with. TypeScript) 여러 웹 서비스를 이용하다 보면 숫자를 강조하는 방법 중 하나로 숫자가 빠르게 올라가는 애니메이션을 확인할 수 있습니다. 리액트를 이용하여 어떻게 구현할지에 대해 작성해보도록 하겠습 unho94.tistory.com https://namhandong.tistory.com/93 React | number count 기능 구현하기 , onScroll 스크롤에 따라 animation 실행 먼저 react-spring을 사용해서 숫자 Count 애니메이션을 구현할 것이다. react-spring은 React에서 여러 애니메이션을 구현하기 위해 사용하는 애.. 2023. 8. 18. 주문하기, 반응형 웹사이트 자료 https://help.tumblbug.com/hc/ko/articles/900006673363--%ED%9B%84%EC%9B%90-%ED%9B%84%EC%9B%90%EC%9D%80-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%95%98%EB%82%98%EC%9A%94- https://cocoder16.tistory.com/37 반응형 웹 만드는 법 (ft. 디바이스 종류별 width값) 반응형 웹을 만드는 방법 반응형 웹이란 각 디바이스의 크기와 뷰포트의 크기를 고려하여 어떠한 크기에서도 서비스를 제대로 화면에 보여주는 웹을 말합니다. 반응형 웹은 흑과 백처럼 이분법 cocoder16.tistory.com 화면에 고정되는 메인메뉴 만들기 - 리액트, 자바스크립트 https://www.wal.. 2023. 8. 18. 이전 1 다음