[프리온보딩] 220511 개인과제 #1

개인과제 #1

공식적인 내생각

무한스크롤 구현하면서 IntersectionObserver를 처음 다뤄봤는데, 린터의 비명소리와 타입스크립트의 타입 거부, 온갖 삽질이 겹쳐져 무한스크롤만 세시간 넘게 잡은 것 같다

삽질 이유도 찾아보면 참 별거아니었는데...

작업 내용 (삽질 내용)

API 명세와 실제 데이터의 타입이 다르게 들어오는 문제

export declare interface ISearchResult {
  Response: 'True' | 'False' | null;
  totalResults?: number;
  Error?: string;
}

Bool이라길래 당연히 Boolean인 줄 알았는데 실제로는 문자열이 들어와서 암만 searchResult.Response 로 조건문을 작성해봐야 true만 반환되었다

이걸 사용했던 이유가 검색 결과가 없을 때, 검색 결과가 너무 많아서 불러올 수 없을 때 Response가 False가 되기 때문에 적절한 에러문구와 함께 에러 화면을 출력하려고 했다

근데 분명 Response는 False가 들어오는데 조건문 진입을 아예 안 하길래 ??? 함

한 1시간 가까이 콘솔로그도 찍어보고 조건문도 이리저리 바꿔보고 했다가 발견한 게 Response에 문자열이 들어온다는 사실이었음 (ㅡ,,ㅡ;;;)

고쳤으니 됐다...

isIntersecting의 중요성

if (entry.isIntersecting) {
    observer.unobserve(entry.target);
    await onIntersectFunc();
    observer.observe(entry.target);
}

이건 Intersect Observer 구하다가 삽질한건데 처음에 저 조건문 (entry.isIntersecting) 을 빠트리고 구현했다가 무한 무한스크롤 (...?) 이 되어서 데이터를 무한대로 받아오길래 엄청 당황했다

이것도 정말 온갖 시도를 다 했다...

옵저버 붙이는 부분을 훅으로 빼놓기도 하고, (빼놓으니까 훨씬 낫긴 하다)

intersect 시에 실행되는 함수인 onIntersect를 useEffect에 넣어도 보고,

intersect를 체크하는 대상 요소를 리스트에 넣었다가 컴포넌트에 넣었다가 온갖 왔다갔다도 시켜보고, threshold도 바꿔보고...

그러다가 화면상 (뷰포트 상) 에서 요소가 전혀 보이지 않음에도 데이터가 받아와지는 것을 확인하고 벙쪄서 뒤져보니 entry.isIntersecting 조건문을 붙이지 않아서 교차를 하든 말든 그냥 무한대로 실행되는 것이었다

참말로 당황스러웠다

세련되지 않은 useState

const [response, setResponse] = useState(null);
const [totalResults, setTotalResults] = useState(0);
const [error, setError] = useState('');

totalResults와 error는 영화 데이터를 처음 받아올 때에만 저장하는 값이기 때문에 state를 사용할 필요가 없다고 생각했고, response는 매번 다른 값을 받아와야 하기 때문에 좀 골때렸다

useState를 저렇게 여러 개 쓰자니 좀 보기싫고, 그냥 let으로 선언하자니 새로운 검색결과를 받아올 때 error과 totalResults에 따라 컴포넌트가 리렌더링되어야 해서 안 될 것 같고, 아예 fetch한 데이터를 하나의 변수에 ISearchResults 타입으로 저장하자니 영화 배열까지 같이 저장해야 해서 쓸모없고....

온갖 방법을 썼다 지웠다 하다가 결국 아래처럼 해결했다

const [searchResult, setSearchResult] = useState<ISearchResult>({
    Response: null,
    totalResults: 0,
    Error: '',
  });

ISearchResult에 원래 API 명세에 있는 모든 데이터들의 타입을 다 정의해놨었는데, 그 중에서 Search만 제외시켜 다른 상태값에 밀어넣어주었다

Search는 배열이라 크기가 크기도 하고, 무한스크롤으로 데이터를 추가로 fetch할 때마다 배열을 이어붙여야 하기 때문에 Response나 totalResults와 같은 별도의 값들과 같이 저장하기엔 힘들기 때문

지금 상태값만 5종류에 전역상태값 (recoil) 1개로 총 6개의 변수를 사용해서 좀 지저분하지 않나 싶으면서도 파일 길이가 81줄이라 어떻게든 참고 있다... 음...

오늘 공부한 내용

IntersectionObserver

IntersectionObserver

IntersectionObserver

Suspend

오늘 정리한 강의내용

220508 팁

220508 강의 - 팁

[프리온보딩] 220508 강의 메모 02 (팁)