PHP에서 비동기 처리 구현하기 (JS)

비동기처리? 동기처리?

이미 저보다 훌륭하신 분들이 설명해 주실 거라 믿어 따로 설명하진 않겠다.

주니어 웹 개발자가 알아야 할 ‘비동기 통신’ | 요즘IT

 

PHP와 JS로 비동기 처리 구현하기

index.html

document.addEventListener("DOMContentLoaded", function () {
    fetch("get_lunch.php")
        .then(response => response.text())
        .then(data => {
            document.getElementById("lunch-info").innerHTML = data;
        });
});

이벤트리스너로 DOMContentLoaded를 통해 돔트리가 다 발생된다면 실행되는 코드이다. load 이벤트와 차이점은 load 이벤트는 HTML의 요소들이 다 로드가 된 후 실행되는 반면, DOMContentLoaded 이벤트는 돔트리만 발생되면 실행된다.

 

load 이벤트를 사용할때 HTML의 로드가 오래 걸린다면 그만큼 실행이 늦게 되기 때문에 웬만해서는 DOMContentLoaded를 사용하는 것을 추천한다.

 

get_lunch.php

<?php
include "db.php";

$ATPT_OFCDC_SC_CODE = 'K10';
$SD_SCHUL_CODE = '7801093';
$API_KEY = 'shinee_key';

function lunchExport($date)
{
    global $ATPT_OFCDC_SC_CODE;
    global $SD_SCHUL_CODE;
    global $API_KEY;

    $apiUrl = "https://open.neis.go.kr/hub/mealServiceDietInfo?ATPT_OFCDC_SC_CODE={$ATPT_OFCDC_SC_CODE}&SD_SCHUL_CODE={$SD_SCHUL_CODE}&MLSV_YMD={$date}&KEY={$API_KEY}";
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $apiUrl);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    $response = curl_exec($ch);
    curl_close($ch);
    $xml = new SimpleXMLElement($response);
    $rows = $xml->xpath("//row");

    if (count($rows) === 0) {
        $mealName = "등록된 급식 정보가 없습니다.";
    } else {
        $mealNames = [];
        foreach ($rows as $row) {
            $mealName = (string)$row->DDISH_NM;
            $mealName = preg_replace('/[^\p{Hangul}<>br]+/u', '', $mealName);
            $mealNames[] = $mealName;
        }

        $mealName = "<div class='row'><div class='col-5'><b>중식</b><br>" . implode("</div><div class='col-5'><b>석식</b><br>", $mealNames) . "</div></div>";
    }

    return $mealName;
}

echo lunchExport(date('Ymd'));
?>

fetch로 PHP API를 불러오는데, echo 형식으로 PHP에서 데이터값을 보내게 된다. 그 후, JS의 fetch에서 get_lunch.php의 데이터를 text 형식으로 받아 출력하게 된다.

---

이렇게 되면 DOMContentLoaded로 돔트리가 로드 된 후, PHP API를 통해 데이터를 받아오게 되어 비동기 방식으로 처리하게 된다.