[인프런 워밍업 클럽 Full Stack 3기] 스터디 3주차

강의 메모 정리

함수와 메서드

maybeSingle() vs single()

• maybeSingle(): 리스트가 아닌 단일 데이터를 가져오는 함수로, null을 반환할 수 있음

• single(): 단일 데이터를 가져오지만, null일 경우 에러 발생

• 따라서 null 가능성이 있을 때는 maybeSingle()을 사용하는 것이 안전함

• 메타 데이터 처리는 서버 단에서 처리하는 것이 효율적

SEO 작업

SEO(검색 엔진 최적화) 구성 요소

• 타이틀과 설명(Description)

  • 카카오톡 등으로 URL 공유 시 표시되는 정보

  • 검색 엔진에 노출되는 중요 정보

• OG Image

  • 메타 태그의 일종

  • 소셜 미디어에서 링크 공유 시 표시되는 이미지

  • 카카오톡 등에서 웹사이트 공유 시 나타나는 이미지

React 관련 기능

react-intersection-observer 라이브러리

• useInView 훅

  • 컴포넌트가 화면에 보이는지 여부를 감지

  • threshold 값을 통해 화면에 얼마나 보여야 감지할지 설정 가능

  • 반환값: [ref, inView, entry]

ref 활용법

• 특정 DOM 요소(예: div)에 ref를 연결하면 해당 요소가 화면에 보이는지 감지 가능

• 주요 사용 사례: 무한 스크롤

  • 페이지 하단에 보이지 않는 태그를 배치

  • 해당 태그가 화면에 보이는 순간 다음 페이지 데이터 로드

useInfiniteQuery

• React Query에서 제공하는 무한 스크롤 구현을 위한 훅

• 일반 useQuery보다 무한 스크롤 구현에 적합

• 주요 반환값:

  • data: 모든 페이지 데이터를 포함

  • fetchNextPage: 다음 페이지 데이터 요청 함수

  • hasNextPage: 다음 페이지 존재 여부

  • isFetchingNextPage: 다음 페이지 로딩 상태(isLoading 대체 가능)

  • status: 전체 쿼리 상태

• 사용 시 현재 페이지와 다음 페이지를 합친 전체 상태 값을 data가 관리함

미션 수행

이번 미션에서는 실습에서 구현한 넷플릭스 클론에서 '찜' 기능을 추가하는 것이 목표였다.