22.09.29 ์์
์๊ฐ ์ค ๊ณต๋ถํ ๋ด์ฉ๋ค์ ์ ๋ฆฌํ์์ต๋๋ค ๐
ํผ๋๋ฐฑ์ ์ธ์ ๋ ํ์์
๋๋ค! ๐
-
์ฒ์์๋ categories๋ฅผ ๊ฐ์ฒด๋ก ๋ง๋ค์ด Object.keys(categories)
๋ก ๋ฐฐ์ด๋ก ๋ง๋ค์ด nav ์์๋ค์ ๋ ๋๋ง ํด์ฃผ์๋ค.
- ์ดํ์๋ categories ๋ฐฐ์ด ๋ด์ ๊ฐ ์นดํ
๊ณ ๋ฆฌ๋ค์ ๊ฐ์ฒด๋ก ๋ฃ์ด์ฃผ์ด ๋ถํ์ํ ๋ฉ์๋(
Object.keys(categories)
) ์ฌ์ฉ์ ์ค์ผ ์ ์์๋ค.
-
์ฒซ ๋ฐ์ดํฐ 5๊ฐ๋ฅผ ๊ฐ์ ธ์ค๋ ๋์ spinner๊ฐ intersecting๋์ด 10๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ๋ฌธ์ ๊ฐ ์กด์ฌํ๋ค.
- newsList๊ฐ ํธ์ถ๋๋ฉด ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ํจ์๋ฅผ ํธ์ถํ๋๋ก ํ๋๋ฐ, ์ด ํจ์๊ฐ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ๋์ spinner๊ฐ intersecting๋์ด ๋ฐ์ดํฐ๋ฅผ ํ ๋ฒ ๋ ๊ฐ์ ธ์์ ์ด 10๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์๋ค.
- ์ผ๋จ์ newsList๊ฐ ํธ์ถ๋๋ฉด ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ํจ์๋ฅผ ์ ๊ฑฐํ์ฌ ์์๋ก ํด๊ฒฐํ์๋ค.
-
๊ธฐ์กด section ์์ ๊ณ , ์๋ก ๋ ๋๋ง ์ด๋ป๊ฒ?
- ์ด๊ธฐ ๋ ๋๋ง์ด ๋๊ณ ๋ ํ์, ๋ค๋ฅธ section์ผ๋ก ๋์ด๊ฐ๋ฉด, ํ๋์ scroll-observer(spinner)์ ์ฌ๋ฌ๊ฐ์ ์ต์ ๋ฒ๊ฐ observeํ๊ณ ์์ด, ํ๋ฒ intersecting์ด ๋๋ฉด ์ฌ๋ฌ๊ฐ์ ์ต์ ๋ฒ๋งํผ fetchMore ํจ์๊ฐ ์คํ์ด ๋์ด ๊ทธ๋งํผ ๋ง์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์๋ค.
- ์ดํ์ ์ต์ ๋ฒ๋ฅผ ํ๋ฒ๋ง ํธ์ถํ๋ฉด ์ด๋ฅผ ํด๊ฒฐํ ์ ์์๊ฑฐ๋ผ ์๊ฐํ๋ค. ๊ทธ๋ฌ๋ ์ฒ์ ์ต์ ๋ฒ๋ ์ฒซ ๋ฐ์ดํฐ์ธ ์นดํ
๊ณ ๋ฆฌ โallโ ์ ๋ด์ fetchMore ํจ์๋ฅผ ํธ์ถํ๊ธฐ ๋๋ฌธ์ ๋ค๋ฅธ ์นดํ
๊ณ ๋ฆฌ๋ฅผ ์ ํํ๋๋ผ๋ ์นดํ
๊ณ ๋ฆฌ๊ฐ โallโ์ธ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ ๋ ๋๋งํ๊ฒ ๋๋ค.
- ๊ฒฐ๊ตญ์๋ scroll-observer๋ฅผ newsList๊ฐ ํธ์ถ๋ ๋๋ง๋ค ๊ธฐ์กด์ scroll-observer๋ฅผ ์ญ์ ํ๊ณ ์๋ก ์์ฑํ์ฌ ํด๋น ์นดํ
๊ณ ๋ฆฌ์ observer๊ฐ observeํ๋๋ก ๋ง๋ค์ด์ฃผ์๋ค.
const init = () => {
const $observer = `
<div class="scroll-observer">
<img src="img/ball-triangle.svg" alt="Loading..." />
</div>
`;
document.querySelector('.news-list-container').insertAdjacentHTML('beforeend', $observer);
};
init()
const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
page += 1;
console.log('observer:' + category);
fetchMore('skill');
}
});
observer.observe($spinner);
-
innerHTML ์ด ์๋๋ผ insertAdjacentHTML์ ์ฌ์ฉํ ์ด์ ?
- spinner๋ฅผ ๋ง๋ฌ์ ๋, ์ด๊ธฐ ๊ฐ์ ์ ์งํด์ผํ๋๋ฐ, innerHTML ์ฌ์ฉ ์, ์ด๊ธฐ ๊ฐ์ ์ด๊ธฐํํ๊ณ , ์๋ก ๋ ๋๋ง์ ํ๊ธฐ ๋๋ฌธ์, insertAdjacentHTML์ ์ฌ์ฉํ์๋ค.
- innerHTML += ~~ ์ ์ฌ์ฉํ ์๋ ์์๊ฒ ์ง๋ง, ์ด ๊ฒฝ์ฐ, ์ ์ฒด ๊ฐ์ ๋ค์ ๋ ๋๋ง์ ์งํํ๊ธฐ ๋๋ฌธ์ ๋ถํ์ํ ๋ ๋๋ง์ด ๋ฐ์ํ๊ธฐ์ ์ฌ์ฉํ์ง ์์๋ค.