원티드 프론트엔드 인턴쉽 10기 - 2주차 - (1)

 

근황

 

코로나 이슈 + 기존에 하던 프로젝트 마무리 + 새로 시작하는 프로젝트 + 프론트엔드 인턴십으로

너무 정신없이 시간이 지나가서 블로깅을 못했다...

 

 

 

새로운 과제

 

이번 두번 째 과제는 검색기능을 구현하는 것이다.

 

기업과제이고 기업에서 api를 제공해 준다.

 

이번 과제의 핵심은 검색기능을 구현할 때 API호출을 최소한으로 할 수 있도록 구현하는 것이다.

 

 

일단 이 부분을 들었을 때 가장 먼저 떠 올린 건 '디바운스'이다.

 

디바운스는 사용자 인터페이스에서 일반적으로 발생하는 빈번한 이벤트를 처리하는 방법 중 하나이다.

 

내가 구현한 디바운스 훅은 

 

import { useState, useEffect } from 'react';

function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

이다.

 

 

그다음으로 '로컬 캐싱'인데 이 부분은 내가 너무 생소하기도 하고 막상 이 단어를 들었을 때 어떻게 해야 할지 바로 떠오르지는 않았다.

 

로컬캐싱에 대해서 구글링을 통해 몇 가지로 추려보면 다음과 같다.

 

1. 실행 컨택스트 내에서 캐싱 구현
2. 캐시 스토리지 사용

정도로 나눠볼 수 있을 거 같다.

 

우리 팀은 각각 기능을 이틀 동안 구현해서 best practice를 뽑아서 제출하자고 했다.

 

 

처음에 기능 구현을 할 때 캐시 스토리지에 대해선 몰랐었기 때문에 실행 컨택스트 내에서 캐싱을 구현했다.

 

검색을 할 때 디바운스로 api호출을 최소화하고, 그리고 검색이 된 부분을 key, value로 state에 담아서 저장했다.

 

그리고 각각 저장될 때 setTimeout을 걸어서 일정 시간이 지나면 자동으로 소멸할 수 있도록 코드를 구현했다.

 

내가 아는 선에선 최대한 그럴듯하게 구현을 완료했다.

 

 

 

기업과제

 

 

하지만 이후에 엣지케이스를 생각해 봤을 때 검색을 엄청 많이 하게 되면 state가 담고 있는 값이 비대해질 것 같아서 걱정이 되긴 했다.

 

이 부분은 검색을 좀 해본 다음에 어떤 방식이 가장 효율적이고 괜찮은 방법인지 찾아봐야겠다.

 

 

요즘 드는 생각

 

 

요즘 개발을 하면서 자주 느끼는 것은 

 

 

 

 

 

"기능 구현은 다 할 수 있다."이다.

 

 

 

 

 

 

그렇지만 그 안에 수많은 갈래가 생기고 그 갈래 속에서 고민하고 선택해야 한다.

 

나는 그 갈래를 선택하는 데 있어서 경험이 너무 부족하고 기준도 명확하지 않은 것 같다.

 

앞으로는 경험을 쌓으면서 그 기준을 명확히 할 수 있도록 고민해야겠다.