JavaScript를 작성하는 또 다른 방법

Originally published on my Blog

안녕하세요, 이 게시물에서는 다른 방식으로 작성할 수 있는 몇 가지 프런트엔드 코드를 공유하겠습니다.
그리고 모든 것이 잘 작동하고 규칙을 어기거나 코드에 냄새를 맡지 않고 멋집니다.

1. 일련 번호 [1, 2, 3, ...., n]의 배열을 생성합니다.

[1, 2, 3, 4, 5, 6, ...., n]와 같은 배열을 생성하려면 new Array()를 사용하여 코드를 작성할 수 있습니다.
Array.fill() 그래서

const N = 10;
new Array(N).fill().map((_, indx) => indx + 1); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Why new Array(N).map() doesn't work?

멋지네요. 하지만 일련 번호의 대규모 배열을 작업하는 경우 이 방법이 최선일까요?
음, 아니! new Array()가 a holey array을 생성하기 때문에
packed arrays에 비해 느립니다. 그래서 우리는 이것을 피하고 이 방법을 다시 작성할 수 있습니다.
Array.from() 사용
따라서 코드는

const N = 10;
Array.from({ length: N }, (_, indx) => indx + 1); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

출처:
https://slidrio-decks.global.ssl.fastly.net/1259/original.pdf?1521622174 슬라이드: 102

Chrome 콘솔에서 홀리 배열을 확인할 수 있으므로 이 코드new Array(10)를 작성하면 콘솔에 다음이 표시됩니다.[empty × 10] 빈 값의 배열입니다.

추가 리소스:

https://v8.dev/blog/elements-kinds

https://stackoverflow.com/questions/3746725/how-to-create-an-array-containing-1-n

2. 숫자 서식

가끔 특정 통화EGP 1000나 어떤 크기50 kB로 돈을 쓰고 싶을 때가 있는데 쓰는 방법 중 하나로,
간단히 const money = '1000 EGP' . 그러나 Intl.NumberFormat 을 사용하여 형식이 지정된 숫자를 작성하는 더 좋은 방법이 있습니다. 따라서 이 문자열은

const money = new Intl.NumberFormat("en", {
  style: "currency",
  currency: "EGP",
  useGrouping: false,
  maximumSignificantDigits: 1
}).format(1000);
// "EGP 1000"

const storage = new Intl.NumberFormat("en", {
  style: "unit",
  unit: "kilobyte"
}).format(50);
// "50 kB"

참고: styleunits은 chrome 77+에서 작동하므로 babel을 사용하여 컴파일할 수 있습니다.
여러 로케일에서 작업 중이고 더 나은 완전 사용자 정의 방식으로 로케일 간에 전환하려는 경우 매우 유용합니다.
V8 Blog: Intl.NumberFormat의 추가 정보

3. 포커스에 NonInteracitve 요소 스타일 지정

tabindex 없이 그리고 MDN에 따라 css/html을 사용하여 이 작업을 수행할 수 없습니다.

Avoid using the tabindex attribute in conjunction with non-interactive content to make something intended to be interactive focusable by keyboard input. An example of this would be using an <div> element to describe a button, instead of the <button> element.

and w3 says:

The content should be semantically described using interactive elements (<a>, <button>, <details>, <input>, <select>, <textarea>, etc.) instead.

따라서 이에 대한 모범 사례는 addEventListener()에서 JavaScript를 사용하는 것입니다. 그러나 tabindex를 사용하려면 내부 html 콘텐츠에 tabindex를 추가하는 것을 잊지 마십시오.

다른 솔루션

tabindex 테두리만 변경하려는 경우에는 div를 사용할 필요가 없습니다.:focus-within를 사용하고 테두리만 변경할 수 있습니다.

.search-box {
  margin-left: 1%;
  outline: red;
  border: 1px solid #fc3;
}

.search-input {
  border: none;
}

.search-input:focus {
  outline: none;
}

.search-box:focus-within {
  border: 2px solid #53c9fc;
}

<div class="search-box">
  <Row>
    <div class="search-box-icon"></div>
    <input class="search-input" placeholder="search in listbox" />
  </Row>
</div>

I published this as an answer on stackoverflow

마지막으로, 저는 우리 모두가 코드를 작성하는 스타일, 규칙을 어기지 않는 그가 가장 좋아하는 관행,
또는 코드에 냄새를 넣습니다.