[엘리의 드림코딩 JS] 자바스크립트 코딩 꿀팁🍯

https://youtu.be/2AMRTAFSh98

목표: 숫자, 날짜, 통화를 잘 나타내보자!

// intl 사용해
// 1. 숫자 나타내기
{
  const views = 9744642;
  const formatter1 = new Intl.NumberFormat("ko");
  console.log(formatter1.format(views)); // 9,744,642

  const formatter2 = new Intl.NumberFormat(
    navigator.language /* 사용자가 지정한 언어 */,
    { notation: "compact" }
  );
  console.log(formatter2.format(views)); // 974만

  const formatter3 = new Intl.NumberFormat("en", { notation: "compact" });
  console.log(formatter3.format(views)); // 9.7M

  const formatter4 = new Intl.NumberFormat("en", {
    notation: "compact",
    compactDisplay: "long",
  });
  console.log(formatter4.format(views)); // 9.7 million
}

// 2. 가격 나타내기
{
  const price = 10000;
  const formatter = new Intl.NumberFormat("ko", {
    style: "currency",
    currency: "krw",
    notation: "compact",
  });
  console.log(formatter.format(price)); //₩1만

  const formatter2 = new Intl.NumberFormat("en-us", {
    style: "currency",
    currency: "usd",
    notation: "compact",
  });
  console.log(formatter2.format(price)); //$10K
}

// 3. 상대 시간 나타내기
{
  const formatter = new Intl.RelativeTimeFormat("ko", { numeric: "always" });
  const today = new Date();
  const started = new Date(2019, 10, 12);
  const daysPassed = Math.ceil((started - today) / (1000 * 60 * 60 * 24)); //소수점 떼고 정수값 올림해서 반환.
  console.log(
    `드림코딩 유튜브 채널 시작일 : ${formatter.format(daysPassed, "day")}` // 드림코딩 유튜브 채널 시작일 : 1,124일 전
  );
  // 그런데 1시간 전에 올라온 것, 하루 전에 올라온 것 이걸 "day", "hour" 하나로 표현 X
  // 그래서 moment.js 많이 쓴다.
  /**
    moment("20111031", "YYYYMMDD").fromNow(); // 11 years ago
    moment("20120620", "YYYYMMDD").fromNow(); // 10 years ago
    moment().startOf("day").fromNow(); // 12 hours ago
    moment().endOf("day").fromNow(); // in 12 hours
    moment().startOf("hour").fromNow(); // 42 minutes ago
    */
  // 하지만 Ellie님이 더 가볍다고 추천해주신 건
  // timeago.js
  // CDN 써서 한번 해보기
}

// 4. 날짜/시간 제대로 포맷하기
const date = new Date(2019, 10, 12); // 2019년 11월 12일(cf.js는 0번째부터 달을 센다.)
console.log(date.toString()); // Tue Nov 12 2019 00:00:00 GMT+0900 (한국 표준시)
console.log(new Intl.DateTimeFormat("en-US").format(date)); // 11/12/2019
console.log(
  //date.toDateLocaleString에서는 이제 timeStyle옵션 사용 못하는 듯🤔
  date.toLocaleString("ko", {
    dateStyle: "full",
    timeStyle: "long",
    // minute: "numeric",
    // hour: "numeric",
    // day: "numeric",
    // month: "numeric",
    // year: "numeric",
    // weekday: "short",
    // weekday: "long",
  })
);

중간에 date.toDateLocaleString에서 timeStyle 옵션을 넣었더니, TypeError가 나와서 stackoverflow찾아보니 나와 똑같은 문제 겪은 사람이 있었다.
https://stackoverflow.com/questions/65021891/for-javascripts-tolocaledatestring-are-there-new-standards-to-replace-datestyl 

For JavaScript's toLocaleDateString, are there new standards to replace dateStyle and timeStyle?

.toLcaleDateString() MDN 문서(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString)를 찾아보니 이렇게 나오더라.

timeStyle 옵션에 undefined 넣지 않으면 TypeError 날 수 있다. 대체 왜..?🙄

일단 엘리님 강의영상에 댓글도 달아놨으니, 좀 기다려보기로.