Vanilla js | 템플릿 리터럴 | HTML DOM insertAdjacentHTML()

템플릿 리터럴

자바스크립트에서 백틱(` `) 문자를 사용하여 문자열을 사용하는 것

` ' 백틱과 작은따움표 차이

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Template literals (Template strings) - JavaScript | MDN

---

Element.insertAdjacentHTML()

지정된 위치에 택스트를 HTML로 삽입한다.

"afterbegin"
"afterend"
"beforebegin"
"beforeend"

https://www.w3schools.com/jsref/met_node_insertadjacenthtml.asp

HTML DOM insertAdjacentHTML() Method

---

DOM

https://blog.makerjun.com/a170b36e-7520-4cfa-9964-e306378a2fed

DOM (Document Object Model)

---

//$ 바로리턴해주는 상수 만들기 코드길이 줄이기
const $ = (selector) => document.querySelector(selector);

function App() {
      $("#espresso-menu-form")
      .addEventListener("submit", (e) => {
        e.preventDefault();
      });

      $("#espresso-menu-name")
      .addEventListener("keypress", (e) => {
        if (e.key === "Enter") {
          const expressoMenuName = $("#espresso-menu-name").value;
          const menuItemTemplate = (expressoMenuName) => {
            return `
            <li class="menu-list-item d-flex items-center py-2">
              <span class="w-100 pl-2 menu-name">${expressoMenuName}</span>
              <button
                type="button"
                class="bg-gray-50 text-gray-500 text-sm mr-1 menu-edit-button"
              >
                수정
              </button>
              <button
                type="button"
                class="bg-gray-50 text-gray-500 text-sm menu-remove-button"
              >
                삭제
              </button>
            </li>
            `;  
          };
          $("#espresso-menu-list").insertAdjacentHTML(
            "afterbegin", 
            menuItemTemplate(expressoMenuName)
          );
          
        }
      });  
}
App();