맛있는 바닐라 JS - 팁 4개

[정의: "Vanilla JS"= 프레임워크가 없고 빌드 도구 등이 없는 일반 JavaScript, "Big-framework-X"= React, VueJS, Angular, Svelte 등]

웹 페이지에서 가벼운 상호 작용을 구축할 때 저는 종종 Vanilla JS에서 작업하거나 내가 선택한 큰 프레임워크 X를 꺼내는 사이에 이 공간에 있는 자신을 발견합니다.

AlpineJS , Vue-Petite 및 Stimulus 과 같은 미니 프레임워크는 정확히 이 공간을 채우기 위해 존재합니다.
하지만 이 중 하나에 도달할 생각을 할 때마다 Vanilla JS에서도 쉽게 작업을 수행할 수 있다는 것을 알게 됩니다. 그리고 그렇게 할 수 없다면 일반적으로 어쨌든 큰 프레임워크-X가 필요합니다.

Vanilla JS는 물론 훨씬 더 간단하고 사용자에게 더 적은 바이트를 제공하며 사용자 장치에서 더 적은 CPU 주기를 소비합니다. 그리고 Vanilla JS를 사용하면 개발 설정도 훨씬 간단해집니다(npm, 번들러, 빌드 도구 등이 필요하지 않음).

다음은 Vanilla JS를 더 자주 선택하게 만드는 4가지 작은 팁입니다.

팁 1 - JS 코드에서 직접 요소 ID 사용

big-framework-X 코드를 바닐라 JS와 비교할 때 바닐라 JS 샘플 코드에 document.getElementById(...) 또는 document.querySelector(...) 문이 어지럽게 흩어져 있는 것을 자주 볼 수 있습니다(바닐라 JS 버전이 부풀려진 것처럼 보임). 이것은 순수한 선전입니다. 그럴 필요가 없습니다. 간단한 작업(일반적으로 바닐라 JS를 사용하는 경우)의 경우 JS에서 직접 ID를 사용하여 HTML 요소를 참조할 수 있습니다.

<input type=checkbox id=MyChk1>

<script>
  MyChk1.checked = true;
</script>

팁 2 - 조건문에 "숨김" 사용

big-framework-X를 사용할 수 있는 한 가지 이유는 조건부(HTML 섹션을 DOM에 렌더링하는 일부 구문)이며 일부 조건에 따라 그렇지 않습니다. 이에 대한 간단한 Vanilla JS 대안은 "숨겨진"속성/속성입니다. div(및 해당 콘텐츠)를 표시하거나 숨기려면 다음과 같이 하면 됩니다.

<div id=MyDiv1 hidden>...</div>
<div id=MyDiv2>...</div>

<script>
  // swap which divs are visible
  MyDiv1.hidden = false;
  MyDiv2.hidden = true;
</script>

팁 3 - 템플릿 리터럴

big-framework-X를 사용하는 또 다른 이유는 템플릿(예: React의 JSX 또는 Vue의 SFC)입니다. Vanilla JS는 실제로 다음과 같은 강력한 템플릿 시스템과 함께 제공됩니다.
template literals , 거의 동일한 방식으로 활용할 수 있습니다.

<div id=MyDiv1></div>
<script>
  let Title='Shopping list';
  let Items=['Apples','Bananas','Dog food'];
  MyDiv1.innerHTML=`<h1>${Name}</h1>
                    <ul>
                      ${Items.map(itm=>`<li>${itm}</li>`).join('')}
                    <ul>`;
</script>

팁 4 - 인라인 이벤트 핸들러

인라인 이벤트 핸들러는 좋지 않으며 대신 element.addEventListener(...)를 사용해야 한다고 배웠을 수 있습니다. big-framework-X 코드를 바닐라 JS와 비교할 때(바닐라 JS 버전이 부풀어 보이게 함) 이것을 자주 볼 수 있습니다.
다시 한 번 이것은 순수한 선전입니다. 간단한 것(일반적으로 바닐라 JS를 사용하는 경우)의 경우 인라인 이벤트 핸들러가 완벽하게 훌륭하고 훨씬 단순하며 간결하고 읽기 쉽습니다.

<div id=MyDiv1>...</div>
<input type=checkbox onclick="MyDiv1.hidden=this.checked">

4가지를 모두 합치면

위의 기술을 결합하여 Vanilla JS에서 필수(큰 JS 프레임워크용) To Do List 애플리케이션을 다시 만들었습니다.



완전히 기능적이지만 단순하고 짧으며 큰 프레임워크-X와 쉽게 경쟁할 수 있습니다.