HELLICAT

API 사용중 같은 값을 그룹화하면 좋을 것 같다는 생각을 간혹하게 되는데 이번 날씨 API를 사용하면서 그런생각이 들었다.

단기 예보를 불러오게 되면 거의 700개 이상의 object가 나온다.  각기 다른 날씨속성 12개의 카테고리로 한 줄씩 나오며 그 12개의 카테고리는 같은 예보시간이 들어있다. 

0: {baseDate: '20240922', baseTime: '2000', category: 'TMP', fcstDate: '20240922', fcstTime: '2100', …}
1: {baseDate: '20240922', baseTime: '2000', category: 'UUU', fcstDate: '20240922', fcstTime: '2100', …}
2: {baseDate: '20240922', baseTime: '2000', category: 'VVV', fcstDate: '20240922', fcstTime: '2100', …}
3: {baseDate: '20240922', baseTime: '2000', category: 'VEC', fcstDate: '20240922', fcstTime: '2100', …}
4: {baseDate: '20240922', baseTime: '2000', category: 'WSD', fcstDate: '20240922', fcstTime: '2100', …}
5: {baseDate: '20240922', baseTime: '2000', category: 'SKY', fcstDate: '20240922', fcstTime: '2100', …}
6: {baseDate: '20240922', baseTime: '2000', category: 'PTY', fcstDate: '20240922', fcstTime: '2100', …}
7: {baseDate: '20240922', baseTime: '2000', category: 'POP', fcstDate: '20240922', fcstTime: '2100', …}
8: {baseDate: '20240922', baseTime: '2000', category: 'WAV', fcstDate: '20240922', fcstTime: '2100', …}
9: {baseDate: '20240922', baseTime: '2000', category: 'PCP', fcstDate: '20240922', fcstTime: '2100', …}
10: {baseDate: '20240922', baseTime: '2000', category: 'REH', fcstDate: '20240922', fcstTime: '2100', …}
11: {baseDate: '20240922', baseTime: '2000', category: 'SNO', fcstDate: '20240922', fcstTime: '2100', …}
12: {baseDate: '20240922', baseTime: '2000', category: 'TMP', fcstDate: '20240922', fcstTime: '2200', …}
13: {baseDate: '20240922', baseTime: '2000', category: 'UUU', fcstDate: '20240922', fcstTime: '2200', …}
14: {baseDate: '20240922', baseTime: '2000', category: 'VVV', fcstDate: '20240922', fcstTime: '2200', …}
15: {baseDate: '20240922', baseTime: '2000', category: 'VEC', fcstDate: '20240922', fcstTime: '2200', …}
16: {baseDate: '20240922', baseTime: '2000', category: 'WSD', fcstDate: '20240922', fcstTime: '2200', …}
17: {baseDate: '20240922', baseTime: '2000', category: 'SKY', fcstDate: '20240922', fcstTime: '2200', …}
18: {baseDate: '20240922', baseTime: '2000', category: 'PTY', fcstDate: '20240922', fcstTime: '2200', …}
19: {baseDate: '20240922', baseTime: '2000', category: 'POP', fcstDate: '20240922', fcstTime: '2200', …}
20: {baseDate: '20240922', baseTime: '2000', category: 'WAV', fcstDate: '20240922', fcstTime: '2200', …}
21: {baseDate: '20240922', baseTime: '2000', category: 'PCP', fcstDate: '20240922', fcstTime: '2200', …}
22: {baseDate: '20240922', baseTime: '2000', category: 'REH', fcstDate: '20240922', fcstTime: '2200', …}
23: {baseDate: '20240922', baseTime: '2000', category: 'SNO', fcstDate: '20240922', fcstTime: '2200', …}
24: {baseDate: '20240922', baseTime: '2000', category: 'TMP', fcstDate: '20240922', fcstTime: '2300', …}
25: {baseDate: '20240922', baseTime: '2000', category: 'UUU', fcstDate: '20240922', fcstTime: '2300', …}
26: {baseDate: '20240922', baseTime: '2000', category: 'VVV', fcstDate: '20240922', fcstTime: '2300', …}
27: {baseDate: '20240922', baseTime: '2000', category: 'VEC', fcstDate: '20240922', fcstTime: '2300', …}
28: {baseDate: '20240922', baseTime: '2000', category: 'WSD', fcstDate: '20240922', fcstTime: '2300', …}
29: {baseDate: '20240922', baseTime: '2000', category: 'SKY', fcstDate: '20240922', fcstTime: '2300', …}
30: {baseDate: '20240922', baseTime: '2000', category: 'PTY', fcstDate: '20240922', fcstTime: '2300', …}
31: {baseDate: '20240922', baseTime: '2000', category: 'POP', fcstDate: '20240922', fcstTime: '2300', …}
32: {baseDate: '20240922', baseTime: '2000', category: 'WAV', fcstDate: '20240922', fcstTime: '2300', …}
33: {baseDate: '20240922', baseTime: '2000', category: 'PCP', fcstDate: '20240922', fcstTime: '2300', …}
34: {baseDate: '20240922', baseTime: '2000', category: 'REH', fcstDate: '20240922', fcstTime: '2300', …}
35: {baseDate: '20240922', baseTime: '2000', category: 'SNO', fcstDate: '20240922', fcstTime: '2300', …}

이것을 새로 배열을 구성하기 위해서 forEach문을 사용하였다.

일단 빈배열을 만들어주고 그 배열에 구성을 해주고 리턴해주면 된다. 

import type {
  INewForeCastType,
  IWeatherTodayTomorrowTypes,
} from "~/types/apiType";

export const createNewArr = ({
  data,
  newWeatherData,
}: {
  data: IWeatherTodayTomorrowTypes[];
  newWeatherData: globalThis.Ref<INewForeCastType[]>;
}) => {
  const newArr: INewForeCastType[] = [];
  data.forEach(({fcstTime, category, fcstValue}) => {
    let exist = newArr.find((entry) => entry.fcstTime === fcstTime);

    if (!exist) {
      exist = {
        fcstTime: fcstTime,
      };
      newArr.push(exist);
    }
    if (category === "POP") {
      exist.POP = fcstValue;
    }
    if (category === "PCP") {
      exist.PCP = fcstValue;
    }
    if (category === "PTY") {
      exist.PTY = fcstValue;
    }
    if (category === "REH") {
      exist.REH = fcstValue;
    }
    if (category === "SKY") {
      exist.SKY = fcstValue;
    }
    if (category === "SNO") {
      exist.SNO = fcstValue;
    }
    if (category === "TMP") {
      exist.TMP = fcstValue;
    }
    if (category === "UUU") {
      exist.UUU = fcstValue;
    }
    if (category === "VEC") {
      exist.VEC = fcstValue;
    }
    if (category === "VVV") {
      exist.VVV = fcstValue;
    }
    if (category === "WAV") {
      exist.WAV = fcstValue;
    }
    if (category === "WSD") {
      exist.WSD = fcstValue;
    }
  });
  return (newWeatherData.value = newArr);
};

logical OR Assignment

let name = prompt("name?");

/* if (!name) {
name = "anony";
} */

//위 와 같음
name ||= "anony";

console.log(`hello ${name}`);

Logical AND Assignment

const user = {
  username: "hoho",
  password: "wfwfwf",
};

/* if (user) {
  user.password = ["hohoho"];
} */
//위와 같은 문장
user.password &&= ["hohoho"];

user.name ||= "kakaka";


// null or undefined 일 때 값을 입력한다.
user.power ??= true;


console.log(user.password);
console.log(user.name);
console.log(user.power);

Logical Nullish Assignment (위 코드 참조)

Numeric Seperator

const num = 1_000_000_000_000;
console.log(num); // 1000000000000

promise.any

const p1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 4000, "quirquir");
});

const p2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, "reqreqrq");
});


Promise.any([p1, p2])
.then(console.log)
.catch((e) => console.log(`에러 여깄다 ${e}`));

Nullish operator

let thrall;
console.log("Hello", thrall || "jeina");
// thrall = "Thrall";
console.log("Hello", thrall ?? "jeina");

Optional chaining

const thrall = {
  name: "thrall",
  parent: {
    father: {name: "Durotan"},
  },
};

console.log(thrall.parent && thrall.parent.father && thrall.parent.father.name);
console.log(thrall?.parent?.father?.name);

PadStart / PadEnd

const a = "0";
const b = "10";

console.log(a.padStart(2, "0").padEnd(2, "hoho")); // 00
console.log(b.padStart(2, "0").padEnd(4, "hoho")); // 10ho
console.log(b.padStart(2, "0").padEnd(6, "hoho")); // 10hoho

Trim

const b = "            Time is Money My Friends .           ";
console.log(b.trimStart());
console.log(b.trimEnd());
console.log(b.trim());

Object Entries

const thrall = {
  name: "thrall",
  parent: {
    father: {name: "Durotan"},
  },
};

const a = Object.entries(thrall);
console.log(a);
const b = Object.values(thrall);
console.log(b);
const c = Object.fromEntries([
  ["name", "hellscream"],
  ["parent", "undefined"],
]);
console.log(c);
const d = Object.fromEntries([
  ["name", "hellscream"],
  ["parent", {father: "undefined"}, "hihi", "hoho"],
]);
console.log(d);

Array Flat

엄청나게 겹겹이 쌓여있는 Array 배열을 원하는 depth로 flat하게 만들어준다.

const a = [
  1,
  2,
  3,
  [4, 5, 6, [6, [6, [(7, [8], [8], [8, [9, 7, 45, [7, [6]]]])]]]],
];

console.log(a);

const b = a.flat(7);
console.log(b);

Promise.allSettled

promise.allSettled는 promise.all과는 다르다 promise.all은 fetch한 데이터가 모두 성공해야 작동을 하는 반면에 allSettled는 그렇지 않다.

어떤게 잘 동작하고 어떤게 동작하지 않는지 확인할때 사용

Generators

generator는 function 뒤에 *을 붙어주어야한다.

value와 done 값을 return 해 주며 값이 있을 때 value에 값이 나오고 done은 false다

library로도 많이 만들어져있고 fetch나 백엔드에서 조금은 사용이된다.

yield를 정하고 next로 호출하게 되면 하나씩 호출된다.

function* listHero() {
  yield "Thrall";
  yield "Thunderbluff";
  yield "Ogrima";
  yield "Boljin";
  yield "Silvanas";
  yield "Lor'themar Theron";
}

const callHero = listHero();

console.log(callHero.next());
console.log(callHero.next());
console.log(callHero.next());
console.log(callHero.next());
console.log(callHero.next());
console.log(callHero.next());

const herose = [
  "Thrall",
  "Thunderbluff",
  "Ogrima",
  "Boljin",
  "Silvanas",
  "Lor'themar Theron",
];

function* heroTeller() {
  for (const hero of herose) {
    yield hero;
  }
}

const heroLooper = heroTeller();

console.log(heroLooper.next());
console.log(heroLooper.next());
console.log(heroLooper.next());
console.log(heroLooper.next());
console.log(heroLooper.next());
console.log(heroLooper.next());

Proxy

proxy는 filter 처럼 생각 할 수 있다.

proxy는 두개의 인자를 받는다 object와 filter를 수행하는 handler를 받는다.

filterUser를 호춯하게되면 handler 부터 불려지고 다음 object를 반환하거나 반환을 하지 않는다.

handler에는 많은 trap들이 있다. trap들은 handler에 의해 만들어진다.

자세한 trap들은 mdn문서에 있으니 참고하면 됨.

const userObj = {
  name: "ChickenTau",
  age: 20,
  password: 123,
};

const userFilter = {
  get: (target, prop, receive) => {
    console.log(target);
    console.log(prop);
    console.log(receive);
    return target[prop];

    console.log("somebody getting some");
  },
  set: () => {
    console.log("somebody Wrote some");
  },
};
const filterUser = new Proxy(userObj, userFilter);

console.log(filterUser.name);
console.log(filterUser.age);
console.log(filterUser.password);
console.log((filterUser.level = 10));

Generator와 Proxy는 대부분 library를 제작할때 사용된다.

Symbols

Symbols는 새로운 Data Type이다. 매우 고유한 데이터가 될 수 있다. Symbol에 같은 값인 good을 넣었는데도 불구하고 a와 b의 값은 서로 다르다.

const a = Symbol("good");
const b = Symbol("good");
console.log(a === b);

//false가 도출 됨

const userInfo = {
  [Symbol("charactor")]: {
    userId: "Thrall",
  },
  [Symbol("charactor")]: {
    userId: "HellScream",
  },

  hi: {ss: "sss"},
};
console.log(userInfo[Symbol("charactor")]); // undefined
console.log(userInfo["hi"]); // {ss:"sss"}

symbol로 된 값을 얻기 위해서는 다음과 같이 사용해야한다.

const symbolVal = Object.getOwnPropertySymbols(userInfo);
symbolVal.forEach((symbol) => console.log(userInfo[symbol]));

Set

중복된 값을 저장하지 않게 하는 매커니즘이 필요하다면 이를 사용해야한다.

const numberSet = [1, 2, 3, 4, 5, 5, 6, 7, 7, 8, 8, 8, 8, 9];
const newSet = new Set(numberSet);
console.log(newSet);
newSet.add(10);
console.log(newSet);
newSet.delete(2);
console.log(newSet);
newSet.clear();
console.log(newSet);
newSet.add(10);
console.log(newSet);
newSet.add([1, 2, 3, 4, 5]);
console.log(newSet);

Map

Map은 Set과 비슷하지만 차이점은 Key-Value를 사용할 수 있게 해준다.

const silvans = new Map();

silvans.set("age", 28);
console.log(silvans);
silvans.set("weapon", "bow");
console.log(silvans);
silvans.set([{skill: "disease", tribe: "Forsaken"}]);
console.log(silvans);

Classes

Constructor

class HordUser {
  constructor(name, age, weapon, job) {
    this.basename = name;
    this.age = age;
    this.weapon = weapon;
    this.job = job;
  }
  
  sayHello() {
    console.log(`Rok tar Ogar ${this.basename}`);
  }

  changeWeapon(newWeapon, currentWeapon) {
    if (currentWeapon === this.weapon) {
      this.weapon = newWeapon;
      console.log(`changed new weapon ${newWeapon}`);
    } else {
      console.log("cant change weapon");
    }
  }
}


const thrall = new HordUser("thrall", 30, "axe", "great cheif");
console.log(thrall.basename);
thrall.sayHello();

const thunderbluff = new HordUser(
"thunderbluff",
40,
"greate axe",
"tauren cheif"
);

console.log(thunderbluff.basename);
thunderbluff.sayHello();
thunderbluff.changeWeapon("dagger", thunderbluff.weapon);

class HordUser {
  constructor({name, age, weapon, job}) {
    this.basename = name;
    this.age = age;
    this.weapon = weapon;
    this.job = job;
  }
  sayHello() {
    console.log(`Rok tar Ogar ${this.basename}`);
  }
  changeWeapon(newWeapon, currentWeapon) {
    if (currentWeapon === this.weapon) {
      this.weapon = newWeapon;
      console.log(`changed new weapon ${newWeapon}`);
    } else {
      console.log("cant change weapon");
    }
  }
}

const thrall = new HordUser({
name: "thrall",
age: 30,
weapon: "axe",
job: "great cheif",
});

console.log(thrall.basename);
thrall.sayHello();


const thunderbluff = new HordUser({
name: "thunderbluff",
age: 40,
weapon: "greate axe",
job: "tauren cheif",
});

console.log(thunderbluff.basename);
thunderbluff.sayHello();
thunderbluff.changeWeapon("dagger", thunderbluff.weapon);

extending classes &  super

class AlianceUser extends HordUser {
  constructor({mana = 100, name, age, weapon, job, where}) {
    super({name, age, weapon, job});
    this.where = where;
    this.mana = mana;
  }
  
  aliaceSayHello() {
    console.log(`Greeting ${this.basename}`);
  }

  info() {
    console.log(this.basename, this.age, this.weapon, this.job, this.where);
  }

  checkMana() {
    this.mana = this.mana + 10;
    console.log(this.mana);
  }

  useMana() {
    this.mana = this.mana - 20;
    console.log(this.mana);
  }
}


const anduin = new AlianceUser({
name: "anduin",
age: 17,
weapon: "Sword",
job: "Healer",
where: "stormwind",
});

anduin.aliaceSayHello();

anduin.info();

console.log(anduin.mana);
console.log("/////");
anduin.useMana();
anduin.useMana();

console.log(anduin.mana);
anduin.checkMana();
anduin.checkMana();
anduin.checkMana();
anduin.checkMana();
console.log("/////");

console.log(anduin.mana);

만약 checkMana와 useMana를 HTML DOM과 연동해서 사용하려면 "checkMana(){}" 이 아닌 "checkMana=()=>{}"의 방법으로 해야한다.

Create Promise

Promise 생성

• resolve는 값 => 자바스크립트로 return 되는 값
• reject는 에러 => 에러가 나 거절되는 값
• Promise의 핵심은 우리가 아직 모르는 값과 함께 작업할 수 있게 해준다.

const hoho = new Promise((resolve, reject) => {
resolve(`http://google.com`);
reject("wht t f?");
});

Using Promise

Promise 사용방법

• Promise를 사용해주기 위해 then을 사용해준다.

hoho.then((value) => console.log(value)).catch((value) => console.error(value));

 Chaining Promise

hoho
.then((value) => {
  console.log(value);
  return value;
})
.then((secondVal) => {
  console.log(secondVal + " is good");
  return; // <= 3번째에서 오류가 던져진다.
  // return secondVal + " is good" //<= 3번째에서 오류없이 진행된다.
})
.then((thirdVal) => {
  if (thirdVal === undefined) {
    throw Error("there is no value");
  } else {
    console.log(thirdVal + " haha hoho");
  }
})
.catch((value) => console.error(value));

Promise all

const promiseNoOne = new Promise((resolve) => {
setTimeout(resolve, 5000, "first");
});

const promiseNoTwo = new Promise((resolve) => {
setTimeout(resolve, 8000, "second");
});

const promiseNoThird = new Promise((resolve) => {
setTimeout(resolve, 3000, "third");
});

const callAllThem = Promise.all([promiseNoOne, promiseNoTwo, promiseNoThird]);

callAllThem.then((val) => console.log(val));

Promise.race

const promiseNoOne = new Promise((resolve, reject) => {
setTimeout(resolve, 5000, "first");
});

const promiseNoTwo = new Promise((resolve) => {
setTimeout(resolve, 8000, "second");
});

const promiseNoThird = new Promise((resolve) => {
setTimeout(resolve, 3000, "third");
});

const callAllThem = Promise.race([promiseNoOne, promiseNoTwo, promiseNoThird]);

callAllThem.then((val) => console.log(val));

async/await

const getApiData = () => {
  fetch("API DATA URL")
    .then((response) => response.json())
    .then((json) => console.log(json))
    .catch((e) => console.error(e));
};

getApiData();

const fetchApiData = async () => {
  const response = await fetch(`Api Data URL`);
  const json = await response.json();
  console.log(json);
};

fetchApiData();

async/await 의 catch

try catch finally 문

const fetchApiData = async () => {
  try {
    const response = await fetch(`Api Data URL`);
    const json = await response.json();
    console.log(json);
  } catch (e) {
    console.error(e);
  } finally {
    console.log("Done");
  }
};

parallel Async Await

const fetchApiData = async () => {
  try {
    const [firstData, secondData] = await Promise.all([
      fetch(`Api Data URL No.1`),
      fetch(`Api Data URL No.2`),
    ]);

    const [firstJson, secondJson] = await Promise.all([
      firstData.json(),
      secondData.json(),
    ]);

    return [firstJson, secondJson];
  } catch (e) {
    console.error(e);
  } finally {
    console.log("Done");
  }
};

Spread란 

기본적으로 변수를 가져와서 풀어 해치고 전개한다.

쉽게 말하자면 선물 포장지를 풀어해치는 행위이다.

const days = ["mon", "tue", "wed", "thu", "fri"];

console.log(...days);

const days = ["mon", "tue", "wed", "thu", "fri"];
const date = [1, 2, 3, 4, 5];

// 아래의 값은 서로 다르다. 

console.log([days, date]); // array 속에 array로 표현된다.
console.log([...days, ...date]); // array를 풀어 해쳐 하나의 array로 만들어준다.


//------//
const days = {day: ["mon", "tue", "wed", "thu", "fri"]};
const date = {number: [1, 2, 3, 4, 5]};

console.log({...days, ...date});

Rest란

Spread가 풀어해치는거면 Rest는 다시 포장하는 것이다.

const arg = (...data) => console.log(data);

arg(1, 2, 3, "hoho", "haha", false);


const arg = (a, b, c, ...data) => {
  console.log(a);
  console.log(b);
  console.log(c);
  console.log(data);
};

arg("hoho", 1, false, 2, 3, "haha");

Rest + Spread + Destructure

const user = {
  name: "hoho",
  age: 11,
  food: "apple",
};

const setUser = ({country = "jp", food: FOOD, ...rest}) => ({
  country,
  ...rest,
  FOOD,
  age: 22,
});

console.log(setUser(user));

For of Loop

For of Loop는 변수 값을 통해서 Loop를 조건문을 만들 수가 있다.

const kr = [
  "seoul",
  "gangneung",
  "busan",
  "jeju",
  "changwon",
  "junjoo",
  "gwangjoo",
];

for (const local of kr) {
  if (local === "changwon") {
    break;
  } else {
    console.log(local);
  }
}