[노마드코더 JS] 7.8 강의 중

문제점 :

똑같이 id를 부여했는데, 왜 한 곳만 String이 됐을까?

 

이유 :

 

댓글을 통해서 배울 수 있었다.

우리가 사용한 코드 내에서, 

toDo 와 li 는 똑같이 Date.now()를 통해 id를 부여받는다. 

그래서 둘의 id가 같다는 조건을 이용해 비교연산식을 작동시킬 수 있을 거라 생각했는데

toDos = toDos.filter((toDo) => toDo.id !== li.id);

//이렇게하면 될 줄 알았음

 

수식이 작동하지 않았다!

 

왜냐하면, li의 id가 문자열이 되어 있었기 때문이다.

이는 mdn문서를 통해 확인이 가능했다.

https://developer.mozilla.org/ko/docs/Web/API/Document/getElementById

Document.getElementById() - Web API | MDN

즉, li는 직접 DOM을 건들이게 된 거라 mdn에서는 이를 형변환시켜 문자열로 받아들였던 것이다! 지혼자! 그냥! 지가 알아서! 나는 몰랐는디!

 

그래서 위의 수식이 작동할 수 없었던거고, 이를 해결하기 위해 li.id 를 int로 변환시켜 주는 과정이 필요했다.

toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));

이렇게!

 

요렇게 하니 이제 작동 잘함.

 

어쨌든 오늘의 배운점

 

DOM에 들어간 것의 id는 문자열로 변경된다!

 

분명 맞게 작성했는데, 안 돌아갈 때는 consol.log 를 통해 그것의 타입도 확인을 해보자. 

 

//기억해두면 좋을 것 같아 정리해놓음