[FE - ConnecTo] DAY56 TIL๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป

JUNYยท2022๋…„ 9์›” 29์ผ
0

๐Ÿ“šZeroBase ConnecTo Front-End

๋ชฉ๋ก ๋ณด๊ธฐ
44/53
post-thumbnail

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()
      
      // newsList๊ฐ€ ํ˜ธ์ถœ๋  ๋•Œ๋งˆ๋‹ค (๋‹ค๋ฅธ ์นดํ…Œ๊ณ ๋ฆฌ ํด๋ฆญ์‹œ) ์œ„ ํ•จ์ˆ˜๋กœ๋ถ€ํ„ฐ ์ƒˆ๋กœ ๋งŒ๋“ค์–ด์ง„
      // scroll-observer์— observer๊ฐ€ observeํ•˜๋„๋ก ํ•ด์ฃผ์—ˆ๋‹ค.
      // (intersecting๋˜์—ˆ์„ ๋•Œ ํ•ด๋‹น ์นดํ…Œ๊ณ ๋ฆฌ์— ๋Œ€ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜จ๋‹ค.)
      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 += ~~ ์„ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ์—ˆ๊ฒ ์ง€๋งŒ, ์ด ๊ฒฝ์šฐ, ์ „์ฒด ๊ฐ’์„ ๋‹ค์‹œ ๋ Œ๋”๋ง์„ ์ง„ํ–‰ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ถˆํ•„์š”ํ•œ ๋ Œ๋”๋ง์ด ๋ฐœ์ƒํ•˜๊ธฐ์— ์‚ฌ์šฉํ•˜์ง€ ์•Š์•˜๋‹ค.
profile
์„ฑ์žฅํ•˜๋Š” ๊ฐœ๋ฐœ์ž๐ŸŒผ

0๊ฐœ์˜ ๋Œ“๊ธ€