난관

1. 15페이지쯤에서 name을 읽을수 없다고 함

• data의 기본값을 설정해줘서, 해당 데이터가 존재하지 않아도 오류가 일어나지 않도록 함.

1. InterSectionObserver 사용 어려움 (진행중)
2. 코드 스플리팅 필요함.(진행중)

시도

1. 스켈레톤 UI사용 @keyframes skeleton-gradient { 0% { background-color: rgba(165, 165, 165, 0.1); } 50% { background-color: rgba(165, 165, 165, 0.3); } 100% { background-color: rgba(165, 165, 165, 0.1); } }

   animation: skeleton-gradient 1.5s infinite ease-in-out;

참고자료

MDN Intersection Observer API

무한스크롤 관련 포스팅

https://velog.io/@tech-hoon/skeleton-ui

---

목차

• 목차
• 리액트 인피니티스크롤 기능 구현
  • 개요
  • 스터디원🤔
  • 디자인 택 1
  • 인피니티스크롤 OPEN API
  • react 생성
  • Eslint prettier
  • CSS 프레임워크 (스타일) 자유
  • TS 자유
  • 완성조건
    • 리팩토링 추천
  • 시간
  • 부탁

리액트 인피니티스크롤 기능 구현

개요

각각의 리액트를 다루는 폼이나 자주쓰는 기능을 단시간내에 구현하는것을 연습하여 로직이나 훅을 통한 기능 구현 을 친숙화하는것을 목표로 시작

스터디원🤔

---

디자인 택 1

• 디자인1
• 디자인2
• 디자인3

인피니티스크롤 OPEN API

HOT! dog API

• 밑에 pricing 에 signupFree 를 눌러서 이메일적고 사용하는 이유 적고 확인눌러서 이메일로 key받고 axios 받아보기

react 생성

npm init vite

Eslint prettier

자유

CSS 프레임워크 (스타일) 자유

• styled-components
• Emotion
• Styled-jsx
• Material-UI
• tailwind CSS
• SCSS

TS 자유

완성조건

• STEP 1 : 리스트를 만들고 리스트 밑에 LOAD MORE 버튼을 만들고 LOAD MORE 누르면 목록 추가

• STEP 2 : 스크롤이 맨 바닥을 바라보면 로드

• STEP 3 : 확대 축소를 해도 문제없이 되는지

• 완성

  리팩토링 추천

• 이미지 미리 로딩 , 퍼포먼스 개선 , 완성할때 퍼포먼스와 최적화후 퍼포먼스 비교, 인피니티스크롤 UX개선 등

시간

• 토요일 집중코딩시간 3~9

부탁

• 각 스텝별 어떻게 해결했는지 발표때 말씀해주시면 됩니다.
• 만약에 뭔가를 해결했을때 주석으로 부탁드립니당
• (~해서 ~로 해결했다).
• 리팩토링에 너무 많은 시간 안쓰셨으면 해요 !! 개발에 잡아먹힙니다