[JS30] Ajax Type Ahead (Ajax 타이핑)

🔥Javascript 30 - Day 06🔥

이번에는 Javascript30의 Day 06에 해당하는 'Ajax Type Ahead'를 정리해봅니다@@@@

---

json 내용 가져오기

우선은 json 내용을 가져와 봅시다.

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));

이게 뭔 소린가 싶죠..... 하나하나 살펴보면 됩니다. fetch부터 궈궈.

fetch()란, 쉽게 말하면 클라이언트가 서버에게 어떤 파일을 응답해달라고 요청하는 것입니다. fetch('hello')는 hello라는 파일을 요청한 게 되죠. 이것은 비동기로 이루어지기 때문에, fetch를 하는 동안 다른 코드를 실행하게 됩니다. 그 작업이 끝나면 '~해줘!'라고 할때 쓰는 게, 콜백함수를 실행시켜주는 then()입니다. 이 콜백함수의 첫 번째 인자로는 response 객체가 들어갑니다. 요 객체는 서버가 응답한 결과를 담고 있어요!

예를 들어, abc.txt라는 파일이 있고 아래의 코드를 실행했다고 합시다.

fetch("abc.txt").then(function (resp) {
  resp.text()
    .then(function (text) {
      console.log(text);
    });
})

그럼 콘솔에는 abc.txt의 내용이 찍히게 됩니다.

이번에는 txt 파일이 아닌 color.json 파일로 시도해봅시다.

[{
    "color": "red",
    "value": "#f00"
  },
  {
    "color": "green",
    "value": "#0f0"
  },
  {
    "color": "blue",
    "value": "#00f"
  },
  {
    "color": "cyan",
    "value": "#0ff"
  },
  {
    "color": "magenta",
    "value": "#f0f"
  },
  {
    "color": "yellow",
    "value": "#ff0"
  },
  {
    "color": "black",
    "value": "#000"
  }
]

fetch(`data/color.json`).then(function (blob) {
  blob.json()
    .then(function (data) {
      console.log(data);
  });
})

짠, 콘솔에 잘 찍혀나오네요! 달라진 건 파일 이름과, text() 대신 json() 메서드를 사용했다는 거죠.
슬슬 맨 처음 작성했던 코드가 감이 올락말락 합니다. endpoint에 해당하는 json의 내용을 fetch한 다음, 그 결과를 배열에다 넣는 거였네요. 앗, 근데 어색한 표현이 하나 있어요. cities.push(...data)는 뭘까요?

이건 전개 연산자(spread operator)라고 하며, ES6에서 추가됐습니다. MDN에 따르면 이런 식으로 사용할 수 있다고 하네요.

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes']; //["head", "shoulders", "knees", "and", "toes"]

어머나 기존 배열인 parts가 새 배열의 lyrics 일부로 잘 녹아들었네요! 그럼 이렇게도 사용할 수 있겠네요.

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

배열이 잘 합쳐졌네요 :^)
그럼 이때 드는 생각. 어라? 그냥 arr1.push(arr2);하면 되지 않아? ...라고 생각했습니다만... 결과는 어떨까요?

누가 여따 배열 이따구로 우겨넣었어!!!

넵. 그냥 배열이 덩그러니 들어갑니다. 그럼 저어어기 위에 있는 코드에서 전개연산자를 빼고, .then(data => cities.push(data));라고 썼다면 결과는 아래와 같겠죠?

혼란하다 혼란해

따라서 전개연산자를 써서 기존 배열인 cities에다가 쏙 집어넣어준 게 됩니다 (짝짝짝)

---

findMatches() 함수 작성하기

이번에는 사용자가 입력한 단어가 데이터 중에 있는지 판단하는 함수를 작성합니다. 조건을 만족하는 경우 그 값만 모아 새 배열로 만들어주는 filter() 메서드가 필요하겠군요.
그 조건은 문자열이 있는가를 판단하는 건데요, 이때는 match() 메서드를 사용해보겠습니다. match()는 정규표현식에 맞는 문자열을 찾아서 배열 객체로 반환합니다. 이때, 배열이 아닌 문자열을 대상으로 함에 주의합시다. 여기서 정규표현식을 논하기엔 스크롤이 부족하므로 스루하고 검색해서 사용해봅니당. 일단 강의에서 작성한 코드를 살펴봅니다.

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

findMatches()라는 함수를 작성했는데 인자 2개가 필요합니다. 하나는 사용자가 검색한 단어고, 하나는 전체 배열이네요. filter() 메서드를 사용하고 있고, match() 메서드도 보입니다. 한편 여기서는 정규식을 new RegExp()라는 생성자를 만들어 쓰고 있네요. 저 gi는 global match와 ignore case를 뜻한다고 합니다. 잘은 모르겠지만 MDN이 그렇다네요ㅎ_ㅎ 한편, place가 city와 state 두 개이기 때문에 || 연산자를 쓰고 있는 것도 체크!!

다른 예제로 좀 더 쉽게 알아봅시다.

var arr = [1, 2, 3, 'red', 'yellow', 'blue', 'black', 'brown'];
var strArr = arr.map(function (e) {
    return e.toString()
}); 

여기 arr라는 배열이 있습니다. 이걸 가지고 findMatches() 함수에 적용시킬 건데, 하나 주의할 점! map() 메서드를 통해 각 요소별로 toString()을 적용시켜 strArr라는 새로운 배열을 만들었는데요, 이는 match()메서드는 String에만 쓸 수 있기 때문입니다. 배열 내 1,2,3은 숫자니까 문자열로 바꿔 줄 필요가 있죠!

이어서 함수를 작성합니다.

function findMatches(array) {
  return array.filter(data => {
    const regex = new RegExp("e", "gi");
    console.log(data.match(regex));
  });
}

findMatches(strArr);

콘솔에 찍힌 결과는 위 이미지대로 입니다. match()메서드가 각 data마다 "e"라는 문자가 있는지 판단해서 있으면 배열 객체를 리턴, 없으면 null을 리턴해주네요. 위 함수를 좀 더 보완합시다. 콘솔에 찍는 대신 filter()가 새 배열을 리턴하게 하고, 판단하는 문자열은 인자로 두자구요!

function findMatches(word, array) {
  return array.filter(data => { 
    const regex = new RegExp(word, "gi");
    return data.match(regex);
  })
}

var newArr = findMatches('o', strArr);
console.log(newArr);

(짝짝짝)

---

사용자 입력한 단어로 결과값 찾기

사용자가 input에 입력하는 값을 가져오고, findMatches() 결과를 보여주려고 합니다. 일단은 input과 결과창을 셀렉팅하고, input에게 이벤트 리스너를 걸어줍니다.

function displayMatches(){
  console.log(this.value);
}

const searchInput = document.querySelector(".search");
const resultArea = document.querySelector(".result");

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

그럼 displayMatches()내에 findMatches()를 사용해봅니다! 인자는 this.value와 배열이 들어가면 되겠죠? 여기선 보기 쉽게 strArr를 그대로 가져다 써보겠습니다.

function displayMatches() {
  const matchArray = findMatches(this.value, strArr);
  console.log(matchArray);
}

그럼 input창에 "r"을 입력하면 콘솔에 ["red", "brown"]이라 찍히는 걸 볼 수 있습니다.
이제 이 배열을 html 형태로 만들면 되겠네요. map()을 활용해서 ㄱㄱ

const html = matchArray.map(color => {
  return `
   <li> ${color}</li>
  `;
});
console.log(html);

물론 일케 작성하면 제대로 안 나옵니다. 콘솔을 살펴보면 html이 배열이란 걸 알 수 있거든요. map()은 배열 객체를 리턴해주니까요! 우리가 원하는 건 문자열이기 때문에 여기선 join()을 사용합니다. join()은 배열의 모든 요소를 연결해 하나의 문자열로 만들어주며, 여기를 참고하면 되겠습니당.
따라서 map() 끝에 join()을 살포시 추가하면 정상적으로 출력됩니다. 이때 매개변수로 아무것도 없으면 쉼표로 구분되고, 빈 문자열("")을 넣으면 구분없이 매끄럽게 연결된다는 점!

const html = matchArray.map(color => {
  return `
    <li>${color}</li>
  `;
}).join("");
resultArea.innerHTML = html;
    

---

정확한 단어 강조 표시하기

마지막 할 일은 사용자가 입력한 단어를 결과값에서 강조 표시하는 일입니다. 사용자가 re를 입력했으면 red에서 re부분만 강조해주는 거죠.
그러기 위해서는 html을 리턴하기 전에 한 번 더 할 일이 있습니다. 바로 문자를 쪼개는 거죠. 쉽게 '사용자가 검색한 단어+나머지 단어'로 박살...이 아니라 분리하면 되지 않을까요?

이때 쓸 메서드는 replace()입니다. 문자열을 교체할 때 사용합니다. (*참고)

var str = "Anne is awesome";
var newStr = str.replace(/anne/i, "nykim");
console.log(newStr); //nykim is awesome;

이걸 응용하면 아래와 같습니다.

function displayMatches() {
  const matchArray = findMatches(this.value, strArr);
  console.log(matchArray);

  const html = matchArray.map(color => {
    const regex = new RegExp(this.value, "gi");
    const colorName = color.replace(
      regex,
      ` <span class="accent">${this.value} </span>`
    );
    return `
      <li>${colorName} </li>
    `;
  }).join("");
  resultArea.innerHTML = html;
}

아, 한 가지 할 일이 더 있었네요. 저~~~ 위에 endpoint에서 가져온 데이터에는 인구 정보가 있는데, 이걸 3자리마다 쉼표를 붙여서 표시하려고 합니다.
이것 역시 repalce()와 정규식을 활용할 건데, 구글링해서 첫번째로 나오는 거 가져왔습니다 히히

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

---

최종 코드

Bos씨가 작성한 최종코드는 아래와 같습니다.

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 => {
    // here we need to figure out if the city or state matches what was searched
    const regex = new RegExp(wordToMatch, "gi");
    return place.city.match(regex) || place.state.match(regex);
  });
}

var aa = findMatches("e", cities);
console.log(aa);

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

function displayMatches() {
  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", displayMatches);
searchInput.addEventListener("keyup", displayMatches);

끝!

---

결과물

See the Pen RvLjdg by NY KIM (@nykim_) on CodePen.