4월 19일 오늘의 개발일기

Today Learn

Background Image 덮기

background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
                  url("../../media/examples/lizard.png");

//이미지 위에 이미지를 쌓아올릴수 있음. gradient를 투명하게 줘서 이미지를 투명하게 덮는것도 가능
                  
background-image: url("../../media/examples/star.png"),
                  url("../../media/examples/lizard.png");
                       

Framer에서 중요점

AnimatePresence관련

1. exit효과를 주고싶은 컴포넌트에만 AnimatePresence 컴포넌트로 감싸는게 아닌 그 부모컴포넌트까지 감싸줘야지 원하는 효과가 잘나옴
2. 반드시 Visible 해야함 => 반드시 반드시

layoutId

어딘가에서 중첩이 여러번 일어나면 애니메이션이 많이꼬인다. => 내경우에는 exit애니메이션이 상당히 꼬였다.
그러니 중첩이 안되게 섬세해야 한다는걸 느낌.

React-router-dom v6관련

Route path

v5
<Route path={["/","/path"]} />

v6 
<Route path="/">
	<Route path="path" /> //상대경로
</Route>

후기

애니메이션 라이브러리는 내가 원하는대로 효과를 잘 주려면 신중하게 잘줘야한다.

React-route-dom이 v6으로 업데이트되면서 바뀐점이 많은데.
v6의 중첩라우팅은 저방법말고도 방법이 있을것같으니 찾아봐야겠다.

조만간 React-Query, Framer-motion은 내 나름대로의 정리가 한번 필요할듯.