이런식으로 쓰는거 맞냐? 아무것도 모르고 마구잡이로 만들었던 때에 비해서는 깔끔해지긴 함. 근데 내 프로젝트 규모가 너무 작다보니까 객체 지향 프로그래밍의 이점을 아직 제대로 못 느끼겠음.


$('document').ready(function () {
load_and_render()

$("#search_keyword").keyup(function (event) {
if (event.which === 13) {
$("#filter_button").click();
}
});
})

$('#filter_button').click(function () {
load_and_render()
})

$('#update_button').click(function () {

})


async function load_and_render() {
console.time('aaa')
const loaddata = new LoadData()
const receive_input = await loaddata.get_input()
const data = await loaddata.load_entire_video_list(receive_input)

const renderdata = new RenderData(data)
renderdata.ready_for_render()
renderdata.render_details()
console.timeEnd('aaa')
}

class LoadData {

async get_input() {
const receive_input = {
search_keyword: $('#search_keyword').val(),
option1: $('input[name="options1"]:checked').val(),
filter_order: $('#filter_order').val(),
option2: $('input[name="options2"]:checked').val()
}
receive_input.search_keyword = (receive_input.search_keyword == "") ? "title:" : receive_input.search_keyword
return (receive_input)
}

async load_entire_video_list(receive_input) {
const url = `/get_filter_and_folders_request/${receive_input.search_keyword}/${receive_input.option1}/${receive_input.filter_order}/${receive_input.option2}/`
console.log(url)
const res = await fetch(url)
return res.json()
}
}

class RenderData {
constructor(data) {
this.data = data
}

ready_for_render() {
console.log(this.data)
$('.messagebox').empty()
$('.messagebox').text(this.data.length + '개의 결과물')
$('.rightbox').empty()
for (let i = 0; i < this.data.length; i++) {
$('.rightbox').append(`<div class="video_box" data-index = ${i}></div>`)
}
$('html, body').scrollTop(0);
}

render_details() {
let options = {
// root: document.querySelector("#scrollArea"),
// rootMargin: "0px",
threshold: 0.2,
};
const observer = new IntersectionObserver(this.callback.bind(this), options);
//bind(this)
const boxes = document.querySelectorAll('.video_box');
boxes.forEach(box => observer.observe(box));
}

async callback(entries, observer) {
const entry_promise_arr = entries.map(entry=>this.fetch_promise(entry))
await Promise.all([entry_promise_arr])//await 넣든 안넣든 딱히 의미 없는 듯
}

async fetch_promise(entry) {
if (entry.isIntersecting) {
const video_id = this.data[$(entry.target).data('index')].video_id
const url = `https://www.googleapis.com/youtube/v3/videos?key=&id=${video_id}&part=statistics,snippet`
const res = await fetch(url)
const data = await res.json()

const info = data['items'][0]['snippet']
const statistics = data['items'][0]['statistics']
const video_url = `https://www.youtube.com/watch?v=${data['items']['id']}`
console.log(info.title)

const tag =
`<div class="info round">
<img class="round" src="${info.thumbnails.medium.url}" alt="thumbnail">
<div>
<div class = "title">
<a href = "${video_url}" target="_blank">${info.title}</a>
</div>
<div class = "video_info">
<div>
${info.channelTitle}
</div>
<div>
${info.publishedAt.slice(0, 10)}
</div>
<div>
view : ${statistics.viewCount}
</div>
<div>
like : ${statistics.likeCount}
</div>
<div>
comment : ${statistics.commentCount}
</div>
</div>
<div class="description">${info.description}</div>
</div>
</div>`
$(entry.target).append(tag)
} else {
$(entry.target).empty()
}
}

}