[javascript] 쓰로틀링 vs 디바운싱 / 페이지네이션 / 메타데이터

개념개념

• 쓰로틀링 throttling:
  마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
  "일정한 간격으로 한 번만!"
• 디바운싱 debouncing:
  연이어 호출되는 함수 실행 요청 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것
  "특정 시간 이후 한 번만!"
  • 결정적 차이는, 디바운싱은 요청이 들어오는대로 받아주지만 결국 실행하는 건 가장 마지막 요청이고, 쓰로틀링은 요청을 한 번에 하나만 들어주고 아직 현재 실행하고 있는 턴이 종료되지 않았다면 어떤 요청도 받아들이지 않는다는 것
  • 사용법은,,, 주로 디바운싱의 경우 검색 결과 목록 표시나 블로그 글쓰는 에디터 자동저장 기능 등에 쓰인다 함
    쓰로틀링의 경우 예컨데 사용자가 악의적으로 어떤 이벤트 실행을 광클했다면 쓰로틀링으로 마지막 함수를 기다리지 않고 첫 번째 클릭에 의한 이벤트만 실행 시키고 주어진 시간 동안 나머지는 무시할 수 있음
  • 예시 코드 (출처: onlydev.tistory.com)

    // 디바운싱
    const clickBtn = document.querySelector('#clickBtn');
    const clickCnt = document.querySelector('#clickCnt');
    const debouncingCnt = document.querySelector('#debouncingCnt');
    
    let timerId;
    
    function debouncing(func, timeout = 300) {
      clearTimeout(timerId);
      timerId = setTimeout(func, timeout);
    }
    
    function delayFunction() {
      debouncingCnt.innerHTML = parseInt(debouncingCnt.innerHTML) + 1;
    }
    
    clickBtn.addEventListener('click', () => {
      clickCnt.innerHTML = parseInt(clickCnt.innerHTML) + 1;
      debouncing(delayFunction);
    });
    
    // 쓰로틀링
    const clickBtn = document.querySelector('#clickBtn');
    const clickCnt = document.querySelector('#clickCnt');
    const throttlingCnt = document.querySelector('#throttlingCnt');
    
    let timerId;
    
    function throttling(func, timeout = 300) {
      if (timerId) {
        return;
      }
    
      timerId = setTimeout(() => {
        func();
        timerId = undefined;
      }, timeout);
    }
    
    function delayFunction() {
      throttlingCnt.innerHTML = parseInt(throttlingCnt.innerHTML) + 1;
    }
    
    clickBtn.addEventListener('click', () => {
      clickCnt.innerHTML = parseInt(clickCnt.innerHTML) + 1;
      throttling(delayFunction);
    });

 

• 페이지네이션 Pagination:
  다수의 컨텐츠를 여러 페이지로 나누고, 이전 또는 다음 페이지로 넘어가거나 특정 페이지로 이동할 수 있는 버튼을 제공함. (eg. 게시판 등)
  • 참고하기 좋은 블로그 ---
    개념 이해에 도움 됨: https://yonghwankim-dev.tistory.com/578
    구현에 도움 될 거 같음: https://nohack.tistory.com/125
• 메타데이터 Metadata:
  속성정보라고도 하는데, 데이터에 관한 구조화된 데이터임. 다른 데이터를 설명해주고 표현하기 위한 목적으로 사용되며 정보의 인덱스 역할을 함.
  가장 대표적인 예시로 html 태그가 있으며, 이를 활용하여 검색엔진 등으로 쉽게 찾아낼 수 있음. (사진의 날짜 및 시간, 파일 크기, 이미지 크기 등도 하나의 예시임) 

메모메모

• 위의 개념은 첫 javascript 팀플 진행 당시 피드백으로 받은 키워드 중 하나였는데, 메모에 남긴 몇 가지 추가 사항을 열거해보자면, 전엔 유효성 검사를 html로 실행했던 적이 있음. 이런건 script로 validation alert를 하면 좋음 (이제 와서 보면 좀 당연해보이기도 함).
• 데이터베이스에서 id를 정수로 하는 이유는 문자열보다 더 가벼워서임. 그리고 기존엔 userId, resumeId 이런식으로 key값을 썼는데, 그냥 id라고 하고, 외래키로 지정시 저런식으로 작성하셈.
• json이나 아니냐를 중요하게 생각하는 건 서버임. express는 기본적으로 json화를 안함. 그래서 미들웨어를 app.use를 통해 등록해줘야 하는 것. // 사실 여기서부턴 두 번째 프로젝트 메모임
• 몽고DB는 _id(aka. object id)를 마음대로 만듦(특성임).