새벽 1시가 조금 넘은 시각 ..
거진 1주일만에 멍청이 짓을 깨닫고 몇 일을 난..개발자의 길이 정녕 아닌가? 포기하고 싶고, 우울하고 자존감이란 다 내려가고 심란했던 시간들이 허비하고 버렸다고 생각한다면, 굉장히 화가나지만 🤬
긍정적으로 생각해보면, 그래도 하나를 깨달았다는 것이다.
하지만 너무 아깝다 시간이..
남들이 보기엔 뭘 저거 가지고 유난인가 싶겠지만,
그래도 이 소름돋는 황홀한 짜릿한 감정과 문제점을 찾은 코드를 블로그에 기록 해보도록 하겠다.
TODOLIST 받아쓰기 vs 스스로
일단,
개발자라면 모두 거쳐가는 그 유명한 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의 갯수
TODOLIST 전체 코드를 보자.
하고싶은거 : 삭제
문제점 :
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을 사용하여 담을 배열을 만들고, 대입을 해줄 때 재할당.- 시스템환경을 만들어 줄 함수, 화면에 보여줄 페인팅역할인 함수를 만들어주고 매개변수로 값을 전달한다.
- 메소드
appendappendChildprependremoveremoveChildcreateElementlocalStorage.setItemlocalStorage.getItemlocalStorage.removeItemJSON.stringify()JSON.parse()filterparseIntforEachparentNodeparentElement`childNodes - 객체에서 인자를 받아와 여러 종류의 for문 돌리는 법.
( forEach를 썻지만, for문으로 Objcet의 key, value의 값을 가져올 수 있는 방법 ) - 함수는 어찌되었든 다 연결 되어 작동을 한다. ( 스코프체인 )
내 머리가 모든 것을 다 담지 못하기에 ..
다시 기운내서 알게 된 것들과 공부한 내용들 얼른 블로그 업데이트 열심히 해야되겠다.
