질문드립니다

Question

1. 먼저 강의를 보고 따라 작성한 코드이지만 중간부터 브라우저에 상품이 나타나지 않아서 어느 부분을 고쳐야 하는지 알고 싶습니다. 2. querySelector은 productsHtml을 받게되면 이 안에 저장된 값들을 하나하나 보여주는 도구?인걸까요? 3. products에서 상품에 대한 정보를 하나하나 받아와 반복문으로 넣었을 때  productsHtml은 배열의 형태로 각 정보를 저장하는건가요?

들샘님 · Answer

1. 첨부된 사진의 코드의 5번째 줄에, produtcs 라고 오타가 났습니다! products라고 고쳐주시면 될 것 같아요! 2. querySelector는, css를 조작할 대상을 선택해주는 도구입니다! #products-list를 가진 태그를 선택해준거고, .innerHTML 속성으로 #products-list 를 가진 태그의 내용을 productsHtml 로 바꾸어 준 것입니다. 3. 배열의 형태로 각 정보가 저장되는것이 아니라, #product-card들이 여러개 모인 HTML 태그의 모임이 되는것입니다! 아직 배워가는 단계라 답변이 완벽하지 않을 수 있습니다.. 이해 안가시면 다시 물어봐주세요 :)

그랩 · Answer

들샘님이 소개를 잘 해주셨네요. 감사합니다. 2번 querySelector는 id, class 등 선택자를 이용해서 HTML 요소(태그)를 선택하도록 돕는 역할을 합니다. 그리고 선택된 태그를 가공하는 작업을 뒤에서 할 수 있게 됩니다.  [참고] https://www.codingfactory.net/10410 3번 같은 경우 어떤 데이터를 담고있는지 확인하려면, for 루프 {} 맨 아래에 console.log(productsHtml)을 넣어보면 어떤 데이터들이 쌓이는지 확인할 수 있습니다. 반복문을 돌아가면 string 형태의 데이터가 계속해서 더해지는 구조임을 확인하실 수 있을 거예요

Terry · Answer

들샘님과 그랩님 모두 친절한 답변 감사드립니다. 눈이 빠지게 찾아봤는데도 못 찾았던 오타인데 역시 다른 사람이 보면 나오는군요...^__ㅠ 2번과 3번 같은 경우 또한 첨부해주신 링크 통해서 제가 더 공부해보겠습니다. :)