새벽 1시가 조금 넘은 시각 ..
거진 1주일만에 멍청이 짓을 깨닫고 몇 일을 난..개발자의 길이 정녕 아닌가? 포기하고 싶고, 우울하고 자존감이란 다 내려가고 심란했던 시간들이 허비하고 버렸다고 생각한다면, 굉장히 화가나지만 🤬
긍정적으로 생각해보면, 그래도 하나를 깨달았다는 것이다.
하지만 너무 아깝다 시간이..
남들이 보기엔 뭘 저거 가지고 유난인가 싶겠지만,
그래도 이 소름돋는 황홀한 짜릿한 감정과 문제점을 찾은 코드를 블로그에 기록 해보도록 하겠다.
일단,
개발자라면 모두 거쳐가는 그 유명한 TODOLIST 강의인 노마드코더
강의를 예전에 들었었다.
❗️받아쓰기
예전에 들으면서 음 ~ 그렇군 하고 노트에 필기하고 그러고 따라 적었었다.
그러니 지금 기억이 나지 않겠지.
그리고 자꾸 정답을 보고 이해한 척하려한다.
받아쓰는건 정말 쉽다. 거기서 끝이긴하고 나아가지 못하는 아주 최고의 단점을 가지고 있다.
❗️스스로 만들어보기
정말 강의 듣고 따라 쓰고 이해한 척 한 것이랑은 천지차이라고 생각한다.
진짜 3주? 한달은 걸린거 같다.
이번 투두리스트
를 시작 하기전에 노마드 강의를 듣고 적어놨던 코드들을 한줄 한줄 다 뜯어가면서 분석하고 해석을 적었다. 그걸 한참 보고 어떻게 작동하는 지를 계속 흐름을 찾아갔다.
그래서 만들어놓은 코드가 아마 비슷할 거다.
그러고 나서 input
의 value
값 가져오기 부터 시작했다.
아마 알게된 지식도 생겼고, 엄청난 구글링도 하였다.
투두리스트를 만든 블로그는 보지 않고, 해결해야하는 상황에 필요한 요점을 파악해 구글링 했다.
예를 들자면 정렬 ?
조건 :list
들의 정렬을 반대로 하고 싶었다.
상황 :
1.javascript 정렬을 검색했더니sort()
,reverse()
,for문 i--
들이 수두룩 나왔다.
2. 메소드를 사용해서 열심히 코드를 적었다.
이슈 발생 : 새로고침을 해야 정렬이 반대로 바뀌었다.
❓ 왜
: 로컬스토리지에 쌓여 저장되어 있는 배열을 뒤집으려고 했는데?
파악 :
1.Array
가 쌓일 때 순차적으로 저장이 되고, 새로고침을 해야 뒤집힌다.
2.input
에 입력이 하면 .. 로컬스토리지에 저장이 되기 전에 ..li
가 생성이 될 때 ?.. 는append()
인데..? 처음부터 생성이 될 때 정렬을 뒤집어 ?
3.append()
를 검색했다.
4.append()
와 관련있는 메소드를 발견했다.
해결 :prepend()
를 사용했다😂
짜릿한 소감 :
밥 먹을 때, 머리감을 때, 자기 전, 하루종일 이 문제만 머릿속에 맴돌아 생각했다.
결과는 아주 허접한 간단한 문제였다.
하루이틀은 시간을 버렸다.
메소드를 몰랐던 내 잘못 ..
그래도 난 지식이 쌓였다. 긍정적으로 생각한다.
👉🏻❗️메소드를 사용할 때 관련 메소드를 파악❗️
➕ 추가기능 ➕을 더 응용해서 만들어 따로 설명할 페이지에 업로드를 하겠다.
1. list
의 정렬 기준 ( Top 👉🏻 Bottom 순서를 뒤집어라 Bottom 👉🏻Top으로❗️ )
2. checked
가 된 list
들만 삭제 가능
3. 총 list
의 갯수
4. 전체 삭제 기능
5. 체크된 list
의 갯수
하고싶은거 : 삭제
문제점 :
1.localStorage
에서 사라지지 않는다. 그렇지만 화면에서는 삭제된다.
2. 새로고침을 하고 삭제를 하면 모든localStorage
가 삭제 된다.
const todoForm = document.querySelector(".form_group");
const todoInput = todoForm.querySelector(".todo_input");
const todoListUI = document.querySelector(".todo");
const TODOLIST_KEY = "todolist";
let spaceToDo = [];
function saveToDo() {
localStorage.setItem(TODOLIST_KEY, JSON.stringify(spaceToDo));
}
function deleteToDo(e) {
console.log(e);
const todoli = e.target.parentElement;
console.log(todoli);
const todoClear = spaceToDo.filter((todo) => {
console.log(todo, parseInt(todoli.id), todoli.id);
return todo.id !== parseInt(todoli.id);
});
spaceToDo = todoClear;
todoli.remove();
saveToDo();
}
function drawingTodo(newToDo) {
const todoList = document.createElement("li");
const todoCheckBox = document.createElement("input");
const todoText = document.createElement("span");
const deleteBtn = document.createElement("button");
console.log(newToDo);
// ❗️문제의 코드❗️ 내가 전 코드가 뭐라고 적었는지 궁금하면 아래로 내려오시길..
todoList.id = newToDo.id;
todoCheckBox.type = "checkbox";
todoCheckBox.checked = newToDo.checked;
todoText.textContent = newToDo.text;
deleteBtn.textContent = "삭제할래요 버튼";
todoListUI.prepend(todoList);
todoList.appendChild(todoCheckBox);
todoList.appendChild(todoText);
function todoChecked(event) {
const checkTarget = event.currentTarget.checked;
event.currentTarget.checked = todoCheckBox.checked;
if (checkTarget) {
console.log(checkTarget);
todoText.style.textDecoration = "line-through";
todoList.appendChild(deleteBtn);
} else {
console.log(checkTarget);
todoText.style.textDecoration = "none";
todoList.removeChild(deleteBtn);
}
}
todoCheckBox.addEventListener("click", todoChecked);
deleteBtn.addEventListener("click", deleteToDo);
}
function todoSubmitHandler(e) {
e.preventDefault();
const InputValue = todoInput.value;
todoInput.value = "";
const newToDoObj = {
id: spaceToDo.length + 1,
text: InputValue,
checked: false,
};
spaceToDo.push(newToDoObj);
saveToDo();
drawingTodo(newToDoObj);
}
todoForm.addEventListener("submit", todoSubmitHandler);
const getToDo = JSON.parse(localStorage.getItem(TODOLIST_KEY));
if (getToDo !== null) {
console.log(getToDo);
spaceToDo = getToDo;
getToDo.forEach((todo) => drawingTodo(todo));
}
문제의 스타트를 찾기 위해 어마어마한 console.log
를 찍어 봤다..
function deleteToDo(e) {
console.log(e);
const todoli = e.target.parentElement;
console.log(todoli);
const todoClear = spaceToDo.filter((todo) => {
console.log(todo, parseInt(todoli.id), todoli.id);
return todo.id !== parseInt(todoli.id);
});
spaceToDo = todoClear;
todoli.remove();
saveToDo();
}
function drawingTodo(newToDo) {
const todoList = document.createElement("li");
const todoCheckBox = document.createElement("input");
const todoText = document.createElement("span");
const deleteBtn = document.createElement("button");
spaceToDo.id = newToDo.id; // ^^..
todoCheckBox.type = "checkbox";
todoCheckBox.checked = newToDo.checked;
todoText.textContent = newToDo.text;
deleteBtn.textContent = "삭제할래요 버튼";
todoListUI.prepend(todoList);
todoList.appendChild(todoCheckBox);
todoList.appendChild(todoText);
todoCheckBox.addEventListener("click", todoChecked);
deleteBtn.addEventListener("click", deleteToDo);
}
deleteToDo()
함수 내에서 id
를 가지고 필터링을 거쳐준 todoClear
변수가 문제 인 줄 알았다.todo, parseInt(todoli.id), todoli.id
를 콘솔에 찍었는데li
의 id
를 찾아야 하는데 e.target.parentElement
는 li
일 텐데 .. 하고 drawingTodo()
함수로 내려갔다.li
? 태그를 만든 변수는 todoList
.. 그리고 id
..spaceToDo.id = newToDo.id
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ읭 ? 설마^^...todoList.id = newToDo.id
로 수정 후 너무 잘 된다. 삭.제.가. 핳하하ㅏㅎ하핳하...let
을 사용하여 담을 배열을 만들고, 대입을 해줄 때 재할당.append
appendChild
prepend
remove
removeChild
createElement
localStorage.setItem
localStorage.getItem
localStorage.removeItem
JSON.stringify()
JSON.parse()
filter
parseInt
forEach
parentNode
parentElement
`childNodes
내 머리가 모든 것을 다 담지 못하기에 ..
다시 기운내서 알게 된 것들과 공부한 내용들 얼른 블로그 업데이트 열심히 해야되겠다.