181127 TIL Lec4 array parser step5 && 알고리즘 스터디(짝코딩)

Nov 27, 2018 » 1막, TIL (Today I Learned), 코드스쿼드

array parser step5 수정

PR은 날렸지만 아주 끔찍한 분기문의 나열이었다.

  for (let token of tokens){
        if (token === '[') {
            result.push(new Data('array', undefined, []));
        } else if (token === '{') {
            result.push(new Data('object', undefined, []));
            objectStatus = true;
        } else if (token === ':'){
            const lastChild = result[result.length - 1].child;
            lastChild.push(new Data('objectKey', temp));
        } else if (!isNaN(Number(token))) {
            const lastChild = result[result.length - 1].child;
            lastChild.push(new Data('number', token));
        } else if (token === 'null') {
            const lastChild = result[result.length - 1].child;
            lastChild.push(new Data('null', token));
        } else if (token === 'true' || token === 'false') {
            const lastChild = result[result.length - 1].child;
            lastChild.push(new Data('boolean', token));
        } else if (token[0] === "'") {
            if (!countApostrophe(token)) {
                console.log(`${token}은 올바른 문자열이 아닙니다.`);
                return;
            }
            const lastChild = result[result.length - 1].child;
            lastChild.push(new Data('string', token));
        } else if (token === ']' && result.length > 1) {
            const lastData = result.pop();
            const lastChild = result[result.length - 1].child;
            lastChild.push(lastData);
        } else if (token === '}' && result.length > 1) {
            const lastData = result.pop();
            const lastChild = result[result.length - 1].child;
            lastChild.push(lastData);
            objectStatus = false;
        } else if (token === ']' && result.length === 1) {
            return result;
        } else if (objectStatus === true && token !== ':'){
            temp = token;
        } else {
            console.log(`${token}은 올바른 문자열이 아닙니다.`);
            return;
        }
    } 

친절하신 크롱께서 친히 수정을 해주셨다!! (~~아마 내가 너무나 너무나 죽상을 하고 있어서 포기할까봐(?) 도와주신 게 아닐지…~~)

객체 활용해서 함수 불러쓰는 방법을 연습하고 싶다. 뭔가 함수 안에서 객체 value 값 불러오고 그러는거.. 겁나 멋져…

알고리즘 스터디(짝코딩)

일주일에 하루는 javascript30을 따라해보고 안 보고 팀코딩으로 짜보는 시간을 가져보기로 했다.
이번 프로젝트: #6 - Ajax Type Ahead
코드: wesbos/JavaScript30/06 - Type Ahead/
방식: 3명(w/ 달리&비센스)이서 10분씩 돌아가면서 완성하기 (~~총 1시간 20분 걸린건 비밀~~)

설계

코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Type Ahead 👀</title>
  <link rel="stylesheet" href="styles.css">
</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>
<script>
function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
let cities = [];
const load = (url)=>{
    fetch(url)
    .then(blob=>blob.json())
    .then(json=> cities.push(...json))
    .then(()=>{
        console.log(findMatches('bos', cities))
    })
}
load(endpoint);
function findMatches(wordToMatch, cities){
    return cities.filter((place) => {
        const regex = new RegExp(wordToMatch, "gi")
        const {city, state} = place 
        return city.match(regex)||state.match(regex)    //
    })
}
function displayMatches(){
    const matchArray = findMatches(this.value, cities);
    const html = matchArray.reduce((arr, city) => {
        const cityName = city.city;
        const population = numberWithCommas(city.population);
        const regex = new RegExp(this.value, "gi")
        const name = cityName.replace(regex, `<span class="hl">${this.value}</span>`);
        arr += 
        `
            <li>
                <span>${name}</span>
                <span>${population}</span>
            </li>
        `
        return arr;
    }, '');
    suggestions.innerHTML = html;
    // value를 담을 무언가가 필요.
    // input value와 cities 정보간의 매칭을 위한 작업
    // suggetions 에 접근해서 그린다.
}
const searchInput = document.querySelector('.search');
const suggestions = document.querySelector('.suggestions');
searchInput.addEventListener("change", displayMatches);
searchInput.addEventListener("keyup", displayMatches);
// console.log(cities)
// fetch(endpoint)
//     .then((blob) => blob.json())
//     .then((data) =>{
//         cities = data;
//         console.dir(cities)
//         findMatches('s',cities)
//     } );
</script>
  </body>
</html>

느낀점: 스터디 전에 따라해보긴 했지만 외우는 게 의미가 있나 싶어서(…) 일단 분위기 보자(?)는 느낌으로 들어갔는데, 팀코딩으로 하면서 엄청나게 후회했다. 못하면 외워라도 왔었야 했는데… 흑흑. 다음주부턴 외워올거야…
새로 알게된 점:
1. fetch API
2. promise
3. then
4. reduce.. 아직도 잘 못쓰는 나 자신 반성하자..