Today Review 210126

이걸 쓰는게 나타해졌다.

1. clientX, offsetX, pageX, screenX의 차이

2. 콜백지옥 , Promise, async/await

3. JS를 작성할때 주의 할 점들 (블랙커피 스터디 피드백 내용 추가)

4. 공공데이터 모듈화 및 js 분리
   하면서 느낀것이

 async function load() {
      try {
        const get_date = [];
        const get1 = [], get2 = [];
        let city_index1, city_index2;
        let city_name1 = input1.options[input1.selectedIndex].text;
        let city_name2 = input2.options[input2.selectedIndex].text;

        const datas = await Promise.all(setDate().map(date => {
            return dfd.read_csv(`${url}${date}.csv`)
          }
        ));         //모든 데이터 값 읽어오기

        datas[0].body__items__item__gubun.data.forEach((data) => {
          if (data == city_name1)
            city_index1 = datas[0].body__items__item__gubun.data.indexOf(data);
          if (data == city_name2)
            city_index2 = datas[0].body__items__item__gubun.data.indexOf(data);
        });         //해당 지역을 가진 index 찾기

        datas.forEach(data => {
          get1.push(data.body__items__item__incDec.data[city_index1]);
          get2.push(data.body__items__item__incDec.data[city_index2]);
          get_date.push(data.body__items__item__stdDay.data[0]);
        })      //해당 지역을 가진 index를 통해 날짜별 증가량 배열에 저장

        let df_sum1 = new dfd.DataFrame({city_name1: get1, city_name2: get2}, {index: get_date});  //df_sum은 Series 형태이므로 DataFrame 형태로 변환
        df_sum1.plot('plot').line();        // 각각의 지역의 증가량 출력
      }
      catch(err){
        alert('데이터가 존재하지 않거나 잘못되었습니다.');
      }
 }

err를 다루기 위해서 async await 내용에서 try catch문을 써보았다. (에러 잡기 좋다.)