/poke

영어 포켓몬 오픈 소스 API를 활용하여 포켓몬의 도감 카드를 보여주는 무한 스크롤을 구현

Primary LanguageTypeScript

[배포링크] (https://main--lively-scone-f8b04e.netlify.app/)

서비스 소개

  • 포켓몬에 대한 정보를 확인할 수 있는 포켓몬 도감 서비스입니다

프로젝트 구성원 및 기여도

  • 프론트엔드 1분(본인)
  • 프로젝트 전체 작업 기여도 : 100%

기술적 도전 목표

  • 무한 스크롤 페이지의 성능 저하로 인한 가상 리스트를 통한 무한 스크롤 최적화
  • 가상 리스트 적용 시 브라우저 전체 스크롤과 리스트 스크롤이 분리 돼 UX가 떨어지던 점을 고려 해 두 스크롤 동기화.

프로젝트 성능 비교안

개선 전

개선 후

기술

React,Typescript,tailwind-css

커밋 규칙

emoji Commit message use
🚀 Start 프로젝트 스타트
Feat 새로운 기능 추가
🐛 Fix 버그 수정
🔧 Refactor 코드 리펙토링
💄 Style UI추가 및 업데이트
Chore 패키지 추가 및 업데이트
📝 Docs 리드미 문서 작성

앞으로 도전해볼만한 것

  1. 가상화 작업
  2. 캐싱작업