[개인과제] 포켓몬 도감 만들 때 참고한 부분(1)

- img 태그를 사용해 이미지를 추가했을 때 기본적으로 브라우저나 특정 CSS로 인해 이미지에 테두리가 생길 수 있음.

==> 해결 방법: styled-components에서 img 요소에 background-image 속성을 직접 적용하는 대신, div 요소로 이미지를 감싸서 배경 이미지를 추가하는 방식이 더 적합함. 

---

keyframes를 사용한 애니메이션 적용

• keyframes 정의: keyframes는 CSS 애니메이션의 시작, 중간, 끝 단계들을 정의하는 규칙. 이 규칙을 사용해 요소에 특정 시점에서 다양한 애니메이션을 적용 가능.
• 예시: 

const bounceAnimation = keyframes` 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } `;

 

- bounceAnimation은 요소가 통통 튀는 듯한 효과.

• 0%, 20%, 50%, 80%, 100%: 요소가 원래 위치.
• 40%: 요소가 위로 30px만큼 튀어오름
• 60%: 요소가 위로 15px만큼 살짝 튀어오름.

---

알림 라이브러리 비교

1. react-toastify:
   • 특징: 가볍고 빠른 렌더링을 지원하여 많은 알림을 효율적으로 처리 가능.
   • 장점: 다양한 위치와 스타일을 지원하고, 커스터마이징이 용이.
   • 단점: 복잡한 모달 기능을 제공하지 않음.
2. sweetalert2:
   • 특징: 아름다운 모달 디자인과 다양한 옵션을 제공.
   • 장점: 직관적인 API, 다양한 애니메이션 효과 제공.
   • 단점: 토스트 기능은 제한적임.
3. sonner:
   • 특징: 간단한 API와 빠른 설정, 가벼운 패키지.
   • 장점: 현대적인 디자인과 사용자 정의 용이.
   • 단점: 상대적으로 새로운 라이브러리임.