autocomplete input 만들기

목표

📊 클래스 다이어그램

⏳ 동작 방식

• App에서 searchBox와 serachResult 컴포넌트를 생성.

• searchBox는 suggestionList 컴포넌트를 생성.

• keydown 이벤트가 일어날 때 value 값을 받아 suggestionList 컴포넌트의 상태를 갱신.

• 이벤트는 debounce 되어 api 호출 시간을 지연(300ms).

• 만약 캐싱된 결과가 있다면 캐싱된 결과를 보여주고 그렇지 않을 경우 api를 호출.

• value가 없다면 suggestionList 컴포넌트에 hide 속성을 주어 보이지 않음.

• suggestionList의 cursor가 focus를 만들고 있으므로 event key가 ArrowUp 또는 ArrowDown일 때 prevCursor와 nextCursor를 계산해 다음 cursor를 상태로 전달.

• classList 중 clear-icon이란 이름을 갖고 있을 때 발생.

• input의 value를 빈 값으로 넣고 다른 검색을 할 수 있도록 focus 시킴.

• submit 이벤트가 일어나거나 li 태그를 클릭할 경우에 발생.

• App의 onSubmitInput이 searchResult에 content 상태를 전달하는데, onSubmitInput은 searchBox의 inpute에 value가 담길 때 실행.
• input에 value가 담기면 suggestionList는 cursor 값과 일치하는 content를 전달.

🤔 고민한 기록

• 한글이나 중국어같이 영어가 아닌 글자들은 한 글자가 영어보다 많은 정보를 담고 있기 때문에 키 입력 순간부터 입력 완료 까지 시간이 걸리고,

• 이는 keydown 이벤트가 이미 발생하고 난 후에도 진행 중일 수 있다는 것을 의미한다.

• 그 상태를 isCompsing 이란 event 객체 속성값으로 확인 할 수 있다는 것이다.

const prevCursor = this.state?.cursor ?? 0;
const suggestionList = this.state?.suggestionList ?? [];

const API_END_POINT = "blabla";

const getSuggestionListPath = (word: string) =>
  `${API_END_POINT}/autocomplete?value=${word}`;

export const fetchSuggestionList = async (
  word: string
): Promise<SuggestionItem[]> => {
  try {
    const res = await fetch(getSuggestionListPath(word));
    if (!res.ok) {
      throw new Error("Fail to call api");
    }

    return res.json();
  } catch {
    return [];
  }
};

export interface SuggestionListProps {
  suggestionItems: SuggestionItem[];
}

export interface SuggestionItem {
  text: string;
  id: number;
}

document.addEventListener("click", (e) => {
      const $eventTarget = e.target as HTMLElement;
      if (!$eventTarget.closest(idToQuery(this.$target.id))) {
        this.suggestionListComp?.hide();
      }
  });

• suggestionList, suggestionItem, suggestionItems의 혼재
• 여기서 특히 suggestionList와 suggestionItems가 중복된다 생각했다. 그래서 suggestionItems를 suggestionList로 통일하고 List안에 있는 각각을 suggestionItem으로 정의했다.

• enter를 submit으로 변경
• keydown 이벤트를 만들다 보니 Enter를 누르면 submit이 되기 때문에 submit이 되었을 때 관련된 행동을 Enter를 눌렀을 때 일어나도록 코드를 작성했다. 하지만 Enter는 하나의 keydown 이벤트일 뿐 submit이라고 하긴 어렵다. 그래서 submit 이벤트를 만들어 Enter에 적힌 코드를 옮겼다. 같은 동작이지만 코드가 확실히 분명해진 기분이다.

• className을 classList로 변경
• 입력을 지워주는 버튼 등 특정 className으로 판단해서 행동을 붙일 때가 있다. 이때 className을 event target으로부터 추출하여 사용했다. 근데 className은 class가 하나일 때만 판별할 수 있다. 따라서 여러 class가 들어갈 것을 고려해 classList에 contain이란 속성으로 class를 판별하는 것이 확장성 측면에서 좋다고 생각하여 변경했다.

• keydown 이벤트는 wait을 걸거나 intercept 해야 한다.
• keydown 이벤트 중 downArrow를 명령했는데 api가 호출됐음에도 불구하고 downArrow만 적용이 안 돼서 헤맸다. 해결은 제목에 나와있다 시피 눈에는 api가 바로 호출된 것 같아도 downArrow가 api 호출이 완료되기 전에 불려서 방향키가 동작하지 않는 것처럼 보인 거였다. 생각하면 쉬운 원리였는데 cypress는 처음이라 사용법이 잘못됐을 가능성 때문에 더 헤맸다.
• api 호출을 기다리는 방법은 2가지다. 일정한 시간 동안 wait를 주거나 api 호출을 intercept하고 이를 기다리거나. 나는 후자를 선택했다. 가볍게 wait를 줘도 되지만 wait을 줄 때 생기는 불안정함이 걸렸다.
• 네트워크 상태가 순간 느려져서 api 호출이 wait보다 느려질 수도 있다.
• 임의로 정의한 시간을 기다려야 한다.
• 정확도가 높지 않다.
그래서 intercept 하기로 했다.

//intercept 하는 함수를 만들어 사용.
const interceptSuggestionList = () => {
    cy.intercept("/web-front/autocomplete?value=*").as(
      "interceptSuggestionList"
    );
  };

• api 호출 여부를 확인하는 방법
• input에 입력값이 없을 때 호출이 안 되는 걸 테스트하기 위해 api의 호출 여부를 판단해야 했다. 찾아보니 함수를 감시하는 spy로 해결이 될 것 같았다. 그래서 공식 문서를 보며 수없이 시도했지만 감시가 되지 않았다. 이때도 내가 spy를 사용할 줄 모른다고 생각해 예시를 찾아다녔다. 하지만 spy는 프로덕트와 테스트가 돌고 있는 컨텍스트가 달라 돔이 아닌 함수를 테스트는 어렵다고 하여 spy는 사용하지 못했다.
• 그렇다면 어떻게 api 호출 여부를 확인할 수 있을까? 아직 잘 모르겠다.. 우선 한가지 알아낸 건 api 호출이 일어나지 않으면 intercept도 되지 않는다. 그래서 intercept가 일어나지 않으면 true로 만들고 싶은데 코드를 작성하다 보니 오히려 헷갈리게 만드는 코드가 된 것 같아서 여기에만 남겨둔다.

it("input value가 없으면 api를 호출하지 않아요.", () => {
      clearSessionStorage();
      interceptSuggestionList();
      searchWord("   ");
      cy.intercept("/web-front/autocomplete?value=*", () => {
        expect(false).to.be.true;
      });
    });