To Do List 만들기
1. CRUD
2. To Do List 제작
2.1. 기본 틀
2.2. List 항목 Create
2.3. List 항목 Update
2.4. List 항목 Delete
2.5. 완성된 JavaScript
1. CRUD
대부분의 게시판은 CRUD 속성을 갖는다. CRUD는 4개 단어의 약자를 따서 만들었다. C는 Create, R은 Read, U는 Update, D는 Delete를 의미한다.
오늘 제작할 To Do List는 C, U, D 기능을 사용할 수 있도록 하는 것이 목표이다.
2. To Do List
2.1. 기본 틀
form 태그 안에 input 태그 2개를 넣어서 각각 해야 할 일을 작성할 수 있는 text 박스와 작성한 내용을 등록할 수 있는 submit 박스로 나타냈다.
ul 태그 안에는 submit한 List 항목이 담기도록 JavaScript로 구현할 것이다.
CSS 파일은 기본적인 내용을 삽입해주었다.
이 게시물을 순서대로 보는 당신은 .span2Element와 .inputElement는 HTML 파일에 존재하지 않는 class 명인데 왜 적혀 있는가 의문이 들 것이다. 이는 script에서 새로운 Element를 생성해주고 그 Element에 class명을 붙일 수 있기 때문이다.
2.2. List 항목 Create
[그림 2]의 HTML을 보면 head에 script를 넣은 것을 볼 수 있다. 따라서 body에 있는 내용에 대해 script를 작성하면 실행 순서가 head -> body이기 때문에 body가 랜더링되기 전에 head의 script가 동작하려고 하다가 에러가 발생한다.
이를 해결해주기 위해 [그림 4]의 첫 문장에 addEventListener를 이용해서 DOM Content가 모두 로드된 후에 init이라는 function이 실행되도록 해주었다.
submitHandler 함수는 작성한 List 항목 등록에 관여한다. input 태그의 submit 타입은 submit이 되었을 때 action=""의 ""안에 포함된 주소로 이동하는 특징이 있다. 이를 제거해주기 위해 preventDefault()를 적어주었다.
addCard는 List에 항목을 새로 추가하는 함수이다. 원래 HTML 파일에는 ul 태그가 있고 그 안에 아무것도 없었는데, 그 안에 li를 만들고 li 안에 spanElement와 span2Element로 span 태그 2개를 생성해준다. spanElement를 클릭하면 Update가 되도록 하고, span2Element를 클릭하면 Delete가 되도록 해 줄 것이다.
2.3. List 항목 Update
updateFlag는 [그림 4]에서 선언되어 true라는 값이 할당되었다. if 문이 의미하는 것은 하나의 항목 수정이 완료되기 전에 다른 항목을 수정할 수 없도록 하기 위함이다.
수정 후 다시 input 태그에서 span 태그로 돌아가기 위해 keypressHandler 함수를 만들었다. keyCode가 13인 것은 Enter 키이다.
함수의 마지막 부분에 updateFlag 값을 true로 바꿔주는 이유는 첫 번째 수정 시에만 함수가 작동하는 것이 아니라, 몇 번을 수정하더라도 수정 후 Enter 키를 누르면 input 태그가 없어지고 span 태그로 수정된 문구가 나타나도록 해주기 위함이다.
2.4. List 항목 Delete
Delete 기능은 다른 기능에 비해 간단하다. span2Element의 parentNode인 li 태그를 remove()로 삭제해주면 된다.
2.5. 완성된 JavaScript
위에 언급한 기능들이 모두 포함되어 있는 완성된 JavaScript이다.
웹 페이지에서 잘 작동하는 것을 확인하였다.