-
[JavaScript] To Do List 만들기 - 간단편Frontend/Projects 2020. 11. 21. 16:42
자바스크립트 실력향상을 위해 심플한 투두리스트를 만들어 보기로 했다.
오늘 만들어볼 간단 투두리스트다 이 리스트에 구현할 기능은 다음과 같다.
- 내용을 입력하고 입력버튼을 누르면 리스트에 내용이 추가될 것
- 리스트 삭제 버튼을 누르면 목록에서 사라질 것
- 내용을 입력 후 엔터키를 누르면 목록에 추가될 것
- 내용이 공백이거나 스페이스만 입력된 경우 입력 버튼을 눌러도 목록에 추가되지 않을 것
HTML 작성하기, CSS 부트스트랩 사용하기
<body> <div class="container"> <h1 class="mb-4">TO DO LIST</h1> <h2 class="h4">Stone-dev To do List</h2> <div class="d-flex mb-3"> <input type="text" class="form-control flex-grow-1 mr-2" id="content-input" placeholder="할일 목록"> <button class="btn btn-info" id="add-list">입력</button> </div> <ul class="rounded m-0 p-0" id="to-do-list"></ul> </div> </body>html로 심플하게 작성하기.
제목을 넣어주고 투두리스트를 입력할 창을 만들어준다.
간단하고 빠르게 구현하기 위해 css는 최소화해서 넣어주고 부트스트랩으로 대신했다.
감사합니다. getbootstrap.com/
JS 작성하기
let contentInput let addBtn let todoList window.onload = function () { contentInput = document.getElementById('content-input') addBtn = document.getElementById('add-list') todoList = document.getElementById('to-do-list') }contentInput, addBtn, todoList를 전역변수로 선언한다.
DOM 요소가 모두 로드되면, 각각의 요소를 변수에 할당한다.
전역변수로 할당한 이유는 위에 요소들을 아래에 작성된 addList, removeList, isEmpty 함수에서 중복선언 및 할당 없이 공통으로 쓰기 위함이다.
// 함수 function addList() { let content = contentInput.value if (content.trim()) { let new_li = `<li class="p-2 d-flex justify-content-center align-items-center"> <p class="flex-grow-1 m-0">${content}</p> <button class="btn btn-secondary btn-sm ml-2" onclick="removeList(this)">삭제</button> </li>` todoList.innerHTML += new_li } contentInput.value = '' isEmpty() } function removeList(node) { node.parentNode.remove() isEmpty() } function isEmpty() { if (todoList.children.length === 0) { todoList.classList.remove('border') } else { todoList.classList.add('border') } }addList 함수에서 contentInput의 value를 가져와서 content에 할당했고,
content가 공백 문자일 경우를 제외하기 위해 if 조건문에 content.trim()을 추가했다.
trim()은 자바스크립트에서 사용할 수 있는 기본 함수인데 문자열 앞뒤에 포함된 공백을 모두 제거해준다.
그리고 trim() 함수의 결과가 공백일 경우, if 조건문 안에 return되는 값이 없으므로 false로 인식한다.
그래서 tirm()했을 때, 공백을 제외한 리턴 값이 있다면 if문 안에 내용이 실행된다.
if문 안의 new_li라는 변수에는 추가할 리스트의 html 요소를 ES6 문법의 백쿼트( ` )를 사용해 템플릿 문자열을 포함시켰다.
그리고 문자열 내에는 ${content}로 보간하여 변수를 가져왔다.
다음으로 todoList를 innerHTML로 문자열 형태로 가져와서 += 연산자를 사용해서 new_li에 있는 문자열을 더했다.
removeList에는 node라는 인자를 받아오는데 이 인자는 addList 함수의 new_li 변수에 있는 button 요소의 onclick으로 인라인 자바스크립트로 바인딩 되어있다.
바인딩한 내용을 보면, this를 removeList에 전달해주는데 여기에서 전달한 this는 button 자기자신이다.
removeList에서는 this를 node로 전달받아 해당 요소를 parentNode로 찾고 remove()를 통해 제거했다.
isEmpty 함수는 html에서 작성한 ul에 내용이 있을 때 border 클래스를 추가해주고, 없을 때 제거하기 위해 작성됐다.
조건문에서는 ul이 할당된 todoList에 classList를 사용하여 자식요소들을 찾고, length를 통해 요소의 갯수를 반환받았다.
반환 받은 수가 0개 일 때는 border를 제거하고, 0이 아닐 때는 border를 추가했다.
window.onload = function () { contentInput = document.getElementById('content-input') addBtn = document.getElementById('add-list') todoList = document.getElementById('to-do-list') // 이벤트 바인딩 -- 추가된 코드 addBtn.addEventListener('click', addList) contentInput.addEventListener('keydown', e => { if (e.key === 'Enter') { addList() } }) }이후 addBtn에 addList 함수를 이벤트 리스너를 통해 등록했고,
contentInput에는 keydown 이벤트 발생 시, 키가 엔터일 때만 동작하도록 addList 함수를 등록했다.
-
정말 기본의 기본만 갖춘 투두리스트 완성이다.
다음번에는 여기에 기능과 스타일을 추가해서 좀 더 세련된 버전의 투두리스트를 만들어보고자 한다.
반응형'Frontend > Projects' 카테고리의 다른 글
[Toy Project 기록하기 2] axios로 HTTP 요청 보내기 (0) 2023.02.19 [Toy Project 기록하기 1] 커뮤니티 사이트 기획하기 (0) 2023.02.05 20일동안 한 프로젝트에 매달린 썰 (0) 2022.07.23 [프로젝트 셋팅] CRA에 Prettier + ESLint 설정하기 (0) 2022.04.24 나의 Toy Project 이야기 : What I Ate Today (0) 2022.02.09