2022/09/20 - TIL

1. throttle 사용방법

: 예시

window.addEventListener(
  'scroll',
  _.throttle(() => {
    const currentPagePostion = window.pageYOffset;
    return toggleScrollIcon(currentPagePostion);
  }, THROTTLE_TIME),
);

방법이야 검색하면 나오지만, throttle을 사용할 때, 사용 모양을 자꾸 틀려 시간이 소모가 되었다 throttle의 사용방법은

DOMNode.addEventListener(
	'event',
	_.throttle(()=>functionName(), THROTTLE_TIME)

다음과 같다. _.throttle과 그 안에 콜백함수를 화살표함수의 옆에 사용하거나, 화살표 함수의 return 값으로 주어지면 그 값을 기준으로 throttle을 사용한다.

2. 가독성 좋은 함수 작성방법.

Counter 함수를 만드는 과정에서,

1. increase()
2. counter.increase()

증가함수를 단일로 사용하기 위하여 1번과 같은 방법으로 값을 만든 적이 있었다. 코드를 작성하던 당시에는 단일 함수로 사용하면 직관적으로 어떤 기능인지 알 수 있고 식별이 쉬우니 이게 좋을 줄알았았는데, 다른 사람들과 이야기해본 결과 단순히 increase는 무엇을 증가시키는 것인지 알 수 없기에 counter와 같은 객체 뒤에서 increase를 사용 하는 것으로 어는 것을 증가시키는지 알 수 있게 하는 것이 가독성(이해)가 좋다.

3. toggle 사용 방법

이미 아주 예전부터 toggle을 사용하는 방법은 알고 있었지만 toggle의 두번째 파라미터를 사용는 방법은 모르고 있었다. toggle의 두번쨰 파라미터를 사용하면 다음과 같은 효과를 얻을 수 있다.

let condition1 = true
let condition2 = false
$body.classList.toggle('className', condition1);
$body.classList.toggle('className', condition2);

위의 조건처럼 className을 가진 class에서 두번째 파라미터가 true라면 토글을 강제로 add로 사용하고 그 뒤의 조건이 false라면 토글을 강제로 remove를 사용한다.

4. setTimeout 사용법

setTimeout(() => {
    $body.classList.remove('hide');
    clearTimeout(timerId);
  }, SETTIMEOUTTIME);

setTimeout은 throttle과 같이, 콜백함수를 화살표함수 안에 넣어야 하지만 굳이 return 할 필요는 없다

5. getComputedStyle

getComputedStyle(document.querySelector('.tabs')).getPropertyValue('--tab-width')

getComputedStyle을 이용하면 CSS, Inline, JS로 계산된 CSS의 값을 모두 불러 올 수 있기 때문에 스타일에 적용된 값을 읽어와서 계산하는 경우에 유용하게사용할 수 있다.

toggle같은 경우에는 여러번 지적을 받았지만 지적을 받고도 아직 먼저 생각을 못하는 것이 자주 사용을 해봐야할 것 같다.