• [JS30] Ajax Type Ahead (Ajax ํƒ€์ดํ•‘)

    2019. 2. 6.

    by. ๋‚˜๋‚˜ (nykim)

    Document


    ๐Ÿ”ฅ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.


    ๋Œ“๊ธ€ 1