[FE] Main Page Animation 적용 #238
Conversation
|
애니메이션 대박....! 😬 |
webapp/src/pages/Main/index.jsx
Outdated
| const mainText = 'What is Conect'; | ||
| const conect = '코넥트'; |
There was a problem hiding this comment.
main.constant로 옮겨도 될 것 같아요!
| @@ -9,6 +9,7 @@ import ToastNotificationProvider, { | |||
| } from 'contexts/ToastNotification'; | |||
| import { deleteMessage } from 'contexts/ToastNotification/action'; | |||
| import ToastNotification from 'components/ToastNotification'; | |||
| import { throttle } from 'lodash'; | |||
There was a problem hiding this comment.
lodash 라이브러리가 package.json에 안 보이네요. 지금 상태로 사용 가능한 건가요??
There was a problem hiding this comment.
그렇네요. 사용하지 않는데, 코드를 작성해 놓은 거 같아요.
지금 상태가 lodash 라이브러리를 사용하지 않고도 잘 작동이 되긴 한데, lodash 라이브러리에서 throttle이
이런 기능을 제공해주더라고요
라이브러리 활용을 최대한 줄이는게 좋을까요 아니면 사용하는게 좋을까요 !? 조언 구합니다 ㅠ
There was a problem hiding this comment.
debounce와 trottle은 hooks로 구현한 예제도 많아서 직접 구현하면서 개념을 이해해도 좋을 것 같아요!
There was a problem hiding this comment.
밑 리뷰를 보니 lodash 라이브러를 사용하는게 좋겠네요 ! 설치하고 다시 commit 해놓겠습니다 !
| const handleScroll = useMemo( | ||
| () => | ||
| throttle(() => { |
There was a problem hiding this comment.
window.addEventListener('scroll', handleScroll)에서 scroll 이벤트는 사용자가 스크롤을 px단위로 옮길 때마다 발생하는 이벤트입니다! 스크롤 이벤트는 단기간에 많이 발생할 수 있어 다음과 같은 단점이 있을 수 있어요
- 이벤트가 단기간에 많이 발생해 브라우저 렌더링에 영향을 많이 줄 수도 있어요. 스크롤 이벤트에 무거운 함수를 등록하면 reflow ,repaint에 안 좋아요!
- 동기적으로 실행되기 때문에 메인 스레드에 영향을 줘요!
물론 이정도 간단한 애니메이션은 상관 없을 수도 있다고 생각해요👀 throttle과 useMemo를 활용해 최적화해서 더더욱 상관없을 수도 있겠네요 👍👍👍
기능 구현이 끝나고나면 정략적인 최적화 측정법에 대해서 고민해보고 개선해보면 좋은 경험이 될 것 같아요.
There was a problem hiding this comment.
좋은 리뷰 감사합니다... 어쩐지, 안 그래도 좋지 않은 제 집 네트워크 환경 속에서 더욱 더 제 화면이 느려진거만 같은 기분이 들더라고요.... 이런 이유가 있었군요
코드 최적화 경험이 없는데 이번 기회를 삼아 좋은 코드로 개선 시켜봐야겠네요!
좋은 리뷰 감사합니다 !!!
| ); | ||
|
|
||
| useEffect(() => { | ||
| if (typeof window === 'undefined') { |
There was a problem hiding this comment.
질문 : 어떤 상황이 typeof window === 'undefined' 인가요??
There was a problem hiding this comment.
window라는 객체가 없다면 return 해주는 코드로 알고 있습니다 ! window를 찾아야 그 후 animation을 작동 시킬 수 있기 때문에
바로 밑 코드를 보면 window.addEventListener('scroll', handleScroll); 로 윈도우 내에서의 스크롤 이벤트를 감지하고 있어요 !
webapp/src/pages/Main/index.jsx
Outdated
| <p> | ||
| <S.Section> | ||
| <S.Wave> | ||
| <S.Curve /> |
There was a problem hiding this comment.
아래와 같이 map을 쓰는 건 어떨까요? ㅎㅎ 아래와 같은 형태가 자주 반복되는 것 같으니까 utils함수로 만들어도 좋을 것 같아요!
{Array(4)
.fill(0)
.map((_, idx) => (
<S.Curve />
))}There was a problem hiding this comment.
너무너무 좋아요!! 좋은 리뷰 감사합니다 !!
| export const Curve = styled.span` | ||
| position: absolute; | ||
| width: 750vh; | ||
| height: 725vh; | ||
| left: 50%; | ||
| background: #9d68fe; | ||
| transform: translate(-50%, -75%); | ||
| &:nth-child(1) { | ||
| animation: ${animateGradation} 10s linear infinite; | ||
| border-radius: 44.5%; | ||
| background: #e2e7fd; | ||
| opacity: 80%; | ||
| } | ||
| &:nth-child(2) { | ||
| animation: ${animateGradation} 14s linear infinite; | ||
| border-radius: 45%; | ||
| background: #3a0c8e; | ||
| opacity: 90%; | ||
| } | ||
| &:nth-child(3) { | ||
| top: -10%; | ||
| animation: ${animateGradation} 20s linear infinite; | ||
| border-radius: 43%; | ||
| background: #53d3f4; | ||
|
|
||
| opacity: 90%; | ||
| } | ||
| &:nth-child(4) { | ||
| top: -13%; | ||
| animation: ${animateGradation} 23s linear infinite; | ||
| border-radius: 42.5%; | ||
| background: #9d68fe; | ||
|
|
||
| opacity: 98%; | ||
| } | ||
| `; |
There was a problem hiding this comment.
ㅎㅎ..🥲 애니메이션들을 component로 만들어야하나 싶어요... css 파일이 터질 거 같아요... 보기에도 너무 어렵고.. 이부분도 추후 리펙토링 도전해보겠습니다..
| ${({ theme: { fonts } }) => fonts.main.emphasis}; | ||
| animation: ${animatePulse} 2s linear infinite; | ||
| &::before { |
About
Main Page Animation 적용
Description
Result
bandicam.2022-12-30.22-02-55-198.mp4
Ref
#237