html 동적 생성 후에 템플릿을 가져오는 방법이 궁금합니다

[이재훈]

const db = firebase.firestore(); 
db.collection('product').get().then((결과)=>{ 
결과.forEach((doc)=>{ var 템플릿 = 
`<div class="product">
 <h5 class="title">${doc.data().제목}</h5> 
</div>`;
 $('.container').append(템플릿) }) 
})
 대략 이런 식으로 html을 동적으로 생성되게 한 후에, 
document.querySelectorAll(".product")나 $(“.product”)로 
템플릿들을 가져오고 싶은데 html 동적 생성이 완료되기 전에 
querySelctorAll이 실행되는지 빈 배열만 가지고 오는 문제가 발생하네요.
html 동적 생성이 완전히 끝나고 나서 querySelectorAll로 
템플릿들을 가지고 오려면 어떻게 하는 게 좋을까요??

[codingapple]

document.querySelectorAll 부분을  $('.container').append(템플릿) 바로 밑에 씁시다

[이재훈]

const db = firebase.firestore(); 
db.collection('product').get().then((결과)=>{ 
결과.forEach((doc)=>{ var 템플릿 = 
`<div class="product">
 <h5 class="title">${doc.data().제목}</h5> 
</div>`;
 $('.container').append(템플릿) })
console.log($('.product'));  --------①
})
console.log($('.product'));  --------②


$('.product')를 1번과 2번에 넣은 다음 console.log로 확인해보니, 
1번은 append가 완료된 배열이 출력되고, 2번은 빈 배열이 출력이 되는 것을 보니까,
$('.product')가 then 함수 안에 있어야 정상적으로 나오는 것 같네요.
그런데 저는 $('.product')를 변수로 설정해서 then 함수 바깥으로 끌어오고 싶은데, 
이럴 때는 어떻게 하는 게 좋을까요??

[codingapple]

바깥에 var 변수하나 만들고 
then 안에서 
변수 = $('.product') 합시다

[이재훈]

var product;
const db = firebase.firestore(); 
db.collection('product').get().then((결과)=>{ 
결과.forEach((doc)=>{ var 템플릿 = 
`<div class="product">
 <h5 class="title">${doc.data().제목}</h5> 
</div>`;
 $('.container').append(템플릿) })
product = $('.product');
})
console.log(product);
이렇게 해봤는데 console.log 부분에서 undefined가 뜹니다. 어디가 잘못된 걸까요?

[codingapple]

db.collection('product').get() 같이 늦게처리되는 코드 발견하면 
컴퓨터가 다른코드부터 실행하려고해서 
원래 console.log(product) 먼저 
db.collection('product').get() 은 다음에 실행됩니다

[이재훈]

product 변수를 활용하는 코드를 setTimeout으로 묶어서 해결했습니다! 감사합니다

[codingapple]

db.collection('product').get() 동작시간이 타이머설정시간보다 오래 걸리면 이상해질듯요

[이재훈]

setTimeout으로 묶어놓지 않으면 product 변수를 활용하는 코드가 
db.collection('product').get()보다 먼저 실행돼서 문제가 발생하는데, 
어떻게 해결하면 좋을까요?

[codingapple]

$('.container').append(템플릿) 밑에 product변수 활용하는코드 집어넣으면 됩니다
길면 함수로 만들어서 넣어도 될듯요

[글쓴이]

글