[TIL] 2021-09-23

hhkim·2021년 9월 23일

TIL

목록 보기

1/1

1. DOM 요소를 가져올 때는 변수명 앞에 `$`를 쓰는 경우가 많음

 const $menuName = e.target.closest('li').querySelector('.menu-name');

2. 새롭게 알게 된 메서드

insertAdjacentHtml

원하는 위치에 HTML 삽입

var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

closest

자신의 부모 요소부터 시작해서 조건에 만족하는 가장 가까운 요소 탐색

const $menuName = e.target.closest('li').querySelector('.menu-name');

3. `document.querySelector`를 `$`로 간단하게 하기

const $ = (selector) => document.querySelector(selector);
const menuName = $('#menu-name').value;

4. DOM에서 변하는 정보를 상태로 관리

변하는 값은 js에서 수정하고 DOM에 반영은 마지막에 한 번만!

5. init 함수를 만들어서 초기 상태를 세팅

이벤트 리스너를 세팅하는 것도 함수로 만들어서 여기서 실행

function App() {
  ...
  this.init = () => {
    if (store.getLocalStorage()) {
      this.menu = store.getLocalStorage();
    }
    render();
    initEventListeners();
  };
  
  const initEventListeners = () => {
    ...
    $('#menu-form').addEventListener('submit', (e) => {
      e.preventDefault();
    });
    ...
  };
}
  
const app = new App();
app.init();

6. 파일 하나에 하나의 객체만 있는 것이 좋음

다른 파일로 분리 후 export / import 해서 사용

./utils/dom.js

export const $ = (selector) => document.querySelector(selector);

./index.js

import { $ } from './utils/dom.js';

7. this를 쓰려면 인스턴스를 생성해야 함

=> 클래스

const app = new App();

hhkim