코딩애플 과제를 하던 중 갑자기 콘솔창에서 오류가 났다.

<script>
var myproducts = JSON.parse(localStorage.getItem("cart")); 
//cart에 담긴 물품 이름 담긴 array 배열(중복 있음)
var realmyproducts = [...new Set(myproducts)]; 
//카트에 담긴 물품 이름 중복 제거 버전 array 배열

//오류 뜬 코드
for (let i = 0; i < realmyproducts.length; i++) {
		var cartTemp = `<p>${realmyproducts[i][0]}</p>`;
        document.querySelector(".myCart").appendChild(cartTemp);//->오류난 부분
      }
</script>

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
해석하면 대충 parameter 1, 즉 cartTemp가 Node가 아니라는 건데...

<script>
//해결한 코드      
for (let i = 0; i < realmyproducts.length; i++) {
        var cartTemp = document.createElement("p");
        cartTemp.innerHTML = newmyproducts[i][0];
        document.querySelector(".myCart").appendChild(cartTemp);
      }
</script>

appendChild는 node만 받는다고 문자열을 쓰지 말라고 한다.

내가 썼던 var cartTemp = `<p>${realmyproducts[i][0]}</p>`;이 템플릿 리터럴로 문자열을 생성할 때 쓰는 것이기 때문에 이런 오류가 났던 것이었다.

그래서 위와 같이 수정했더니 해결되었다.

해결 코드 출처: https://www.sarah-note.com/Error/error1/

근데....

Node는 뭘까?

• 브라우저가 자바스크립트로 HTML parse(읽는다)할 때 HTML DOM을 생성하는데 DOM을 생성하면서 정보를 저장하는 계층적 단위

• 모든 DOM은 Node를 상속받는다.

Node의 특징

• 모든 엘리먼트는 부모, 자식, 형제자매 관계이다.

• 대표적인 Node의 예시:
  document, element(html 태그들), attribute, text(태그 내에 적은 글자들), comment(주석들)
  종류는 굉장히 많다

사진 출처: 생활코딩 https://opentutorials.org/module/904/6698