(기능추가 3-3) 무한스크롤 파인튜닝하기

JS

    <script>

      let photoAmount = 12;

      window.addEventListener("scroll",async ()=> {

        let sh = document.querySelector('html').scrollHeight // 총높이(실제html박스높이)

        let ch = document.querySelector('html').clientHeight // 브라우저 크기(뷰포트높이)

        let st = document.querySelector('html').scrollTop // 스크롤위치(스크롤맨위부터 스크롤막대바로위까지)

        //이미지 채워넣기.

        if(ch+st >= sh) {

          for(let i=0; i < 6; i++) {

            await fetch(`get_image.php?photoAmount=${photoAmount}`)

              .then(response => response.text())

              .then(data => {

                if(data == 'none') {

                  return;

                }

                let Newphoto = document.createElement('div');

                Newphoto.classList.add('photo');

                Newphoto.innerHTML = data

                document.getElementById('photoLayout').appendChild(Newphoto);

              })

            photoAmount++;

          }

        }

      })

    </script>

php

<?php

$conn = mysqli_connect("localhost:81", "root", "mysql", "project_memories");

$photoAmount = $_GET['photoAmount'];

$sql = "select * from image order by id desc limit {$photoAmount},1";

$result = mysqli_query($conn, $sql);

  if ($row = mysqli_fetch_array($result)) {

  $new_photo = '<a href="image_display230906.php?id=' . $row['id'] . '">

                <img class="img" src="data:image;base64,' . base64_encode($row['image']) . '" alt="Image"></a>

                ';

  echo $new_photo;

  }

  else {

    echo 'none';

  }

?>

 

배운것

1.addEventListener안에서 php를 쓸수없으므로 fetch를 써야함.
PHP와 JavaScript는 각각 서버 사이드와 클라이언트 사이드에서 동작하는 언어로, 서로 다른 라이프 사이클을 가지고 있습니다.

결과적으로 PHP는 서버에서 페이지를 처음 로딩할 때만 실행되며, 이후에 JavaScript가 동작하는 동안 PHP 코드를 다시 실행할 수 없습니다. 이 말은 스크롤이 움직일 때마다 PHP 코드를 실행할 수 없다는 것을 의미합니다.

따라서 이 문제를 해결하기 위해서는 비동기 방식을 사용해 서버에 요청을 보내고, 그 결과를 받아와서 페이지에 반영해야 합니다. 이를 위해 AJAX나 Fetch API를 사용할 수 있습니다.

2.for문 안에서 fetch를 할때 순서대로 처리되게 요청하고싶다면 : async await를 사용해야함
먼저, JavaScript에서 비동기적인 작업은 동시에 실행되어 작업의 종료 시간이 서로 다를 수 있습니다. 이는 Fetch API와 같은 네트워크 요청에서 특히 중요합니다. 요청은 네트워크 지연, 서버 처리 시간 등 여러 요인에 따라 완료 시간이 달라질 수 있기 때문입니다.

그래서 여기서 문제가 되는 것은 for 루프입니다. for 루프는 동기적으로 작동하므로, 루프의 각 반복마다 즉시 Fetch 요청을 시작합니다. 이 때문에 요청이 순서대로 시작되지만, 동시에 시작되므로 완료 순서는 보장되지 않습니다.

이제 여기서 async/await이 어떻게 도움이 되는지 살펴봅시다. async/await는 비동기 작업을 동기적으로 처리하게 합니다. await는 Promise가 완료될 때까지 실행을 중지하므로, 다음 Fetch 요청이 시작되기 전에 이전 요청이 완료되도록 보장합니다.

따라서 for 루프 내에서 await를 사용하면, 각 Fetch 요청이 순서대로 완료되게 할 수 있습니다. 이렇게 하면 각 요청의 응답이 도착하는 순서가 요청이 시작된 순서와 일치하게 됩니다.

요약하면, async/await를 사용하여 for 루프 내의 Fetch 요청을 순차적으로 처리하면, 요청이 시작된 순서대로 응답을 받을 수 있습니다. 이는 각 요청이 완전히 독립적으로 실행되는 것이 아니라, 이전 요청이 완료되기를 기다린 후에 다음 요청이 시작되기 때문입니다.

 

3.fetch요청을 하면 php에선 echo를 이용해 응답할 수 있음.

 

get_image.php 파일에서 echo $new_photo;를 사용하는 것은 클라이언트에게 데이터를 보내는 데 있어 매우 중요합니다. echo는 PHP에서 클라이언트에게 데이터를 전송하는 주요 방법 중 하나입니다.

위의 코드에서 get_image.php는 Fetch API에 의해 호출되며, 이때 echo $new_photo;로 출력된 HTML 문자열이 Fetch API의 응답 데이터로 반환됩니다.

따라서 echo $new_photo;를 통해 출력된 HTML 문자열이 JavaScript 코드에서 사용되어 웹 페이지에 새로운 이미지를 추가하는 데 사용됩니다. 이런 방식으로 PHP와 JavaScript가 협업하여 동적인 웹 페이지를 만들게 됩니다.