자바스크립트로 ToDoList를 만들어보자 - 버튼 로직

 

 안녕하세요. 진득 코딩입니다.

 

 이번 시간에는 저번 포스팅부터 시작한 To-Do-List의 버튼 로직을 만드는 과정에 대해 살펴보도록 하겠습니다.

 

HTML

 

 

 task-Board 안에 들어가는 버튼들의 변화가 많은데 이 task들은 js 파일에 있기 때문에 HTML 파일에는 변화가 거의 없습니다.

 

 우선 head 부분을 살펴보면 하이퍼링크에 파일 이름이 바뀐 것을 확인할 수 있습니다.

 

 이번 과정 중에 favicon을 추가하였고 해당 정적 파일은 favicon 폴더에 넣어두었습니다.

 

 또한 <input> 태그 밑에 있는 + 아이콘 부분을 <button> 태그에서 <img> 태그로 변경하여 버튼 이미지를 업데이트하였습니다.

 

CSS

 

 

 다음은 css에 추가된 css 클래스에 대해 살펴보도록 하겠습니다.

 

 전체적으로 check와 delete 버튼을 이미지로 바꿨기 때문에 추가된 스타일들입니다.

 

 checkIcon과 returnIcon은 같은 스타일이 들어가지만 따로 클래스를 구분한 것은 나중에 따로 스타일을 적용할 일이 있을 수도 있다고 판단해서 나눠놓았습니다.

 

main.js

 

 

 다음은 JS 파일을 살펴보도록 하겠습니다.

 

 저번 포스팅에서는 taskContent라는 변수를 array에 담아서 활용하였습니다.

 

 하지만 check 기능과 delete 기능을 사용하기 위해서는 id와 해당 아이템이 check 상태인지를 확인해 줄 수 있는 변수가 추가로 필요하였습니다.

 

 그래서 id 변수와 isComplete 변수가 추가된 객체를 만들어서 해당 객체를 array에 담는 방식으로 바꾸었습니다.

 

id는 고유의 값을 가져야 하기 때문에 randomIDGenerate() 함수를 이용하여 id를 생성하였습니다.

 

 

 randomIDGenerate() 함수는 고유 ID를 생성해 주는 함수입니다.

 

 이러한 ID는 보통 라이브러리에서 가져오는 것이 좋지만 배우는 단계이기 때문에 함수를 생성하여 이용하였습니다.

 

 해당 함수는 직접 만든 것이 아닌 구글링을 통해 나와있는 함수를 사용하였습니다.

 

 

 html에 UI를 그려주는 render() 함수에도 변화가 생겼습니다.

 

 isComplete boolean 변수를 이용하여 if문으로 상황에 맞게 그려주도록 변경하였습니다.

 

 resultHTML을 살펴보게 되면 변수를 사용하다가 객체를 사용하게 되었기 때문에 단순히 taskList의 index만을 입력하는 것이 아닌 객체의 요소를 넣은 것을 확인할 수 있습니다.

 

 또한 <button> 태그들을 <img> 태그로 바꾸어 버튼들의 요소를 이미지로 바꾸어주었습니다.

 

 

 다음은 check 버튼을 눌렀을 때 실행되는 함수를 살펴보도록 하겠습니다.

 

 객체에 저장된 id를 가져와서 해당 아이디에 맞는 array 요소를 찾아 isComplete 변수를 바꿔주는 함수입니다.

 

 스위치처럼 누를 때마다 true와 false가 될 수 있도록 부정연산자(!)를 사용하였습니다.

 

 해당 요소를 찾으면 메모리를 아끼기 위해 break;를 사용하여 바로 for문을 빠져나오도록 하였습니다.

 

 이때 변수를 바꾸고 해당 변화를 UI에 표현하기 위해서 render() 함수를 호출하여 다시 HTML을 그려주도록 하였습니다.

 

 

 다음은 delete 버튼을 눌렀을 때 호출되는 함수를 살펴보도록 하겠습니다.

 

 전체적인 함수 구조는 toggleComplete() 함수와 같습니다.

 

 해당 함수는 array에서 해당 요소를 찾아 삭제해야 하기 때문에 splice()를 사용하였습니다.

 

 해당 함수가 실행된 후 변경 사항을 UI에 표현하기 위해 render() 함수를 호출해 주었습니다.

 

 

---

 

 이번 시간에는 check 버튼과 delete 버튼 기능을 구현하고 간단하게 UI를 업데이트하는 과정을 살펴보았습니다.

 

 HTML/CSS와 JS를 사용하다 보니 로직을 먼저 구현하고 기능이 잘 돌아가는 상태에서 UI를 업데이트하는 것이 순서상 좋다는 것을 느꼈습니다.

 

 이번 포스팅은 여기까지입니다.

 

 궁금하신 사항이나 문의하실 사항은 댓글로 남겨주시면 열심히 답글 달도록 하겠습니다.

 

 끝까지 봐주셔서 감사합니다.😊