[Level 1] 미션 3: 나만의 유튜브 강의실 미션 1단계

 

debounce VS throttle

---

두 방법 모두 성능을 위해 이벤트를 제어하는 방법이다. 디바운스와 스로틀은 연속된 이벤트들을 그룹화해서 과도한 이벤트 핸들러의 호출을 방지한다.

 

See the Pen Untitled by SunHo Park (@prefer2) on CodePen.

 

 

본격적으로 알아보기 전에, 예시를 통해 어떤 작동을 구현하려고 하는지 알아보자. 버튼을 빠르게 눌러보면 기본, 디바운스, 스로틀된 이벤트 핸들러의 호출 빈도의 차이를 볼 수 있다.

 

debounce

짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 한다. 여러 연속된 이벤트 콜을 하나로 그룹핑할 수 있게 한다.

 

throttle

짧은 시간 간격으로 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 한다. 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록해준다.

 

대부분 무한 스크롤을 구현할때는 throttle을 사용하지만, 일정 범위에 정해진 시간이상 머물면 화면을 더 로딩하기 위해서 이번 미션에서는 debounce를 사용해보았다. throttle의 경우에는 무한 스크롤에서 스크롤을 내릴때마다 이를 감지해서 더 로딩을 할 때 사용하기 좋은 것 같다.

 

fetch

---

fetch 함수는 HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환한다.

fetch()로 부터 반환되는 Promise 객체는 HTTP error 상태를 reject하지 않습니다. HTTP Statue Code가 404나 500을 반환하더라도요. 대신 ok 상태가 false인 resolve가 반환되며, 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환됩니다.

이러한 이유로 여러가지 에러의 경우 따로 처리를 해 주어야 한다. data.status를 하면 200~299 범위의 값만 ok를 나타내게된다. 400대나 500대의 오류를 처리해주기 위해서는 이를 사용하여 처리해주어야한다.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(data => {
    if (!data.ok) {
      throw new Error(data.status)
    }
    return data.json()
  })
  .then(post => {
    console.log(post.title)
  })
  .catch(error => {
    console.log(error)
  })

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

 

 

테스트

---

이번에는 localStorage, fetch관련 로직들이 주를 이루다보니 테스트를 작성하는데 고민이 많았다. 과연 localStorage에 잘 저장되었는지, fetch를 잘 해오는지를 어떻게 테스트해야할까. TDD로 작성을 하고 싶었지만 테스트 작성이 너무 어려워서 TDD를 진행하지 못했다. fetch나 localStorage를 mock함수로 대체해서 작성할 수는 있지만 fetch자체만을 체크하기에는 테스트를 위한 테스트를 작성하게 되어서 옳은 방법이 아닌 것 같다(가상의 데이터 -> fetch mock함수 -> 가상의 데이터 잘 나오는지 확인? 당연히 잘 나오게 됨). 이럴때는 어떻게 테스트해야할까....? 다른 분들 코드를 훔쳐봐야겠다.

 

node-fetch

node.js에는 fetch가 없기 때문에 node.js 기반으로 돌아가는 Jest에서 fetch를 테스트 할 수 없다. 직접 mock을 작성하거나 node-fetch를 사용해야한다. 정확한 이유는 모르겠지만 v3은 작동이 안된다. v2로 설정해서 설치해주어야한다.

https://www.npmjs.com/package/node-fetch

https://jestjs.io/docs/next/bypassing-module-mocks

 

URLSearchParams

---

get

파라미터 값을 쉽게 가져올 수 있다. for...of 을 통해 반복문을 사용할 수도 있다.

const params = new URLSearchParams('q=search+string&version=1&person=Eric');

params.get('q') // "search string"
params.get('version') // "1"
Array.from(params).length // 3

// for...of 사용하기
for (const [key, value] of mySearchParams) {
	console.log(key, value);
}

 

new URLSearchParams

새로운 URLSearchParams 객체를 생성하고 반환한다. 

const params = new URLSearchParams({"foo": "1", "bar": "2"});
console.log(params.toString()); //foo=1&bar=2

 

이를 URL 객체와 함께 적용하면 보다 편하게 url을 작성할 수 있다

const url = new URL('https://example.com');
  const parameter = new URLSearchParams({
    part: 'snippet',
    maxResults: 10,
    q: 'keyword',
    type: 'video',
  });

  url.search = parameter.toString();
  console.log(url.toString()) 
  //https://example.com/?part=snippet&maxResults=10&q=keyword&type=video

 

https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en 

https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams/URLSearchParams