정보실

웹학교

정보실

javascript JavaScript로 Todo List 앱을 빌드하는 방법

본문

할 일 목록입니다. 아마도 새로운 프로그래밍 언어를 배울 때 가장 인기 있는 것입니다. 어떤 사람들은 할 일 목록 앱을 만드는 것이 지루한 활동이라고 주장합니다.


그러나 JavaScript를 처음 접하거나 일반적으로 프로그래밍 하는 경우 특히 관련성이 높은 것을 만드는 데 유용한 연습으로 남아 있습니다. 또한 할 일 목록 앱을 빌드 하는 과정에서 배운 많은 개념을 다른 프로젝트에 적용 할 수 있습니다.


따라서 또 다른 할 일 목록 앱을 만들겠다는 아이디어를 얻지 못하고 JavaScript 및 프론트 엔드 개발에 익숙하지 않은 사용자를 위한 튜토리얼입니다.


완성 된 프로젝트의 라이브 데모입니다.


https://freshman.tech/todo-list/ 


전제 조건 


이 학습서는 JavaScript에 대한 기본 지식이 있다고 가정합니다. 본질적으로, 변수, 배열, 함수 및 객체가 무엇인지 알아야 하지만 JavaScript 응용 프로그램을 구축 한 경험이 없어도 됩니다.


시작하기 


우리가 만들 Todo List 앱은 매우 기본적입니다. 사용자는 작업을 추가하고 작업을 완료된 것으로 표시하고 이미 추가 된 작업을 삭제할 수 있습니다. 각 기능을 작성하는 방법에 대해 설명하지만 자습서를 최대한 활용하려면 코드를 입력하고 끝까지 실행해야 합니다.


이 튜토리얼을 진행하는 동안 JSFiddle을 사용하는 것이 좋지만 원하는 경우 다른 코드 플레이 그라운드 또는 로컬 텍스트 편집기를 사용하십시오.


더 이상 고민하지 않고 JSFiddle에서 이 프로젝트의 마크업과 스타일을 가져옵니다. JSFiddle을 사용하는 경우 포크 버튼을 누르면 새로운 fiddle을 만들 수 있습니다.


할 일 추가 


가장 먼저 해야 할 일은 할일 목록 항목을 보유 할 배열을 설정하는 것입니다. 각 할 일은 세 가지 속성을 가진 객체가 될 것입니다 : 사용자가 입력 한 내용을 텍스트 입력으로 보유하는 텍스트, 점검 된 작업이 완료된 것으로 표시되었는지 여부를 확인하는 데 도움이 되고 할일 항목의 고유 식별자 인 id를 식별합니다.


사용자가 작업을 추가하면 새로운 할 일 객체를 배열로 푸시하고 텍스트를 화면에 렌더링 합니다. 사용자가 할 일을 해제하여 완료하면, 우리는 checked 속성을 true로 토글하고, 사용자가 할 일을 삭제할 때, ID를 사용하여 배열에서 할일 항목을 찾아 제거합니다.


할 일 항목을 목록에 추가하여 시작하겠습니다. 그렇게 하려면 .js-form에서 submit 이벤트를 수신한 다음 양식을 제출할 때 새 addTodo() 함수를 호출해야 합니다.


JSFiddle에서 JavaScript 창을 다음과 같이 업데이트하십시오.


let todoItems = [];

function addTodo(text) {
  const todo = {
    text,
    checked: false,
    id: Date.now(),
  };

  todoItems.push(todo);
  console.log(todoItems);
}

const form = document.querySelector('.js-form');
form.addEventListener('submit', event => {
  event.preventDefault();
  const input = document.querySelector('.js-todo-input');

  const text = input.value.trim();
  if (text !== '') {
    addTodo(text);
    input.value = '';
    input.focus();
  }
});


일반적으로 양식을 제출하면 브라우저는 양식을 서버에 제출하여 페이지를 새로 고칩니다. 관심이 없기 때문에 event.preventDefault()를 사용하여 기본 동작을 중지합니다.


다음으로 텍스트 입력을 선택하고 그 값을 잘라서 문자열의 시작과 끝에서 공백을 제거하고 text라는 새로운 변수에 저장합니다.


텍스트 변수가 빈 문자열과 같지 않으면 텍스트를 이벤트 리스너 위에 정의 된 addTodo() 함수에 전달합니다. 함수 내에서 작업에 대한 새 객체를 만들고 앞에서 언급 한 속성을 추가합니다.


text 속성은 입력에서 텍스트로 설정되고, checked는 false로 초기화되고, id는 1970 년 1 월 1 일 이후에 삭제 된 밀리 초 수로 초기화됩니다.이 id는 각 할 일 항목마다 고유합니다. 밀리 초 안에 하나의 작업으로, 가능하지 않다고 생각합니다.


마지막으로 작업이 todoItems 배열로 푸시되고 배열이 콘솔에 기록됩니다. 텍스트 입력의 값은 빈 문자열로 설정하여 지워지며, 사용자가 입력을 계속해서 다시 초점을 맞출 필요 없이 여러 항목을 목록에 추가 할 수 있도록 초점이 맞춰집니다.


할 일 항목을 몇 개 추가하고 콘솔에서 todoItems 배열을 봅니다. 배열에서 객체가 나타내는 각 할 일 항목을 볼 수 있습니다.


f9a68efc42d9db33718a239bc58dddd6_1571883918_1044.png
 

할 일 항목 렌더링 


우리가 todoItems 배열에 할 일을 추가하면, 우리는 페이지가 업데이트 될 아이템이 화면에 렌더링 합니다. 우리의 .js - 할 일 목록에 각 항목에 대한 새로운 리튬 요소를 추가하여 아주 쉽게 이 작업을 수행 할 수 있습니다.


이를 위해 addTodo()에서 console.log() 문을 다음과 같이 바꾸십시오.


function addTodo(text) {
  const todo = {
    text,
    checked: false,
    id: Date.now(),
  };

  todoItems.push(todo);

  const list = document.querySelector('.js-todo-list');
  list.insertAdjacentHTML('beforeend', `
    <li class="todo-item" data-key="${todo.id}">
      <input id="${todo.id}" type="checkbox"/>
      <label for="${todo.id}" class="tick js-tick"></label>
      <span>${todo.text}</span>
      <button class="delete-todo js-delete-todo">
        <svg><use href="#delete-icon"></use></svg>
      </button>
    </li>
  `);
}

insertAdjacentHTML() 메소드를 사용하면 이미 존재하는 요소를 참조점으로 사용하여 HTML을 DOM에 추가 할 수 있습니다. 이 경우 .js-todo-list를 참조로 사용하고 닫는 태그 앞에 각 할 일 항목에 대해 새로운 li 요소를 추가합니다.


각 할 일 항목에는 항목의 ID로 설정된 데이터 키 속성이 있습니다. 이는 DOM에서 할 일 항목을 쉽게 찾을 수 있게 해주는 중요한 단계입니다. 작업 확인 및 삭제 섹션으로 이동하면 어떻게 사용되는지 볼 수 있습니다.


사용해보십시오. 사용자가 새 작업을 입력하면 페이지에 렌더링 됩니다.


https://jsfiddle.net/ayoisaiah/1uL24kxb/3/?utm_source=website&utm_medium=embed&utm_campaign=1uL24kxb 


f9a68efc42d9db33718a239bc58dddd6_1571884155_9391.jpg
 

작업을 '완료'로 표시 


다음으로 구현할 기능은 작업을 완료된 것으로 표시하는 기능입니다. 그렇게 하려면, 체크 박스에서 클릭 이벤트를 수신 한 다음 필요에 따라 할일 항목에서 체크 된 속성을 토글 해야 합니다.


JS 분할 창 맨 아래에 다음 이벤트 리스너를 추가하십시오.


const list = document.querySelector('.js-todo-list');
list.addEventListener('click', event => {
  if (event.target.classList.contains('js-tick')) {
    const itemKey = event.target.parentElement.dataset.key;
    toggleDone(itemKey);
  }
});

개별 체크 박스 요소에 대한 클릭을 듣는 대신 .js-todo-list에 대한 클릭을 듣고 있습니다. 클릭 이벤트가 목록에서 발생하면 클릭 한 요소가 확인 란 인지 확인합니다. 그렇다면 확인 란의 부모 요소에서 data-key의 값을 추출하여 addTodo() 함수 아래에 생성 할 새로운 toggleDone() 메서드로 전달합니다.

function toggleDone(key) {
  const index = todoItems.findIndex(item => item.id === Number(key));
  todoItems[index].checked = !todoItems[index].checked;

  const item = document.querySelector(`[data-key='${key}']`);
  if (todoItems[index].checked) {
    item.classList.add('done');
  } else {
    item.classList.remove('done');
  }
}

이 함수는 확인되거나 선택되지 않은 목록 항목의 키를 수신하고 findIndex 메소드를 사용하여 todoItems 배열에서 해당 항목을 찾습니다. 그런 다음 checked 속성 값을 반대 값으로 토글 합니다. 마지막으로, 완료된 클래스는 체크 상태에 따라 항목에서 추가되거나 제거됩니다. 이 클래스는 텍스트를 작성하고 완성 된 항목의 확인란에 확인 표시를 표시하는 효과가 있습니다.


f9a68efc42d9db33718a239bc58dddd6_1571884321_2956.jpg
 

https://jsfiddle.net/ayoisaiah/1uL24kxb/4/?utm_source=website&utm_medium=embed&utm_campaign=1uL24kxb 


할일 항목 삭제 


마지막 기능을 구현 한 방식과 유사하게 .js-delete-todo 요소에 대한 클릭을 수신 한 다음 상위 키를 가져 와서 새 deleteTodo 함수로 전달하여 todoItems에서 해당 항목을 제거합니다. DOM에서 할 일 항목을 제거하십시오.


먼저 삭제 버튼을 클릭했는지 감지하십시오.


const list = document.querySelector('.js-todo-list');
list.addEventListener('click', event => {
  if (event.target.classList.contains('js-tick')) {
    const itemKey = event.target.parentElement.dataset.key;
    toggleDone(itemKey);
  }

  // add this `if` block
  if (event.target.classList.contains('js-delete-todo')) {
    const itemKey = event.target.parentElement.dataset.key;
    deleteTodo(itemKey);
  }
});


그런 다음 다음과 같이 toggleDone() 아래에 deleteTodo() 함수를 만듭니다.


function deleteTodo(key) {
  todoItems = todoItems.filter(item => item.id !== Number(key));
  const item = document.querySelector(`[data-key='${key}']`);
  item.remove();
}


이제 삭제 버튼을 눌러 작업을 삭제할 수 있습니다.


https://jsfiddle.net/ayoisaiah/1uL24kxb/10/?utm_source=website&utm_medium=embed&utm_campaign=1uL24kxb 


빈 상태 프롬프트 추가 


앱에 표시 할 데이터가 없으면 빈 상태가 발생합니다. 예를 들어, 사용자가 아직 할 일을 추가하지 않았거나 (처음 사용) 또는 사용자가 목록을 지웠을 때. 응용 프로그램을 설계 할 때이 상태를 고려해야 합니다.


많은 앱이 빈 상태를 사용하여 사용자에게 수행 할 작업을 알려주는 프롬프트를 표시합니다. 다음은 좋은 빈 상태 프롬프트가 어떻게 보이는지에 대한 실제 예입니다.


Hangouts empty state 


그리고 다음은 그다지 빈 상태 디자인의 예입니다.


Unsplash empty state 


이 연습에서는 표시 할 작업이 없으면 사용자가 새 작업을 추가하도록 권장하는 프롬프트를 추가합니다. 이 기능은 일부 HTML 및 CSS로 구현할 수 있습니다. CSS에 : empty 선택기를 사용하여 목록에 항목이 없는 경우에만 조건부로 프롬프트를 표시합니다.


아래와 같이 빈 상태 프롬프트의 마크 업을 추가하십시오.


<main>
  <div class="container">
    <h1 class="app-title">todos</h1>
    <ul class="todo-list js-todo-list"></ul>
    <!-- add the empty state here -->
    <div class="empty-state">
      <svg class="checklist-icon"><use href="#checklist-icon"></use></svg>
      <h2 class="empty-state__title">Add your first todo</h2>
      <p class="empty-state__description">What do you want to get done today?</p>
    </div>
    <!-- end -->
    <form class="todo-form js-form">
      <input autofocus type="text" aria-label="Enter a new todo item" placeholder="E.g. Build a web app" class="js-todo-input">
    </form>
  </div>
</main>

<!-- rest of the code -->

그런 다음 CSS에서 빈 상태에 대한 스타일을 추가하십시오.


/* Add this below all the other styles */

.empty-state {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: flex;
}

.checklist-icon {
  margin-bottom: 20px;
}

.empty-state__title, .empty-state__description {
  margin-bottom: 20px;
}


이것은 잘 보이지만 문제는 작업이 목록에 추가 된 경우에도 메시지가 지속된다는 것입니다. 의도 된 동작은 할 일이 추가 된 후 프롬프트가 사라지고 표시 할 작업이 더 이상 없을 때만 다시 나타납니다.


f9a68efc42d9db33718a239bc58dddd6_1571884624_7302.jpg
 

이 CSS는 우리에게 원하는 것을 제공합니다.


/* Change the `display: flex` to `display: none` */

.empty-state {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: none;
}

/* Add this below the other styles */
.todo-list:empty {
  display: none;
}

.todo-list:empty + .empty-state {
  display: flex;
}

 

.empty-state는 display : none으로 기본적으로 보기에서 숨겨지고 .todo-list가 비어있을 때만 표시됩니다. 우리는 : empty 선택기를 사용하여 .todo-list가 비어있을 때를 감지하고 형제 선택자 (+)를 사용하여 .empty-state를 대상으로 하고 표시를 적용합니다.


이제 우리는 완전한 기능을 갖춘 할 일 목록 애플리케이션을 가지고 있으며이를 달성하기 위해 많은 코드를 작성할 필요가 없습니다.


The empty state is hidden once a new todo item is added to the list 


미묘한 버그 


이 자습서에서 작업하는 동안 발생한 한 가지 문제는 기존 작업이 모두 삭제 될 때 빈 상태가 다시 표시되지 않는다는 것입니다.


Empty state bug 


문제는 모든 하위 li 요소가 제거되었지만 .to-list 요소에 일부 공백이 지속되므로 빈 요소로 간주되지 않는다는 것입니다. 이 문제를 해결하려면 JavaScript의 요소에서 공백을 제거해야 합니다. 다음과 같이 deleteTodo() 함수를 수정합니다.


function deleteTodo(key) {
  todoItems = todoItems.filter(item => item.id !== Number(key));
  const item = document.querySelector(`[data-key='${key}']`);
  item.remove();

  // select the list element and trim all whitespace once there are no todo items left
  const list = document.querySelector('.js-todo-list');
  if (todoItems.length === 0) list.innerHTML = '';
}


위의 코드는 문제를 해결하고 이제 앱이 예상대로 작동합니다.


Final application 


https://jsfiddle.net/ayoisaiah/1uL24kxb/9/?utm_source=website&utm_medium=embed&utm_campaign=1uL24kxb 


마무리 


이 기사에서는 사용자가 새 작업을 추가하고 작업을 완료된 것으로 표시하고 이전 작업을 삭제할 수 있는 간단한 할 일 목록 앱을 작성하는 방법을 보여주었습니다. 또한 응용 프로그램을 디자인 할 때 빈 상태를 고려하는 것이 중요하다는 것을 논의한 다음 : empty 선택기를 사용할 때 발생할 수 있는 잠재적 문제와 해결 방법에 대해 이야기했습니다.


당신이 뭔가를 배우기를 바랍니다. 섹션 또는 코드가 명확하지 않은 경우 아래에 의견을 남겨 주시면 최대한 빨리 연락 드리겠습니다.



페이지 정보

조회 51회 ]  작성일19-10-24 11:40

웹학교