[혼공자스] 07. 예제(할 일 목록 만들기)

혼자공부하는 자바스크립트 중 352페이지에 나와있는 할 일 목록 만들기 예제를 별도로 포스팅하여 정리하겠음.

간단한 코드지만 나한테는 넘나리 복잡하고 어려운 코드이므로 별도로 정리하겠음.

단계는 크게 총 4단계로 나뉘어진다. 

1단계. 기본 포맷 만들기 (header, input, button)
2단계. 추가 포맷을 추가 만들기 (checkbox, span, button)
3단계. 실행 후 어떤 기능이 추가되면 좋을지 생각해본다 
           1) 한 번 입력 -> 추가되면 input 안의 글자가 지워졌으면 좋겠다
           2) 빈칸일 때 추가하기를 누르면 추가가 안되도록 했으면 좋겠다
4단계. 1) checkbox를 누르면 취소선
           2) 제거하기 버튼 누르면 삭제되는 기능 추가

 

그럼 단계적으로 코드를 구현하면 아래와 같다.

1, 2단계 

 

head 태그 내 script 태그에 코드를 적는다. 필요한 요소들을 createElement로 만들고,  appendChild 를 이용하여 1단계 요소는 body태그에 붙이고, 2단계 요소는 div에 요소를 붙인다. 

 

3단계 1) 한 번 입력하고 추가 누른 후 input 안의 글자가 사라지는 코드

 

2)  빈칸일 때 추가하기를 누르면 추가가 안되록 하는 코드

엄청 길지만 if문으로 빈칸이 아닌 경우는 할 일 목록에 추가되도록 만든 것

 

 

4단계 1) checkbox를 누르면 취소선

 

2) 제거하기 버튼 누르면 삭제되는 기능 추가

 

 

 

이를 합치면 아래와 같은 코드가 완성된다.

뭔가 순서대로 마킹해두니 코드가 더 눈에 잘들어고 읽기가 편했다.

 

하면서 자꾸 appendChilnd ( ) 괄호 내에 뭘 넣어야 하는지 제대로 알지 못했는데 이 코드를 만들면서 확실히 알게되었다.

appendChild 앞에는 어느 놈에 붙일지 적는 것이고, 괄호 안에는 붙일 놈의 이름을 적는 것.

아주 초보적인 실수지만 코드를 적다보면 소괄호, 중괄호가 자꾸 오류가 뜬다. 닫아야하는데 안닫혀있다거나 안닫혀야하는데 괄호가 있다거나 그런 사소한 문제가 생긴다...꼭 코드를 마지막에 슥 흝으면서 괄호가 짝이 맞게 들어갔는지 확인하는 습관을 들여야겠다...