[Vanilla Javascript Study] # 3. fetch API로 움짤 검색기 만들기

3주차에는 TodoList로 공부한 내용을 바탕으로, fetch API를 ajax 요청하여 움짤 검색기를 만들어보는 미션을 받았다.

 

[필수 구현사항]

• SearchInput 컴포넌트: input의 내용이 변경되면 fetch API를 호출하여 데이터를 가져오는 컴포넌트
• SearchResult 컴포넌트: 
  • 생성 시 파라메터로 data, target 두 개의 파라메터를 받습니다.
  • data: 렌더링에 사용할 데이터
  • target : html string을 렌더링 할 element의 표현식 (ex: #search-result)
  • function SearchResult (data, target) { .... }
  • 이번에 진행했던 것처럼 해당 컴포넌트는 setState, render 함수를 갖고 있습니다.

 

[추가 구현사항]

✎ async await 사용하기

• 가독성을 위해 fetch해오는 코드를 promise에서 async, await을 사용하는 코드로 변경

✎ debounce 기법 활용하기

• Input에 검색어 입력 시 debounce 기법을 활용하여 불필요한 요청이 발생하는 것을 방지
• 여기서 나는 debounce기법만으로는 부족한 것 같아 compositionend 이벤트를 추가로 활용했다.

inputEventListener(){
	this.#$searchInput.addEventListener('compositionend', e => { //fetch만 하고 히스토리 업뎃은 안할거야
	this.whatToDo(e)})
	
    this.#$searchInput.addEventListener('keyup', e => { //히스토리 업뎃은 이때만
	if(e.key !== 'Enter') return;
	this.whatToDo(e)})
}

whatToDo(e){
	const value = e.target.value
	if(value === null || value === undefined || value === '') return;

	if(e.type === 'compositionend'){
		this.#getFetchedJJal(value)
	}else if(e.type === 'keyup'){
		this.#getSearchKeyword(value)
	}
}

✎ SearchHistory 컴포넌트 추가

• 움짤 검색 시마다 히스토리 데이터가 쌓이는 SearchHistory 컴포넌트 추가
• 히스토리를 클릭하면 해당 검색어로 재검색
• 히스토리를 클릭해 발생한 검색에 대해서는 히스토리가 쌓이지 않음

 

[결과물 github link]

GitHub - jazzo5947/Vanilla-JS-Study: Vanilla JS Study Managed by David