[JavaScript30] 6. AJAX Type Ahead with fetch() | fetch(), Spread Operator, RegExp

📃 요구사항

input창에 문자를 입력하면, 일치하는 city나 state의 값을 하단에 출력한다.

✨ 결과화면

💻 소스코드

🙄 내가 작성한 코드

며칠간 이것저것 찾아보면서 헤맸는데, json 데이터를 가져와서 city, state, population 데이터를 뽑아내고 if문으로 조건을 주는 것까지 작성했다. 그런데 내가 쓴 코드는 한 li안에 추출된 모든 object가 들어가는(;;;) 문제가 있었다. 결론은 전반적으로 완벽하게 완성하지 못했다. 그래서 강의를 보고 따라 쳐보면서 완성시켜본 다음, 개인적으로 다시 한 번 풀어보기로 했다.

🤗 개선된 강의 코드

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Type Ahead 👀</title>
    <link rel="stylesheet" href="style.css" />
    <script src="before.js" async></script>
  </head>
  <body>
    <form class="search-form">
      <input type="text" class="search" placeholder="City or State" />
      <ul class="suggestions">
        <li>Filter for a city</li>
        <li>or a state</li>
      </ul>
    </form>
  </body>
</html>

JS

const endpoint =
  "https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json";

const cities = []; // 일치하는 아이템을 담을 빈 배열

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

function findMatches(wordToMatch, cities) {
  return cities.filter((place) => {
    // 입력과 일치하는 city나 state 찾기
    const regex = new RegExp(wordToMatch, "gi");
    return place.city.match(regex) || place.state.match(regex);
  });
}

function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

function displayMatched() {
  const matchArray = findMatches(this.value, cities);
  const html = matchArray
    .map((place) => {
      const regex = new RegExp(this.value, "gi");
      const cityName = place.city.replace(
        regex,
        `<span class="hl">${this.value}</span>`
      );
      const stateName = place.state.replace(
        regex,
        `<span class="hl">${this.value}</span>`
      );
      return `
        <li>
          <span class="name">${cityName}, ${stateName}</span>
          <span class="population">${numberWithCommas(place.population)}</span>
        </li>
      `;
    })
    .join("");
  suggestions.innerHTML = html;
}

const searchInput = document.querySelector(".search");
const suggestions = document.querySelector(".suggestions");

searchInput.addEventListener("change", displayMatched);
searchInput.addEventListener("keyup", displayMatched);

📖 TIL

.fetch()

fetch() 메서드를 사용하면 비동기 네트워크 통신을 알기쉽게 기술할 수 있다. 그런데, 단순히 fetch()만 사용하게 되면 그냥 단순히 Promise 객체를 반환한다. 그래서 json() 메서드를 사용하면, HTTP Response의 body에 있는 텍스트를 JSON 형태로 변환해주고, 이것을 사용할 수 있게 된다. 그래서 보통 다음과 같은 형태가 디폴트로 사용된다.

fetch('http://example.com/movies.json')
	.then((response) => response.json())
    .then((myJson) => console.log(JSON.stringify(myJson)));

API 호출이 실패했을 때는, catch()를 통해 예외(error) 객체를 reject할 수 있다. Promise에 대한 것은 여기에 정리해 두었으니, 한번 복습해보는 것이 좋을 것 같다. 강의에서도 위와 같은 형식으로 JSON을 가져온 후, cities라는 빈 배열에 push()하여 넣고 있다. 그런데 코드를 자세히 보면, 이상한게 눈에 띈다.

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

그냥 push(data)를 해준게 아니라 인자 앞에 점 세개(...)가 붙어있다. 이게 뭔지 궁금해서 찾아봤다.

Spread Operator(...연산자)

Spread 연산자는 ES6에서 새롭게 등장한 문법이다. Spread 연산자는 배열, 문자열 등 iterable object의 element를 하나씩 분리하여 전개하기 위해 사용한다. iterable object는 반복 객체로써, 객체의 원소에 하나씩 차례로 접근이 가능하다. MDN에서는 다음과 같이 정의되어 있다.

전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.

잘 이해가 되지 않아서 좀 더 찾아보았다. 아래에 간단한 예시가 있다.

const arr = [1, 2, 3, 4, 5];
console.log(arr); // [1, 2, 3, 4, 5]
console.log(...arr); // 1 2 3 4 5

예시를 보았을 때, Spread 연산자는 배열의 각 원소를 쪼개는 것 같다.

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [...arr1, 6, 7, 8];
const arr3 = [...arr1, 6, 7, 8, ...arr1];
console.log(arr1); // [1, 2, 3, 4, 5]
console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr3); // [1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5]

또, 기존의 Object는 건드리지 않으면서도 그것을 복사해서 특정 항목을 새롭게 집어넣을 수 있다. 이 때, 원본 객체 내의 요소를 변경하는 경우에는 새로운 객체 안의 요소 값도 변경된다. 이러한 Spread 연산자는 대체로 객체 복사, 객체 병합 등에 사용되는 것 같다.

RegExp

RegExp는 문자열에 포함된 특정 문자 조합과 대응시키기 위해 사용되는 패턴이다. 정규 표현식을 구현한 JavaScript 표준 내장 객체이고, 생성하는 문법은 다음과 같다.

new RegExp(검색패턴[, 플래그]);

플래그는 정규표현식의 검색 방식을 설정하기 위해 사용하는데, 하나 이상의 플래그를 동시에 설정할 수 있다. 대표적인 3가지의 플래그를 살펴보면 다음과 같다.

i(ignore case)	대소문자를 구별하지 않고 패턴을 검색한다.
g(global)	대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색한다.
m(multi line)	문자열의 행이 바뀌더라도 패턴 검색을 계속한다.

👀 참고

youtube Wes Bos

https://www.youtube.com/watch?v=y4gZMJKAeWs&list=PLu8EoSxDXHP6CGK4YVJhL_VWetA865GOH&index=6

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

'language > javascript' 카테고리의 다른 글

[JavaScript30] 7. Array Cardio Practice (2) \| .some(), .every(), .find() and [...SPREADS] (0)	2022.02.05
[JavaScript30] 5. Flexbox + JavaScript Image Gallery (0)	2021.12.10
[JavaScript30] 4. Array Cardio Practice (1) (0)	2021.12.09
[JavaScript30] 3. CSS Variables \| CSS 변수, setProperty() (0)	2021.12.06
[JavaScript30] 2. Clock \| setInterval(), transform, transition (0)	2021.12.04