🦸‍♂️ 슈퍼히어로처럼 코딩하는 11가지 자바스크립트 팁과 요령 (Vol.2)

안녕하세요 JS히어로즈입니다! 이 새 기사로 마침내 완료되었습니다! 가자 ✨

1. 난수로 목록 생성

다양한 이유로 가짜 데이터가 많이 필요합니다. 그래서 부드럽게 하는 방법이 있습니다.

Array.from({ length: 1000 }, Math.random)
// [ 0.6163093133259432, 0.8877401276499153, 0.4094354756035987, ...] - 1000 items

2. 숫자로 목록 생성

네, 숫자가 있는 목록을 생성하는 트릭이 하나 더 있습니다.

Array.from({ length: 1000 }, (v, i) => i)
// [0, 1, 2, 3, 4, 5, 6....999]

1-2 수정했습니다. 덕분에

3. RGB → HEX 변환

라이브러리 없이 RGB를 HEX로 변환하십시오!

const rgb2hex = ([r, g, b]) =>
  '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).substr(1);

rgb2hex([76, 11, 181]);
// #4c0bb5

4. HEX → RGB 변환

다시 변환에 대해 무엇입니까?! 이를 구현하는 좋은 방법이 있습니다.

const hex2rgb = hex =>
  [1, 3, 5].map((h) => parseInt(hex.substring(h, h + 2), 16));

hex2rgb("#4c0bb5");
// [76, 11, 181]

5. 홀수 또는 짝수

또 다른 홀수/짝수 검사.

const value = 232;  

if (value & 1) console.log("odd");
else console.log("even");
// even

6. 유효한 URL 확인

대부분의 사용자가 이 방법을 사용하여 URL의 유효성을 검사할 수 있지만 어쨌든 그렇습니다. 공유하자

const isValidURL = (url) => {
  try {
    new URL(url);
    return true;
  } catch (error) {
    return false;
  }
};

isValidURL("https://dev.to");
// true

isValidURL("https//invalidto");
// false

7. N 뭔가 전

때때로 날짜를 6 minute(s) ago 로 인쇄할 것이 필요하지만 괴물 크기의 라이브러리를 가져오고 싶지는 않습니다. 다음은 이를 수행하는 작은 스니펫입니다. 원하는 대로 쉽게 수정하고 계속 진행하십시오.

const fromAgo = (date) => {
  const ms = Date.now() - date.getTime();
  const seconds = Math.round(ms / 1000);
  const minutes = Math.round(ms / 60000);
  const hours = Math.round(ms / 3600000);
  const days = Math.round(ms / 86400000);
  const months = Math.round(ms / 2592000000);
  const years = Math.round(ms / 31104000000);

  switch (true) {
    case seconds < 60:
      return `${seconds} second(s) ago"`;
    case minutes < 60:
      return `${minutes} minute(s) ago"`;
    case hours < 24:
      return `${hours} hour(s) ago"`;
    case days < 30:
      return `${days} day(s) ago`;
    case months < 12:
      return `${months} month(s) ago`;
    default:
      return `${years} year(s) ago`;
  }
};

const createdAt = new Date(2021, 0, 5);
fromAgo(createdAt); // 14 day(s) ago;

8. 매개변수로 경로 생성

우리는 경로/경로로 많은 작업을 하고 항상 그것들을 조작해야 합니다. 브라우저를 거기에 푸시하기 위해 매개변수가 있는 경로를 생성해야 할 때 generatePath가 도움이 됩니다!

const generatePath = (path, obj) =>
    path.replace(/(\:[a-z]+)/g, (v) => obj[v.substr(1)]);

const route = "/app/:page/:id";
generatePath(route, {
  page: "products",
  id: 85,
});
// /app/products/123

9. 경로에서 매개변수 가져오기

예! 이제 매개변수를 다시 가져와야 합니다. 또한 직렬 변환기를 전달하여 데이터를 부드럽게 구문 분석할 수 있습니다.

const getPathParams = (path, pathMap, serializer) => {
  path = path.split("/");
  pathMap = pathMap.split("/");
  return pathMap.reduce((acc, crr, i) => {
    if (crr[0] === ":") {
      const param = crr.substr(1);
      acc[param] = serializer && serializer[param]
        ? serializer[param](path[i])
        : path[i];
    }
    return acc;
  }, {});
};

getPathParams("/app/products/123", "/app/:page/:id");
// { page: 'products', id: '123' }

getPathParams("/items/2/id/8583212", "/items/:category/id/:id", {
  category: v => ['Car', 'Mobile', 'Home'][v],
  id: v => +v
});
// { category: 'Home', id: 8583212 }

10. 쿼리 문자열로 경로 생성

물론 우리는 경로로 작업하고 쿼리로 경로를 생성해야 합니다.

const generatePathQuery = (path, obj) =>
  path +
  Object.entries(obj)
    .reduce((total, [k, v]) => (total += `${k}=${encodeURIComponent(v)}&`), "?")
    .slice(0, -1);

generatePathQuery("/user", { name: "Orkhan", age: 30 }); 
// "/user?name=Orkhan&age=30"

11. 쿼리 문자열에서 매개변수 가져오기

이제 쿼리 문자열에서 매개변수를 가져올 차례입니다.

const getQueryParams = url =>
  url.match(/([^?=&]+)(=([^&]*))/g).reduce((total, crr) => {
    const [key, value] = crr.split("=");
    total[key] = value;
    return total;
  }, {});

getQueryParams("/user?name=Orkhan&age=30");
// { name: 'Orkhan', age: '30' }

결론

모든 것이 어떻게 작동하는지 이해하고 코드를 훌륭하고 깨끗하게 유지하십시오.

JS 영웅의 기술을 받아 세상을 구하십시오! ✨🦸‍♂️ ✨

github code-like에 팁/트릭을 저장하고 제공하십시오.