개발 일기

23.04.17 React TS에 첫 애니메이션

와라리요 2023. 4. 17. 22:49

추가 진행 결과

  • Elder 페이지 완료
  • Pastors 페이지 완료
  • History 페이지 완료
  • Footer 완료
  • 페이지 넘길 시 애니메이션 효과 추가

 

 

문제점!

  저는 css를 flex와 grid만 공부를 하고 JS 공부에 집중을 했었다. 그러다 보니 애니메이션 효과를 넣어 본 적이 없었다. 이번에 페이지를 구현하면 css를 할 줄 안다고 하면 애니메이션효과를 쓸 줄 알아야 한가는 생각이 들어서 찾아가면서 해보았다.

  우선 react-intersection-observer라는 라이브러리를 알게 돼서 시도를 했는데 1시간 동안 아무리 알아보고 다시 해보고 했는데 애니메이션이 적용이 되지 않았다 ㅜㅜ 스트레스!!!!!!!!!!!! 그러다 안 되겠다 싶어서 gpt에게 물어봤는데 react-router v6 이상은 지원이 되지 않는다는 것이었다. (충격!!!!!!)

  그래서 우선 styled-components만을 이용해 구현하긴 했는데 많이 아쉬웠다. ㅜㅜ 왜냐하면 History에 횡 스크롤에 맞게 하나씩 나타나는 것을 구현하고 싶었기 때문이다. 그래서 우선은 다른 페이지들을 완성하고 애니메이션들을 적용할 계획이다. 이번에 찾으면서 알게 된 것은 Framer-motion 라이브러리이다. 이 라이브러리는 최근에 수강하고 있는 강의에도 나온다고 되어 있으니 공부하고 해봐야쥐~~~ (에휴 애니메이션 ㅜㅜ)

 

 

배웠다!!

  우선 적용하기 전에 react-router v6에 적용이 되는지 찾아봐야겠다. 적용하는 방식과 새롭게 지원하고 삭제된 커스텀 Hook들이 많다 보니 기존에 적용이 되던 라이브러리들이 안 되는 경우가 종종 있는 것 같다. 그리고 가장 문제는 v6으로 작성한 예시를 찾기가 진짜 힘들다는 것이었다. (나의 선생 GPT)

 

 

남은 것!!!

  • 캘린더 기능을 구현해 1년 계획을 보여주는 것, DB에 저장하는 것을 고민하고 구현하기!
  • 목사님 페이지
  • 교회 예배 시간표

파이팅!!!!!!!!

 

 

문제의 코드!!!!

  페이지 이동 시 애니메이션 효과 적용 코드

import styled, {keyframes} from "styled-components";

const fadeInAnimation = keyframes`
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
`;

export const PageBody = styled.div`
    width: 100%;
    animation: ${fadeInAnimation} 0.3s ease-in;
`;

 

창고로