경제

만들었다경제적인 텍스트 회전을 위한 웹 서비스.
이 정도면 금방 만들 수 있을 것 같아요.
만드는 과정에서 공부가 좀 있어서 썼어요.

Next.js 및 Proeact 결합

리액트에 쓰면서 미리 생성하고 싶어서)
Next.SSG 용도로 js 사용 결정
파일 크기를 줄이려면 React 대신 Proeact를 사용하십시오.
이전 React 대신 Proeact에 가입했을 뿐입니다.
트위터에 패스트 리프레시가 작동하지 않는다는 트윗을 올려 조언을 받았다.

yarn add next preact preact-render-to-string \
  github:preact-compat/react#1.0.0 github:preact-compat/react-dom#1.0.0
yarn add -D @types/node @types/react typescript

편리한 게 있다는 걸 알고 더 조사한 결과
지원Next.js의 공식 창고 examples에서Proeact와 조합한 예
넥스트-plugen-preact의 존재를 알았기 때문에 이번에 사용했습니다.

yarn add -D next-plugin-preact webpack@^4

Next.js는 웹 패키지 v5에 대응하기 위해 웹 패키지를 묶을 준비를 하기 때문에 따로 설치해야 한다webpack@^4.

animation 활동

경제라는 글자만 돌리면 외로워요.
회전 횟수를 표시하고 싶습니다.
CSS를 통해 회전
CSS 애니메이션이 끝날 때 그걸 체크하고 싶어요.
딱 좋은 행사가 있어서요.
animationation 이벤트는 CSS 애니메이션의 반복 재생이 한 번 끝나고 다음 재생이 시작될 때 발생합니다.
인용

const ref = useRef<HTMLParagraphElement>(null)
useLayoutEffect(() => {
  if (!ref.current) return
  ref.current.addEventListener('animationiteration', () => {
    setcount(c => c + 1)
  })
}, [ref])

기타

scss에서 처음으로 for를 사용해 봤어요.
라이트하우스에서 만점을 받기 위해 살짝 해봤어요.
즐겁게 하고 있습니다.
소스 코드는 https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/animationiteration_event입니다.