프로그래머스 데브코스 TIL - Day 26 / 고양이 사진 검색기

 

✅ 오늘의 학습

- 고양이 사진 검색기 만들기

 

---

 

initialState를 지정해서 전달해주는 이유

검색기를 만드는 과정에서 부모컴포넌트에서부터 intialState를 지정해서 setState를 통해 전달해주는데
이렇게 구현해 놓으면 입력값들을 storage에 넣어놓고 초기화 단계에서

localstorage의 값을 하위 컴포넌트로 밀어넣어 줄 수가 있다.

 

 

textContent

element 안에 tag가 들어있어도 텍스트 값만 꺼내서 가지고 올 수 있다.

<div><p>안녕?</p></div>

console.log(divElement.textContent) // 안녕

 

부모, 자식 컴포넌트 간의 setState

상위 컴포넌트에서 값을 내려주고 현재 컴포넌트에서 새로운 값을 추가해서 관리해야 할 때
하나의 setState 함수로 어떻게 구현을 할까 했는데 아래와 같이 구현할 수 있었다.

  this.setState = (nextState) => {
    this.state = { ...this.state, ...nextState };
    this.render();
  };

기존의 값을 살리고 새로운 값을 넣어주는 방식이다.

 

 

커서 값을 통한 검색리스트 표시

  this.render = () => {
    const { cursor, keywords } = this.state;
    $suggest.innerHTML = `
    <ul>
    ${keywords.map((keyword, i) => `<li class="${cursor === i ? "active" : ""}">${keyword}</li>`).join("")}
    </ul>
    `;

    $suggest.style.display = keywords.length > 0 ? "block" : "none";
  };

cursor의 기본 값을 -1로 주고 keydown을 누르면 +1 keyup을 누르면 -1로 제어를 할 수 있다.
이런 접근 방식은 이번에 처음 알게 되었다.

 

Enter클릭 시 해당 검색어 전달하기

e.target이 input으로 찍히는데 li의 text에 어떻게 접근을 해야할까 라는 생각을 했는데
this.state에 있는 cursor정보로 해당 keyword에 접근할 수가 있었다.

case "Enter":
  onKeywordSelect(this.state.keywords[this.state.cursor]);
  break;

 

함수로 분리한 debounce

이전에 노션 클로닝 과제를 하면서 분리해서 사용을 했었는데

아래와 같이 하나의 debounce함수를 작성해 놓고 여러 곳에서 꺼내 쓸 수 있다.

function debounce(fn, delay) {
  let timer = null;
  
  return function () {
    const context = this;
    const args = arguments;

    clearTimeout(timer);

    timer = setTimeout(() => {
      fn.apply(context, args);
    }, delay);
  };
}


debounce(async (keyword) => {
// 실행할 내용 작성
 }, 300)
 
// 실행하려는 함수를 debounce로 감싸서 사용 가능

 

sessionStorage를 이용한 검색어 저장

 

키워드를 입력할 때마다 api호출을 하여
자동으로 해당된 키워드가 포함된 키워드 리스트들을 보여주게 되는데
이전에 검색한 이력이 있을 경우 서버 호출을 하지 않고
storage에 저장된 리스트를 보여주는 방식이다.

 

* 브라우저 종료 시 모두 삭제하기 위해 sessionStorage를 사용했다.

 

 

// 기존에 이렇게 바로 검색어 리스트 데이터를 불러왔다면
keywords = await request(`/keywords?q=${keyword}`);


// 아래와 같이 cache된 검색어 리스트들을 불러올 수 있따
let keywords = null; //초기화

if (this.cache[keyword]) {
  keywords = this.cache[keyword];
} else {
  keywords = await request(`/keywords?q=${keyword}`);
  this.cache[keyword] = keywords;

  storage.setItem(KEYWORDS_CACHE, this.cache);
}

 

컴포넌트 내의 초기화 단계에서 미리 this.cache에 getItem으로 storage를 불러오고
키워드 검색 이벤트가 발생했을 때 this.cache 값에 의해서 코드가 처리된다.

 

---

✍ 느낀 점

 

이번 강의가 아닌 이전 스터디에서 검색 관련해서 간단하게 해본 적이 있었는데도

새로 알게된 것들이 많았다! 배운 적은 있었지만 기억 저편에 있던 것들도 다시 꺼내지기도 했다.

요즘 내내 vanillaJS만 하다보니 처음엔 어려웠지만 점점 알게 되는게 많아지고, 재밌어지는 것 같다.

과제에서도 그렇고 storage를 활용하는 것을 많이 터득하게 되었다.

실무에서는 어떤식으로 관리를 할 지 궁금하다🤔