WIL 05 심화주차 회고록

요번주는 심화주차로 그전에 기본과 숙련과정에서 배운걸 +해서 많은 기능과 세분화된 컴포넌트, 상태관리, 리덕스,파이어베이스 쓸때 좀더 편리하게 쓸수있는 툴?라이브러리 사용해보았다. 6일안에 4주차 강의들 다 듣고 CRUD와 로그인,회원가입, 무한스크롤,댓글,좋아요 기능까지 해야하는등 많아서 다 구현하지 못하고 큰 흐름만 배우는걸로 만족했다.

 

심화과정 과제화면

우리 흔히 보는 인스타그램과 같은 같은 기능을 쓰게 되었는데 확실히 기능과 컴포넌트들이 많으니 코드도 길어지고 로직을 따라가기가 여간 쉽지 않긴했다. 다음주부턴 백엔드쪽과 협업을 하면서 미니프로젝트를 하게되는데 복습도 계속하면서 리액트를 좀더 편하게 사용할수있도록 해야겠다.

 

Problem 과 해결과정

 

 

처음 스크린샷처럼  InifinityScroll 컴포넌트에 is_next 값을 {paging.next} 를 할당해주는데 할당후 실행하면 두번째 스크린샷처럼 type Error 뜨면서 paging.next 값이 undefined 라서 속성을 읽어올수 없다 라고 떠서 3번째 스크린샷처럼 useSelector 해서 post에서 paging 을 가져와서 paging 에 넣은것을 console.log 로 찍어봐서 값이 제대로 들어왔나 확인해 보았다. 그결과 4번째 스크린샷처럼 처음에 undefined 가 떴다가 그다음줄에 start ,next, size 값을 console창에 출력하는걸 보았다. 그래서 추측한게 자료를 읽어오기전에 is_next 속성값에 paging.next 를 넣어줘서 그런걸로 생각했는데, 강의에선 then 이나 무언가 비동기처리를위해 콜백함수를 써서 기다렸다가 하는거 없이 그냥 잘되는데 제가 할땐 undefined 였다가 값을 가져와서 어떤 식으로 값을 받아온후 읽어올수있을지 몰랐었다.

 

 

 

해결과정

일단 심화주차는 할게 많아서 로직을다 따라가지못하고 수업을들으면 쓴부분이 많아서 일단 임민영튜터님에게 따로 물어보았다.

 단순히 키값의 대소문자로인해서 paging 이 Paging 으로인해서 오류난것인데. 접근하는 방법을 순서대로 역순으로 로직을 따라가게 도와주셨고 처음 useSelector 에서 가져와도 초기 initial 키값이 다르므로 paging는 undefined 로 된거고, 3번째 사진에서 getPostFB를 통해 query부분에서 다시 paging 값을 할당해주고 그값을 useEffect에서 가져와서 그때 제대로 찍혔던거였다

.

 

 

이론공부

Debounce 와 Throttle

우리가 실시간으로 ‘감사합니다’ 를 검색할때 ㄱ,ㅏ,ㅁ,ㅅ,ㅏ,ㅎ,ㅏ,ㅂ,ㄴ,ㅣ,ㄷ,ㅏ라고 칠때 연관 검색어가 같은걸 빨리 바꿔줄수있는데 너무 빨리 한다면 서버 요청이 날아가는걸 막기위해 특정시간마다 1번씩 또는 키보드 입력이 멈출때만 1번  연관검색이 뜨게 줄일수있다. 따라서 이런 연관 검색어 부분의 엄청난 랜더링도 막아 줄수있다.

또한 파이어스토어에서는 무료 요청횟수가 한정적이라 더이상 요청못할수도있다. 따라서 이런걸 막기위해서 debounce와 Throttle 을 사용한다.

Debounce란?

이벤트가 일어나면, 일정 시간을 기다렸다가 이벤트를 수행한다. 일정시간 내에 같은 이벤트가 또 들어오면 이전 요청은 취소한다.

throttle이란?

일정시간동안 일어난 이벤트를 모아서 주기적으로 1번씩 실행해준다. ( debound랑 다르게 이전 요청을 취소하지않고 모은다는것)

어떤게 좋은지 상황마다다르다.

예를들어 스크롤을 내릴때마다 스테이지바가 점점 차는 효과가 있다면 debounce 같은경우 일정시간을 기다렸다가 수행하기때문에 실시간으로 바가 차는 느낌이 안들것이다.

하지만 throttle 같은 경우는 이벤트가 발생한직후부터 카운트하고 스크롤을 하는중에도 카운트하고난후 실행값을 반환해서 보여주기때문에 더 스무스하게 보여준다,

만약 연관검색어를 예를 든다면 debounce 가 더 좋을수있다 예를들어 가 만쳤는데 연관검색어가 뜬다면 비효율적이기때문에 throttle처럼 주기적으로 모은걸 보내는것보다 debounce처럼 일정시간후 입력한것에 대한 마지막 요청으로 연과검색어를 주는게 효율적이다. 따라서 상황에따라 debounce나 throttle을 골라서 사용해야한다.

Lodash

자바스크립트 유틸리티 라이브러리이다.

이것을 이용해 debounce 와 throttle을 만들어서 쓸수있다.

먼저 import _ from “lodash” 를 쓴후

이런식으로 onChnage 처럼 **_**를 import 하고 변수를 각각 debounce, throttle 이라고 한다음 _안에 debounce, throttle 함수를 사용하여 input 속성 onChange 값에 넣어줘서 비교해본다. Debounce 같은경우 이벤트가 계속 있다면(키보드입력값) 그때동안은 카운트하지않다가 이벤트가 끝날때(키보드를 치지않을떄)그떄부터 200milliseconds 을 카운트한후 거기에 있던 값을 console 로 찍어주었다.

Throttle 경우는 이벤트가 발생한후 이벤트가 끝나지 않더래도 정해진 시간을 카운트하여 출력해준다.

onChange에서 제대로 동작하지 않는현상

그런데 위에처럼 onChange안에서  state을 Set할경우 debounce가 원래대로 작동안하고 입력한대로 계속 출력해준다. 이유는 search 컴포넌트가 함수형 컴포넌트이기떄문이다. 리랜더링될때 변수들도 초기화되기때문에 설정한시간을카운트하지않고 throttle은바로 뽑아내거나, debounce는 이벤트가끝날때 똑같은값이 후두두두두 나온다.

useCallback

그래서 이럴때 useCallback 을 쓴다. 이 useCallack 은 리랜더링 되더라도 이 함수를 초기화 하지말라고 설정해준다 내가 memorizing 한 데이터는 계속쓸거다 라는것이다.

위의 사진처럼 설정해주고 실행해보면 원래 debounce 역할을 잘한다.

useCallback 인자값을 각각설명하자면 실행할 함수가 첫번째인자이고, 두번째는 **useEffect처럼 []**안에 들어있는 값이 변할때 초기화 해준다 라는 자리이다.

2번째 인자같은경우 우리가 원하는 debounce 와 throttle을 제대로 실행하려면 초기화시켜주면 안되므로 이땐 빈공간으로 해놓는다.

컴포넌트를 잘 만들기위해선 꼭 알아야하는 개념이다. 나중에 최적화할때 아주 중요한 부분이라고 한다.

 

 

 

무한스크롤

원리

무한스크롤은 현재페이지에서 내리다가 끝을 만나면 그다음페이지를 가져오고 또 끝에 만나면 그 다음페이지를 불러와준다. 만약 더이상 새로운 게시물 데이터가 없다면 처음 데이터 게시글로 보여주게한다.

쓰는이유

이때 파이어스토어에서 모든 데이터를 통으로 가져오지않고 잘라서 가져오게 된다. 만약 게시글을 한번에 여러개 다 가져오면 페이지 로드 속도가 엄청 안좋아 지고 클라이언트에서 엄청나게 많은 컴포넌트를 그려 느려질수도 있다. 따라서 이러한걸 막기위해 우리는 무한 스크롤을 이용한다. 이를위해 firestore에서 쿼리를 보내는 방법이 필요하다.

이용방법

공식문서에서 확인하면 orderBy 와 limit 을 이용하여 불러올 데이터갯수를 제한을 하고 스크롤 맨 아래지점에 도착했을때 이벤트가 발생하게 하는데 이때 throttle을 사용한다. throttle 말고 debounce도 있는데 상황과 용도에 따라 결정하게되는데 이때는 throttle이 더 적합하다. 또한 스크롤에 대한 이벤트가 필요하므로 window.addEventListener를 이용하여 "scroll" 일때 throttle을 실행하게 하였고 useCallback 으로 초기화를 막아주었다.