[moin-review] 2021-11-23

Facts

• 서버에서 받은 정규식 client 연결
• 정규식 검사 debounce 처리

Findings

• debounce

Feelings

// before 
const onChangeRecipientField = (fieldName: string, value: string) => {
    dispatch({ type: UPDATE_RECIPIENT_FIELD, payload: { fieldName, value: checkRemitInputPattern({ regexList, fieldName, value }) } })

    const debounceInput = debounce((fieldName, value) => {
      checkRecipientField(fieldName, value)
    }, 250)
    debounceInput()
  }

// after 


  const debounceInput = useCallback(
    debounce((fieldName, value) => {
      checkRecipientField(fieldName, value)
    }, 250),
    [],
  )

  const onChangeRecipientField = (fieldName: string, value: string) => {
    dispatch({ type: UPDATE_RECIPIENT_FIELD, payload: { fieldName, value: checkRemitInputPattern({ regexList, fieldName, value }) } })

    debounceInput(fieldName, value)
  }
  

위의 함수를 onChange event 가 발생할 때마다 호출해서 input 의 상태를 react 에서 control 하고 정규식을 검사하는 함수를 debounce 하려 했다.

함수를 호출할 때마다 함수가 선언되어 이름만 같고 pointer 는 다른 함수가 계속 생성된다는 것을 깜빡했다.

때문에 하나의 함수 호출에 대해서 debounce 되지 않고 각각 새로운 함수에 대해서 debounce 되어 버려 debounce 하는 의미가 없게 되어 버렸다.

해결하기 위해 useCallback 사용하여 함수를 새로 선언하지 않도록 하여 함수 pointer 를 유지했다.

만약 함수 또한 pointer 라는 개념이 없었다면 왜 안되지 하면서 구글에다 검색이나 하며 시간을 날렸을 것이다.

프레임워크나 라이브러리에 대한 것은 검색하면 바로 알 수 있다.

애초에 공식문서에 깔끔하게 정리해놓는다.

하지만 기본기 때문에 버그가 발생한다던지 하면 코드 작성한 사람 말고는 해결하기 힘들다.

결국 기본기가 중요하다. next.js 니 svelte 니 하는 것들은 결국 기본기가 없다면 잡기술에 불과하고 1~2년 있으면 금세 바뀐다.

하지만 기본기는 바뀌지 않는다.

C 언어와 c++ 로 기본기를 더 확실히 잡아야 겠다.