[노마드코더] 바닐라JS로 크롬 앱 만들기 - #3. Todolist

이 부분은 지식적인 내용보다 깨달은 내용들에 대한 회고를 주로 하고자 한다.

 

3. TODOLIST

3.1 회고

todolist 기능을 구현하는데 꼬박 2일정도 걸렸다. 중간에 도저히 어려워서 이 부분만 따로 강의를 다시 듣고 코드를 작성했다.(보고 따라치지 않고 니코가 코드를 작성하는 맥락을 파악하려고 노력했다.)

 

결국 어렵고 장황하게라도 기능 구현에는 성공했지만 고군분투 하고 나서 느낀 점들이 앞으로 프로그래밍 할 때 굉장히 중요한 관점이 될 것 같아서 따로 메모해둔다.

 

이런 것이 부족했다.

 

보통 글을 쓸 때, 개요를 먼저 잡고, 개요마다 소제목들을 붙인다. 그리고 이 틀을 바탕으로 글을 써내려간다. 글이 완성되면 개요에 맞게 잘 썼는지 퇴고하는 과정을 거친다.

 

프로그래밍도 글쓰기와 비슷한 것 같다.

 

이번 ToDoList 프로그래밍을 글쓰기에 비유하면, 
난 개요를 되게 러프하게 잡고 소제목 없이 글을 쓰는것 부터 시작했다. 그리고 글의 개요마다 글을 어떤 내용으로 전개할지 전혀 그려지지 않는 상태에서 글을 써내려간 것이다.

그런데 어찌됐건 오랜 시간동안 뺑이치면서 장황하게 글은 완성한 상태인거지.
그래서 러프한 글의 개요에 맞게 글을 퇴고해야 하는 상황이 된거야.

만약 글을 쓰기 전에 개요를 확실히 잡고 각 개요 항목마다 "아 여기 글 내용은 이런 내용으로 적어야겠다"라는 판단이 됐더라면 훨씬 간결하고 효율적으로 글을 쓸 수 있었겠지.

이런 생각이 들던 찰나 나의 부족한 점은 이런 것이 아닐까? 라고 생각이 들었다.

 

처음에 탄탄하게 개요를 잡는 것이 부족했다는 거.

글에서 개요가 프로그래밍에서는 "기능"이고, 그 기능을 적절하게 쪼갤 줄 알아야한다. 한 꼭지에 너무 많은 내용을 담으면 글이 장황해지는 것 처럼, 함수안에도 여러 기능을 담으면 코드가 복잡해진다. 이 말은 들어서 알고있었지만 '그 기능들을 어떻게 쪼개서 함수를 정의하는 것이 효율적인가?' 감 잡기 어려웠다 . 그래서 하나의 함수에 여러가지 기능을 계속 넣어댔다.

 

그러다보니 함수 내에서 변수 선언을 여러가지를 하게 되는데 이 것이 코드를 더 복잡하게 만들었다.

즉, 그 변수들이 무엇을 의미하는지 맥락이 흐려졌다. 기능을 적절히 쪼개고 그 기능 역할을 하는 함수들을 적절한 변수로 연결하면 되는 것을. 변수를 함수에 인자로 넘겨 호출하면 되는데.

그리고 기능 구현을 위한 함수를 작성할 때 구체적으로 함수 내에 어떤 로직으로 어떤 코드가 쓰이겠구나라는 것들이 전혀 감이 안오니까, 즉 개요 항목에 대해 글이 어떻게 전개될지 잘 파악이 안되니까 더 어려웠다. 이 부분은 문법 학습과 기능구현 경험이 쌓이면 점차 개선되리라 믿는다.

결론적으로, 변수를 선언할때도 프로그래밍 로직이 머리에 안서있으니 맥락에 맞게 재사용할 코드를 변수선언하지 못하고 의미론적으로 적절한 변수명을 고르기도 어려웠다. 

종합적으로 이런 부족함 때문에 프로그래밍 하는데 어려움을 느끼는 것 같다.

 

그래서 일단 싸질러놓은 글을 개요에 맞게 퇴고해 보면서 즉, 프로그래밍한 코드를 다시 퇴고(중복 코드 변수화, 함수(기능)분리)하는 과정이 필요하다고 생각해 니코의 코드를 분석해보았다.

 

큰 줄기는 이렇다.

Todolist의 기능을 설명하자면

1. 사용자가 todolist를 입력폼에 작성한다.

2. 작성 내용을 제출한다.

3. 작성된 내용을 목록에 추가한다.

4. 목록에 추가된 내용은 사용자가 삭제할 수 있다.

5. 페이지를 새로고침하거나 브라우저를 닫았다 새로 열더라도 사용자가 작성한 내용이 브라우저에 남아있게 한다.

6. 이러한 기능을 구현하는 과정에서 발생하는 문제들을 해결해준다.

 

이런 기능들을 구현하려면 크게 세 가지 기술영역에서 작업을 유기적으로 해줘야 한다.

1. 메모리

2. HTML

3. Localstorage

 

작성한 함수를 기준으로 보면

1. creatList : 폼제출 이벤트 핸들러의 콜백함수는 "사용자가 제출한 정보를 메모리와 로컬 스토리지에 저장하는 기능"으로 작성한다.

2. paintList : 콜백함수에서 생성한 정보를 활용해 "HTML 태그를 작성하는 함수"를 작성한다. 물론 이 함수는 이벤트리스너의 콜백함수에서 생성한 정보를 인자로 받는다.

3. deleteList : 작성한 HTML에는 "완료한 todo를 제거하는 기능"이 필요하다. 따라서 위 함수에 삭제버튼 클릭 이벤트 핸들러의 콜백함수를 작성한다. 삭제를 위한 콜백함수는 "메모리, HTML, Localstorage에 저장된 정보를 수정하는 코드"를 작성해야한다.

4. 새로고침 시 동적으로 추가된 요소가 사라지는 문제를 Localstorage를 활용해 해결한다.

 

아 그리고 팁이라고 하면, 함수에 인자를 넣어서 함수끼리 연결하려고 할 때, 그 인자를 객체로 만들어주면 효율적일 것 같다.

 

3.2 알게된 지식과 TIP

3.2.1 document.createElement( tagName )

- 정의 : 지정한 tagName의 HTML요소를 만들어 반환한다. 

3.2.2 element.appendChild()

- 정의 : 부모 노드에 자식노드를 추가하는 메소드이다.

3.2.3 arr.filter( callback f )

- 정의 : filter() 메소드는 주어진 함수의 테스트(조건)를 통과(true 반환)하는 모든 요소를 모아 새로운 배열로 반환(복사)합니다. 따라서 콜백함수의 조건의 반환값은 boolean 입니다.

중요한 것은 "새로운 배열"이라는 말인데, 기존 데이터를 건드는 작업이 아닌 것이다. 말 그대로 배열의 요소를 필터링하는 메소드다.

3.2.4 parseInt( string )

- 정의 : 문자열을 숫자(정수)로 변환하는 메소드이다.

3.2.5 JSON.stringify()

- 정의 : JavaScript 값이나 객체를 JSON 문자열로 반환합니다.

이 구문은, 메모리에 저장된 값을 localStorage에 저장하기 위해 사용한 메소드입니다. localStorage의 값은 문자열만 저장되므로 객체나 배열을 저장하기 위해서는 객체를 문자열로 저장해야하기 때문에 위 구문을 많이 사용합니다.

 

반대로 localStorage에 있는 JSON 값을 객체로 변환하기 위해서는 JSON.parse() 메소드를 사용합니다.

3.2.6 Event.Target 객체

- 정의 : Event 인터페이스의 target속성은 이벤트가 발생한 대상 객체를 가리킵니다. 예를들어 로그인 버튼을 클릭하는 이벤트가 발생했을 때 동적 변화를 주고 싶다면 이벤트 핸들러에 로그인 버튼으로 target객체를 지정해야합니다. 객체가 지정되지 않으면 자동으로 window객체가 타겟으로 지정되기 때문에 로그인 버튼 뿐만 아니라 브라우저 내 어디를 클릭하더라도 이벤트가 실행될 것입니다.

이번 프로젝트에서는 todolist의 목록을 삭제하는 기능을 구현할 때 사용했습니다.

이벤트 핸들러의 콜백함수에 event인자를 심어주고 event.target.parentElement를 삭제하는 기능을 구현하는데 사용했습니다.

3.2.7 arr.forEach( callback f ) 메소드

- 정의 : 배열 내의 요소를 순회하며 요소마다 callback함수를 실행합니다.