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

[그림 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. 기본 틀

[그림 2] To Do List의 HTML 파일 

form 태그 안에 input 태그 2개를 넣어서 각각 해야 할 일을 작성할 수 있는 text 박스와 작성한 내용을 등록할 수 있는 submit 박스로 나타냈다.

 

ul 태그 안에는 submit한 List 항목이 담기도록 JavaScript로 구현할 것이다.

 

[그림 3] To Do List의 CSS 파일

CSS 파일은 기본적인 내용을 삽입해주었다. 

 

이 게시물을 순서대로 보는 당신은 .span2Element와 .inputElement는 HTML 파일에 존재하지 않는 class 명인데 왜 적혀 있는가 의문이 들 것이다. 이는 script에서 새로운 Element를 생성해주고 그 Element에 class명을 붙일 수 있기 때문이다.

 

2.2. List 항목 Create

[그림 4] List 항목 Create 기능을 넣은 script

[그림 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

[그림 5] List 항목 클릭 시 input 태그가 나타나는 script

updateFlag는 [그림 4]에서 선언되어 true라는 값이 할당되었다. if 문이 의미하는 것은 하나의 항목 수정이 완료되기 전에 다른 항목을 수정할 수 없도록 하기 위함이다. 

 

[그림 6] List 항목 수정 후 Enter를 눌렀을 때 실행되는 script 구문

수정 후 다시 input 태그에서 span 태그로 돌아가기 위해 keypressHandler 함수를 만들었다. keyCode가 13인 것은 Enter 키이다.

 

함수의 마지막 부분에 updateFlag 값을 true로 바꿔주는 이유는 첫 번째 수정 시에만 함수가 작동하는 것이 아니라, 몇 번을 수정하더라도 수정 후 Enter 키를 누르면 input 태그가 없어지고 span 태그로 수정된 문구가 나타나도록 해주기 위함이다.

 

2.4. List 항목 Delete

[그림 7] List 항목 Delete 기능 script

Delete 기능은 다른 기능에 비해 간단하다. span2Element의 parentNode인 li 태그를 remove()로 삭제해주면 된다.

 

2.5. 완성된 JavaScript

[그림 8] 완성된 JavaScript

위에 언급한 기능들이 모두 포함되어 있는 완성된 JavaScript이다.

 

[그림 9] 완성된 To Do List 웹페이지

웹 페이지에서 잘 작동하는 것을 확인하였다.