To Do List 만들기 (TIL #7)

완성된 TODO List

완성한 페이지는 배포하는 방법 복습겸 배포해보았다.
https://chay140.github.io/todoList/

과제 시작

할 일을 추가 할 수 있는 투두 리스트를 만들기. 추가사항으로 완료표시와 삭제 기능까지 넣어보기!

과제 설명

사용자가 입력창에 입력한 값을 받아와서 투두 리스트에 추가하는 기능 구현하기. 여기에 더해 완료 표시와 삭제 기능을 넣으면 좋을 것 같다는 생각이 들었다.

검색했던 부분들

HTML 요소(엘리먼트) 만드는 방법

JQuery 외에도 요소를 만들고 부르는 다른 정석(?)적인 방법이 있는데 아래와 같다.

 const element = document.createElement('tagName');

이를 원하는 곳에 추가하는 방법은 아래와 같다.

const p = document.createElement('p');
p.textContext = "새로운 단락";

// myDiv id를 가진 요소를 DOM으로 불러옴
const div = document.querySelector("#myDiv");
div.appendChild(p);		// myDiv에 p요소를 추가함

단점이 있다면 method를 한 번씩 밖에 못쓴다는 것이다. textContext를 한 줄에 지정해주고 className을 다른 줄에 지정해 주어야 하는 등 번거로움이 있다.

const li = document.createElement('li');
li.className = 'my-list';
li.style.color = 'blue';
li.textContext = '디폴트 값';
...

JQuery는 이와 다르게 chaining을 지원해서 코딩이 보기에 편하다. 아래와 같이 여러 method를 동시에 적용할 수 있다.

// addClass(): 'active' class 추가
// .hide(): 요소를 숨김
// .fadeIn(): 서서히 드러나는 애니메이션 추가
$('#id-name').addClass('active').hide().fadeIn();

대신 JQuery랑 비교했을 때 외부 라이브러리가 아니므로 속도가 훨씬 빠르다. 간단한 동작만 필요할 때에는 이쪽이 더 나을 수도 있다.

이번 과제는 스크립트를 쓰다보니 짬뽕으로 사용했는데, 다음에는 좀 통일하는 방향으로 써야할 것 같다.

엔터키값 알아내기

과제 내용을 구글링 하던 중, 꽤 다양한 투두 리스트를 알게되었는데 그 중 키보드를 엔터를 치면 바로 할 일을 만드는 기능이 있으면 좋을 것 같아서 참고하였다. Todo List 만들기-할 일 추가하기

위 벨로그를 참고하여 엔터키값이 13이라는 것과 이를 keyCode라는 값으로 나타나는 것을 배웠다. 그래서 만든 함수가

function keyCheck() {
	if (window.event.keyCode == 13 && $('#user-input').val() != '') {
		addEvent();
	}
}

그리고 keyCheck() 는 사용자가 할 일을 입력하는 창에다가 링크하였다. onkeydown으로 키보드 이벤트를 확인 할 수 있다.

<input type="text" 
       class="user-input" 
       id="user-input" 
       placeholder="할 일을 입력하세요" 
       onkeydown="keyCheck()">

input 체크박스

input으로 체크박스를 만들 수 있다고 해서 이번 과제에 적용해보았다. 이를 체크할시 완료했다는 표시가 뜨게금 addEventListener를 사용했다.

우선 li요소를 만들어주는데 input요소만 좀 길어서 JQuery를 사용했다.

const li = document.createElement('li');
const span = document.createElement('span');
let checkButton_html = `
	<input class="form-check-input" type="checkbox" value="" id="todo-checkbox">
`;
const closeButton = document.createElement('button');

// li에 모든 요소 넣기
li.appendChild(span);
$(li).append(checkButton_html);		//html 추가시 $()로 요소를 감싸야함
li.appendChild(closeButton);

// ul에 추가해주기
$('#user-list').append(li);

input 요소를 만들때 todo-checkbox라는 id값을 주고 이에다가 addEventListner를 사용하면 이벤트를 추가할 수 있다. 찾아보니 input 요소의 체크가 되었는지 아는 태그는 'change'이다

const checkbox = li.querySelector('#todo-checkbox');
checkbox.addEventListener('change', function () {
	if (checkbox.checked) {
    	span.classList.add('task-completed');
    } else {
        span.classList.remove('task-completed');
    }
});

span요소에 'task-completed'이라는 클래스를 붙여주고 떼어주는 함수이다. 그리고 'task-completed'에는 글자색을 회색으로 바꾸고 줄을 그어주면 완료했다는 표시처럼 보이게 된다.

.task-completed {
    text-decoration: line-through;
    color: grey;
}

X 버튼

삭제 버튼도 addEventListner를 사용하여 만들 수 있고, 방법은 아래와 같다.

closeButton.addEventListener('click', () => {
	li.remove();
});

버튼이 눌렸는지 확인하는 태그는 'click'이고 이게 함수를 추가해서 li요소를 제거해주면 삭제 기능이 완성된다.

마치며...

JQuery말고 일반적인 방법으로 요소를 추가하고 만드는 방법이 있다는 것은 알고는 있었지만, 왜 사람들이 이 방법보다 JQuery를 선호하는지 알 것 같은 과제였다. 그리고 요소마다 addEventListener 태그가 다르다는 것도 검색하다보니 알게되어서 시간이 생각보다 많이 걸린.... 앞으로도 이러려나 하핳....