[TIL] 210928

Lee Syong·2021년 9월 28일

DOM JavaScript TIL

TIL

목록 보기

41/204

📝 오늘 한 것

dispatchEvent() / 이벤트 버블링 막는 방법 / event.preventDefault() / 이벤트 위임 / keydown과 keyup 비교 / 커스텀 데이터 속성
내가 짠 코드와 강의 내용 비교·분석 및 수정 (쇼핑 목록 앱 만들기)

📖 학습 자료

드림코딩 '프론트엔드 필수 브라우저 101' 강의

📚 배운 것

1. DOM, CCSOM, Render Tree, Critical rendering path

1) 쇼핑 목록 앱 만들기

최초 코드는 어제 TIL 참고
강의를 본 후 내 코드와의 차이점, 배운 점 정리

(1) HTML 마크업

나는 input을 본문에 넣었는데, 강의에서는 input을 본문이 아니라 footer에 넣었다.
나는 쇼핑 목록들이 추가될 본문을 div로 지정해준 후 javascript에서 그 안의 마크업 모두를 동적으로 새로 만들어 주었는데, 강의에서는 ul로 지정해준 후 li, div, span, button을 html 문서에도 모두 적어주었다. (javascript 작성 시 참고 용이었음, 마지막에 지운다)

(2) CSS 스타일링

강의에서도 반응형으로 만들지는 않았다. 반응형으로 어떻게 만들 수 있나 궁금해서 수정해봤다. 근데 최대 크기를 작게 잡아서 크게 의미가 없는 거 같다. vw, vh를 사용해봄.

(3) JavaScript 동적으로

이벤트를 처리할 함수의 이름 앞에는 통상적으로 on을 붙인다. ex) onAdd, onDelete, onClick 등
나는 add 함수에 새로운 요소를 만드는 것까지 전부 쭉 썼는데, 강의에서는 createItem 함수를 만들어서 따로 빼냈다.
나는 휴지통 아이콘을 클릭해서 목록이 삭제되면 input 안의 글자도 삭제되는 것까지만 만들었는데, 강의에서는 여기서 다시 커서가 input 창에 생겨서 사용자가 바로 글자를 입력할 수 있도록 했다. document.querySelector('input').focus() 추가
document.querySelector('input').setAttribute('autoFocus') 아님 주의
나는 자바스크립트에서 createElement를 이용해 새롭게 요소를 만들 때마다 style 속성을 이용해 스타일을 추가한 반면, 강의에서는 새롭게 만든 요소에 class를 부여해서 미리 class마다 정의해둔 CSS 스타일링을 새로 만든 요소에 입혔다.
나는 목록을 이루는 요소들 중 제일 상위 요소만을 createElement를 이용해 만든 후 그 다음부턴 innerHTML을 사용했는데, 강의에서는 목록을 이루는 요소들 전부를 createElement를 이용해 만든 후 appendChild로 요소 밑에 요소를 넣어줬다.
createElement 함수가 '목록'을 반환할 수 있도록 마지막에 꼭 return을 써줘야 한다 !
강의에서는 목록들이 화면의 높이보다 길어지면 스크롤에 의해 자동으로 가장 최근에 추가한 목록이 보여지도록 scrollIntoView를 적용했다.

📌 수정한 코드

🔎 HTML

<html>
  <body>
    <section>
      <header>
        <h1>Shopping List</h1>
      </header>
      <ul class="items"></ul>
      <footer>
        <input class="footer-input" type="text">
        <button class="footer-addBtn"><i class="fas fa-plus-circle"></i></button>
      </footer>
    </section>
  </body>
<html>

🔎 CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  border-style: none;
  background-color: transparent;
  cursor: pointer;
  color: rgb(82, 82, 82);
}

button:hover {
  transform: scale(1.1);
  color: rgb(106, 173, 151);
  transition: all 300ms;
}

body {
  font-family: "Gowun Batang", serif;
  color: rgb(65, 65, 65);
}

section {
  /* 섹션 너비 */
  width: 80vw;
  min-width: 300px;
  max-width: 500px;

  margin: 100px auto;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 10px gray;
  box-shadow: 0 0 10px gray;
}

header {
  /* 헤더 높이 */
  height: 70px;

  text-align: center;
  background: linear-gradient(70deg, rgb(196, 202, 255), rgb(220, 255, 255));
  border-radius: 10px 10px 0 0;
}

h1 {
  line-height: 2.2;
}

.items {
  /* ul 높이 */
  height: 50vh;
  min-height: 300px;

  background: rgb(245, 245, 245);
  overflow: auto;
  padding: 10px;
}

.item-row {
  list-style: none;
  padding: 10px 20px 0 20px;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px;
}

.far {
  font-size: 1.2em;
}

.item-line {
  width: 100%;
  height: 1px;
  background-color: rgb(65, 65, 65);
  margin: 0 auto;
}

footer {
  background: linear-gradient(70deg, rgb(196, 202, 255), rgb(220, 255, 255));
  border-radius: 0 0 10px 10px;
}

.footer-input {
  /* input 너비 & 높이 */
  width: 100%;
  height: 40px;

  font-family: "Gowun Batang", serif;
  padding: 10px 10px;
  border-style: none;
  color: rgb(48, 48, 48);
}

.footer-input:focus {
  outline: none;
  -webkit-box-shadow: inset 0px 0px 5px 2px #b6b6b6;
  box-shadow: inset 0px 0px 5px 2px #b6b6b6;
}

.footer-addBtn {
  display: block;
  margin: 0 auto;
  font-size: 50px;
  padding: 10px 0 5px 0;
}

::selection {
  background-color: rgb(127, 197, 164);
  color: white;
}

🔎 javascript

const input = document.querySelector('input');
const addBtn = document.querySelector('.footer-addBtn');
const items = document.querySelector('.items');

// input 텍스트 값 ( input.value )

function onAdd () {
  if (input.value === '') {
    return;
  } else {
    const itemRow = createItem();
    items.appendChild(itemRow);
    itemRow.scrollIntoView();
    input.value = '';
    input.focus();
  }
}

function createItem () {
  const itemRow = document.createElement('li');
  itemRow.classList.add('item-row');

  const item = document.createElement('div');
  item.classList.add('item');

  const itemName = document.createElement('span');
  itemName.classList.add('item-name');
  itemName.innerHTML = input.value;

  const DeleteBtn = document.createElement('button');
  DeleteBtn.innerHTML = '<i class="far fa-trash-alt">';
  DeleteBtn.classList.add('item-deleteBtn');
  DeleteBtn.addEventListener('click', () => items.removeChild(itemRow));

  const itemLine = document.createElement('div');
  itemLine.classList.add('item-line');

  item.appendChild(itemName);
  item.appendChild(DeleteBtn);

  itemRow.appendChild(item);
  itemRow.appendChild(itemLine);
  console.log(itemRow);

  return itemRow;
}

addBtn.addEventListener('click', () => onAdd());

input.addEventListener('keyup', e => {
  if (e.key === "Enter") {
    onAdd();
  } else {
    return;
  }
});

2. 이벤트(Events)

1) 필기

2) 실습 - 쇼핑 목록 앱 개선하기

(1) 이벤트 위임 응용하기 ( innerHTML & data-id )

DeleteBtn.addEventListener('click', () => items.removeChild(itemRow)); 부분 수정

※ 여기서는 data-id의 값으로 글로벌 숫자 변수를 이용했지만, 원래 UUID나 오브젝트의 해시 코드를 이용해 고유한 아이디를 만드는 것이 좋다.

const input = document.querySelector('input');
const addBtn = document.querySelector('.footer-addBtn');
const items = document.querySelector('.items');

function onAdd () {
  if (input.value === '') {
    return;
  } else {
    const itemRow = createItem();
    items.appendChild(itemRow);
    itemRow.scrollIntoView();
    input.value = '';
    input.focus();
  }
}

// ❗ inneHTML 이용해서 '이벤트 타깃'과 '지워질 대상'에 같은 data-id 부여하기
let id = 0

function createItem () {
  const itemRow = document.createElement('li');
  itemRow.classList.add('item-row');

  itemRow.setAttribute('data-id', id);
  itemRow.innerHTML = `
    <div class="item">
      <span class="item-name">${input.value}</span>
      <button class="item-deleteBtn"><i class="far fa-trash-alt" data-id="${id}"></i></button>
    </div>
    <div class="item-line"></div>
  `;

  id++;

  return itemRow;
}

addBtn.addEventListener('click', () => onAdd());

input.addEventListener('keydown', e => {
  if (e.key === "Enter") {
    onAdd();
  } else {
    return;
  }
});

items.addEventListener('click', event => {
  const id = event.target.dataset.id;
  if (id) { // = event.target의 dataset에 id가 있으면
    const toBeDeleted = document.querySelector(`.item-row[data-id="${id}"]`);
    toBeDeleted.remove();
  }
});

(2) form 태그 이용해 submit 이벤트 등록하기

keydown, click 대신 submit 이용

<form class="footer-form">
  <input class="footer-input" type="text">
  <button type="submit" class="footer-addBtn"><i class="fas fa-plus-circle"></i></button>
</form>

const form = document.querySelector('.footer-form');

form.addEventListener('submit', event => {
  event.preventDefault();
  onAdd();
});

Lee Syong

능동적으로 살자, 행복하게😁

이전 포스트

[TIL] 210927

다음 포스트