![]()
Q1. 그렇지만 react에서는 state가 변경되면 재렌더링을 진행하는 것 아냐? 나는 state가 변경된다 => motion.div 내부 컨텐츠가 변경된다 => 재렌더링 된다 => 애니메이션이 재생된다 이렇게 이해했는데 틀린 부분 좀 짚어줘 A1. 맞습니다. React에서는 상태(state)가 변경되면 해당 컴포넌트가 재렌더링됩니다. 그러나 애니메이션 라이브러리인 Framer Motion에서는 일반적인 React의 렌더링과는 조금 다른 동작이 있을 수 있습니다. Framer Motion은 컴포넌트의 렌더링과 애니메이션을 분리하는 방식으로 동작합니다. 컴포넌트는 상태가 변경되어도 렌더링될 때마다 애니메이션을 다시 시작하지 않습니다. 대신, Framer Motion은 애니메이션을 명시적으로 제어할 수 있..
import React from "react"; import { motion } from "framer-motion"; const Penalty = () => { const arr = ["사과", "배", "포도", "망고", "수박", "귤", "딸기", "바나나"]; const variants = { visible: { opacity: 0.7, y: 0 }, hidden: { opacity: 0, y: 50 }, }; return ( {arr.map((item, index) => ( {item} ))} ); }; export default Penalty;
![]()
1. 도메인 구매(링크 > 도메인 > 도메인 검색 > 사용하고 싶은 주소 검색) https://domain.gabia.com/regist/regist_domain 가비아: 대한민국 도메인 점유율 1위 대한민국 100만 도메인 등록 업체 domain.gabia.com 2. 도메인 DNS 설정 my 가비아 > 이용중인 서비스(도메인) > DNS 관리툴 > 구매한 도메인의 우측에 있는 설정 버튼 > DNS 설정 > 레코드 수정 아래 표와 같이 레코드를 수정/추가 한다. 타입 호스트 값/위치 TTL 우선 순위 서비스 A @ 185.199.108.153 1800 DNS 설정 A @ 185.199.109.153 1800 DNS 설정 A @ 185.199.110.153 1800 DNS 설정 A @ 185.199.11..
![]()
https://8ugust-dev.tistory.com/47 [Git-Pages] Github Custom Domain 설정 (hosting.kr / react) (2022) 1. 도메인 구매 https://hosting.kr 사이트로 접속합니다. 회원가입 및 로그인 은 너무 당연한 과정이니 생략하겠습니다. 구매를 원하고자 하는 도메인을 검색합니다. 도메인 별 가격을 확인한 뒤, 원 8ugust-dev.tistory.com 배포 후 빈화면만 뜬다면?! 위 글의 4번 과정인 React : Package.json 설정 변경을 꼭 봐야한다!
![]()
/* Chrome, Safari, Opera*/ ::-webkit-scrollbar { display: none; } /* Firefox */ scrollbar-width: none; /* IE and Edge */ -ms-overflow-style: none;
![]()
import styled from '@emotion/styled'; import React from 'react'; const FileSelectButton = ({onChange}) => { return ( 파일찾기 // 라벨로 스타일링 할 거임 ); }; export const FileSelectButton_Container = styled.div` `; export const FileSelectButton_Label = styled.label` display: inline-block; `; export const FileSelectButton_Input = styled.input` display: none; // 기존 버튼 숨기기 `; export default FileSelectButton;
![]()
https://velog.io/@eunjin/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B7%B8%EB%9E%98%ED%94%84%EC%B0%A8%ED%8A%B8-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EB%AA%A8%EC%9D%8C [React] 리액트 그래프/차트 라이브러리 모음 기업협업 프로젝트에서 다양한 차트 라이브러리를 사용해야 해서 직접 사용해 본 라이브러리나 리액트 개발자들 사이에서 유명한 라이브러리를 모아 보았다. https://nivo.rocksNivo.rocks커스텀 끝판 velog.io
![]()
깃허브 호스팅을 이용한 리액트 배포 방법은 아래 5가지 과정으로 이루어 진다. 1. package.json 파일 수정 package.json 파일 최하단(중괄호{} 안에)에 아래 코드를 삽입한다. "homepage": "https://깃허브아이디.github.io/레포지토리명" 삽입 후 package.json 코드 예시 // homepage 삽입 후 package.json 코드 예시 { "name": "for-mj", "version": "0.1.0", "private": true, "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.9", "@mui/materi..
