/* 노마드코더 니코샘 강의를 보고 투두리스트 만들며 일주일간 너무 헤메서 헤메던 부분 중 중요한 부분이 무엇이었는지 한 번 되짚어보며 적어보았습니다. 잘하시는 분들이 보기에는 간단한 문제이겠지만 저는 일단 적고 보니 한 번 정리가 되고 나중에 스스로에게나 혹시 다른 분들에게도 참고가 되지 않을까 해서 장황하게 나마 이렇게 기록 남깁니다. */

(1) 투두리스트의 매일 할 일 부분은 다 했으면 그냥 클릭하여 strikethrough 표시하고 또 한 번 다시 클릭하면 해야할 일로 다시 되돌리기 : 
이 부분은 여러모로 제가 이 투두 리스트 만들며 가장 어려워 한 부분입니다. ㅜㅠ
강의에 없는 부분이어서 처음에는 어떻게 해야할지 전혀 모르겠어서 검색 결과 onClick 이벤트로 하면 되는 예시를 발견하여 따라서 만들었습니다.

리스트는 기본적으로 "off" 클래스를 지정하여 할 일로 두고, 클릭하면 "on" 클래스로 대체하여 strikethrough를 표시 하였습니다.
getElementByClass는 같은 클래스는 모두 선택하기에 id를 지정하여 getElementById로 클릭된 항목을 가져와야만 했는데
그래서 매번 상수를 지정하고 매번 함수를 만들어 html에서 각 리스트에 각자 다른 함수를 지정해주면 되겠다는 생각이 났습니다.
const check1 = document.getElementById("check1");
와
function display1() {
if (check1.classList == "off") {
check1.classList = "on";
} else {
check1.classList = "off";
}
}
를 리스트 항목 갯수 만큼 다른 이름으로 만드는 방법을 말이지요. ㅠㅠ 하지만 이건 코딩이 아니라 노가다인데,
어떻게 하나의 함수 안에 클릭한 목록의 아이디를 넣어 매번 다르게 결과값을 가져오게 할 수 있을까... 검색하고 생각해봐도 방법이 보이지 않아 그냥 강의를 다시 듣다가 반짝하게 하는 니꼬쌤의 한마디 "getElementById 는 어레이를 만든다"! 네, 콘솔창에 getElementById를 출력해보니 아이디를 가져올 수 있는 방법이 떠오릅니다. 링크를 클릭했을 때 onClick 함수에 인자를 전달하는 방법, 그리고 그 받은 인자로 다시 getElementById를 하는 방법이 말이지요.
이렇게 체크가 가능한 기능을 만드는데 성공했습니다. 유후!
function display(newId) {
const checkId = document.getElementById(newId);
console.log(checkId);
if (checkId.classList == "off") {
checkId.classList = "on";
} else {
checkId.classList = "off";
}
}

(2) strikethrough 표시를 localStorage에 저장하여 표시하기 : 
이 부분에서도 3일간 헤메다 방법을 찾아 고쳤습니다. ㅠ

클릭하면 취소선 긋고 다시 클릭하면 해제하기라는 첫 목표는 달성했고 사실 여기서 멈추려고 했지만 만들고 보니 욕심이 생겼습니다. 바로 취소된 상태도 리스트 항목과 마찬가지로 로컬스토리지에 저장하기!
해결방법을 이리저리 찾다보니 이미 한 과정에 문제가 보입니다. 할일목록을 클릭하면 이제, 했다/안했다 값을 로컬스토리지에 저장하고 지우는 함수1과 앞서 만든 취소선을 안보이게/보이게 하는 함수2를 동시에 실행시켜야 할 것 같은데, onclick 이벤트는 함수 하나만 실행시키지만, eventlistener는 여러 함수에 연결시킬 수가 있다고 합니다.
---그래서 우선 취소선 표시하는 onClick으로 실행되는 함수를 eventlistener로 다시 짜봅니다.. 그런데 이벤트리스너는 인자를 전달받지 못하네요. 에고. 방황 중에 다시 강의를 들으니 니꼬쌤이 주는 간단한 해결법이 바로 들립니다. 함수에 매개변수를 넣어 매개변수.target 으로 가져올 수 있습니다. 온클릭은 html문서가 던져주는 공을 함수에서 전달받은 느낌이라면, 이벤트리스너는 함수 안에서 매개구멍을 통해 문서의 과녁으로 총을 쏘아 맞추어 탈취해오는 느낌입니다. 그렇게 target.parentNode로 아이디를 가져와서 해결했습니다.
---할일 항목 중 뒤에서 두번째 항목을 지우고 추가하면 아이디가 겹치는 문제는 강의 댓글을 통해 해결할 수 있었습니다!
---로컬스토리지에 저장하고 지우고 화면에 가져오고 로딩하기. 이부분은 여전히 헤메고 있습니다. 그냥 어레이에 항목 넣고 빼는 것도 자바스크립트는 왜 이렇게 어려운가요ㅜㅜ 처음에는 id와 text가 저장된 LS 오브젝트 어레이에 done/notDone 정보를 끼워넣으려고 push와 splice를 써보았지만 저장부터 제대로 순서에 맞게 할 수가 없었습니다. 그러다 다음에는 따로 done/notDone 정보만 담은 오브젝트를 만들어 거기서 읽고 쓰는게 어떨까하는 생각이 들어 방법을 구하다보니, 순서가 따로 필요없이니 어레이에 저장은 상대적으로 push로 수월히 해결했습니다. 삭제는 단순한 splice만으로는 어려워 다음과 같은 다른 함수 코드의 도움이 필요했습니다. 그리고 include로 어레이 안에 항목이 있는지 없는지 확인하여, 있으면 취소선 긋는 클래스 넣어주고, 없으면 반대로하는 클래스를 넣게 하는 코드까지는 써보았습니다. 그런데 저장, 로딩 중 어디가 문제인지 모르고 있는 상태였다가..
---id와 text가 저장된 LS 오브젝트 어레이에 추가로 done 정보를 추가하는데 드디어 성공!! 어레이에 항목 넣고 빼는 방법이 파이썬과 크게 다르지 않고, 또 값이 undefined된 채로 저장될 수 있다는 걸 이해한 후로는 수월히 해결되었습니다. 기초가 없으니 쉬운 부분에서도 헤메었네요.. 

감사합니다!