Javascript30. 06 - Type Ahead

javascript30

Javascript30

정리 : Javascript30을 공부한 내용 기록

06 - Type Ahead

목표

요구사항

  1. 문자를 입력하면 유사한 내용을 하단 검색어에 보여준다.

필요기술

  1. fetch(promise)
  2. 정규표현식

배운 것

Javascript

fetch

fetch 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있다.

fetch(endpoint)
  .then((response) => response.json())
  .then((json) => cities.push(...json));

🏆 fetch를 사용하면 promise를 반환한다. 이에 대해 더 공부해보기.

정규표현식

정규표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴이다.

const numberWithCommas = (number) => {
  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};

RegExp 생성자는 패턴을 사용해 텍스트를 판별할 때 사용한다.

const findMatches = (wordToMatch) => (cities) => {
  return cities.filter((place) => {
    const regex = new RegExp(wordToMatch, 'gi');
    return place.city.match(regex) || place.state.match(regex);
  });
};

👋


Written by@davidyang2149 (About me)
Hello World! This is David Yang Dev Blogs.

GitHub