[📝 Dev-Log - Back] 김민재, 배윤수 / 2021-09-16

# 📝 Dev Log Card

## 오늘은 어떻게 프로젝트에 기여했나요?
- 프론트엔드와 백엔드간의 통신을 위한 Axios 연결
- 단어 검색 페이지 / 실시간 검색어 차트 / 자동완성 기능
- 단어 검색 자동완성 기능 구현을 기존 계획(Throttling을 활용하기)에서 정규 표현식을 활용해 요청하기로 변경
- 우리 서비스는 줄임말을 검색하는 서비스인 만큼 시간 단위로 쪼개서 자동완성 요청을 진행하는 Throttling을 사용하지 않고, 자음, 모음 만 입력했을 때 / 글자 수 5개 초과시 요청을 보내지 않도록 하는 정규 표현식을 활용해서 자동완성 API를 구현했다.

## 오늘의 프로젝트에서 힘든 점은 무엇인가요?
- 실시간 검색어를 구현할 때, `setInterval` JS 내장함수 구현이 어려웠다.
- useInterval 이라는 커스텀 훅을 만들어서 해결했다!
```js
function useInterval(callback, delay) {
const savedCallback = useRef();

// Remember the latest function.
useEffect(() => {
savedCallback.current = callback;
}, [callback]);

// Set up the interval.
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}

// 10초마다 콜백함수(axios 요청) 진행
useInterval(() => {
axios
.get(`${url}/word/chart`)
.then((res) => {
setRealTime(res.data.data);
})
.catch((err) => console.log(err));
}, 10000);
```

## 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [x] API Docs 에 기반하여 Axios 구현
- [x] advanced 목표 달성을 위한 공부