PHP 마법 학교 22기 2강: 보물 상자 통째로 나르기! ‘JSON Ajax 마법: 화면 새로고침 없이 대량의 데이터 정렬하기’

안녕하세요! 가족과 함께하는 스마트 라이프입니다. 어제 자바스크립트의 fetch API를 사용해 전체 페이지의 하얗게 깜빡이는 새로고침 없이 특정 글자만 쏙 바꾸는 ‘Ajax 비동기 통신’의 기초를 배웠죠? 오늘은 단순한 글자 한 줄이 아니라, 여러 개의 복잡한 데이터가 담긴 보물 상자를 통째로 실시간 전송하는 ‘JSON Ajax 데이터 정렬 마법’을 배워보겠습니다!

PHP 마법 학교 22기 2강: 보물 상자 통째로 나르기! 'JSON Ajax 마법: 화면 새로고침 없이 대량의 데이터 정렬하기'

1. 데이터 보물 상자 JSON: “인터넷 세상의 공용 마법 상자”

백엔드 PHP 서버에서 프론트엔드 자바스크립트 화면으로 수많은 점수나 이름들을 보내야 할 때, 그냥 글자들을 이어 붙여서 보내면 브라우저가 읽기 힘들어요. 이때 사용하는 세계 공통의 데이터 포맷이 바로 JSON(JavaScript Object Notation)이랍니다. PHP의 json_encode 주문을 외우면 우리 데이터베이스의 표 모양 데이터를 자바스크립트가 즉시 해체해서 조립할 수 있는 ‘예쁜 텍스트 상자’로 완벽하게 변신시켜 준답니다.

2. 새로고침 없이 데이터 정렬하기 (코드)

정렬 기준(높은 점수순, 최신순)을 클릭하면, 자바스크립트가 PHP 백엔드 금고에 다녀와 JSON 배열 데이터를 받아온 뒤 화면의 표를 실시간으로 다시 그리는 코드를 완성해 봅시다. 사용자님이 딸을 위해 구현 중이신 ‘EduPad’ 학습 대시보드에 연동해 두면, 아이가 ‘점수 높은 순’이나 ‘날짜 순’ 버튼을 누를 때 화면이 끊기지 않고 랭킹 보드가 부드럽게 슉슉 바뀌는 최고급 UI를 완성할 수 있습니다.

<?php
// json_backend.php: JSON 보물 상자를 넘겨주는 PHP 백엔드 마법
session_start();

// 가상의 데이터베이스(MySQL)에서 가져온 주간 수학 퀴즈 데이터 묶음
$score_data = [
    ["name" => "민지 마법사", "score" => 95, "date" => "05-20"],
    ["name" => "준우 요정", "score" => 100, "date" => "05-22"],
    ["name" => "하니 기사", "score" => 88, "date" => "05-19"]
];

// 비동기 통신 채널이 열리고 '정렬 기준(sort)' 요청이 들어왔을 때!
if (isset($_GET['sort'])) {
    $sort_type = $_GET['sort'];
    
    if ($sort_type === 'high') {
        // 점수가 높은 순으로 정렬하는 마법
        usort($score_data, function($a, $b) { return $b['score'] - $a['score']; });
    } else if ($sort_type === 'latest') {
        // 최신 날짜 순으로 정렬하는 마법
        usort($score_data, function($a, $b) { return strcmp($b['date'], $a['date']); });
    }
    
    // 1. 브라우저에게 "지금 보내는 건 일반 글자가 아니라 JSON 상자야!"라고 알려줘요
    header('Content-Type: application/json; charset=utf-8');
    
    // 2. PHP 배열을 JSON 텍스트 구조로 변신시켜 전송하고 즉시 종료해요
    echo json_encode($score_data);
    exit;
}
?>

<!DOCTYPE html>
<html>
<head>
  <style>
    .dashboard-card { max-width: 550px; margin: 40px auto; padding: 25px; background: white; border-radius: 22px; box-shadow: 0 12px 30px rgba(108, 92, 231, 0.08); border: 1px solid #e2e8f0; }
    .filter-menu { display: flex; gap: 10px; margin-bottom: 20px; justify-content: center; }
    .btn-filter { padding: 8px 16px; background: #eeebff; color: #6c5ce7; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; }
    .btn-filter:hover { background: #6c5ce7; color: white; }
    table { width: 100%; border-collapse: collapse; text-align: center; }
    th, td { padding: 12px; border-bottom: 1px solid #f1f2f6; }
    th { background: #6c5ce7; color: white; font-size: 14px; }
  </style>
</head>
<body style="background: #f8f9fa; font-family: 'Nanum Gothic', sans-serif;">

  <div class="dashboard-card">
    <h2 style="text-align: center; color: #6c5ce7; margin-top: 0;">📊 실시간 주간 퀴즈 대시보드</h2>
    
    <!-- 새로고침 없이 랭킹 배열을 바꿀 정렬 버튼 마법 -->
    <div class="filter-menu">
      <button type="button" class="btn-filter" onclick="loadSortedData('high')">🏆 점수 높은 순</button>
      <button type="button" class="btn-filter" onclick="loadSortedData('latest')">📅 최신 등록 순</button>
    </div>
    
    <table>
      <thead>
        <tr>
          <th style="border-radius: 8px 0 0 0;">마법사 이름</th>
          <th>수학 마법 점수</th>
          <th style="border-radius: 0 8px 0 0;">기록 날짜</th>
        </tr>
      </thead>
      <tbody id="data-rows">
        <tr><td colspan="3" style="color:#999;">버튼을 눌러 실시간 정렬 마법을 발동하세요!</td></tr>
      </tbody>
    </table>
  </div>

  <script>
  function loadSortedData(criteria) {
      const tbody = document.getElementById('data-rows');
      tbody.innerHTML = "<tr><td colspan='3'>🪄 금고 분석 중...</td></tr>";
      
      // fetch 통신으로 PHP에 어떤 정렬 기준으로 JSON을 보낼지 요청해요
      fetch('json_backend.php?sort=' + criteria)
          .then(response => response.json()) // 받아온 글자를 진짜 자바스크립트 객체 상자로 변환!
          .then(jsonData => {
              let htmlRows = "";
              
              // 자바스크립트 반복문 마법으로 표 데이터를 새롭게 빌드해요
              jsonData.forEach(item => {
                  htmlRows += `<tr>
                      <td>${item.name}</td>
                      <td style="font-weight:bold; color:#6c5ce7;">${item.score}점</td>
                      <td style="color:#999; font-size:13px;">${item.date}</td>
                  </tr>`;
              });
              
              // 표 영역만 마법처럼 교체!
              tbody.innerHTML = htmlRows;
          })
          .catch(error => {
              tbody.innerHTML = "<tr><td colspan='3' style='color:red;'>❌ 데이터 연동 실패</td></tr>";
          });
  }
  </script>

</body>
</html>

3. 왜 JSON 비동기 정렬 아키텍처가 최고급 기술일까요?

데이터의 크기를 대폭 줄여 서버의 대역폭을 획기적으로 보호해 주기 때문이에요!
1. SaaS 플랫폼의 핵심 뼈대: 사용자님이 구상 중이신 multi-tenant ‘SaaS 기부 플랫폼’이나 ‘시골 라이프’ 숙박 예약 대시보드처럼 대량의 매출 통계나 정산 내역이 얽혀있는 서비스에서, 사용자가 정렬 버튼을 누를 때마다 수십 메가바이트의 전체 HTML을 새로 그리면 시스템이 금방 멈춰버려요. 하지만 이렇게 데이터만 JSON 이라는 가벼운 캡슐로 실시간 무선 운송하면 트래픽 비용이 거의 들지 않는 무결점 아키텍처를 완성할 수 있습니다.
2. 로컬 인프라 자원의 효율 극대화: 사용자님의 고성능 ASUS Ascent GX10 로컬 워크스테이션 인프라에서 수많은 비동기 데이터 요청이 밀려와도, 복잡한 디자인 템플릿 연산은 브라우저(프론트엔드)에게 맡기고 우리 우분투 서버의 PHP 백엔드는 오직 핵심 데이터(JSON) 가공에만 집중하게 하므로 훨씬 많은 트래픽을 거뜬히 버텨낼 수 있게 된답니다.

PHP 마법 학교 22기 2강: 보물 상자 통째로 나르기! 'JSON Ajax 마법: 화면 새로고침 없이 대량의 데이터 정렬하기'

4. 아이들과 함께하는 ‘바둑돌 속성 분류’ 놀이

바구니에 이름과 숫자가 적힌 종이 딱지나 카드들을 무작위로 섞어두세요. 아빠가 아이에게 “보물 카드 주머니(배열)에서 ‘숫자가 높은 순서’로 3장만 골라 테이블(화면)에 차례대로 놓아줘!”라고 미션을 주는 거죠. 아이가 제자리에서 카드를 순서대로 다시 배치해 정렬하는 놀이를 해보는 겁니다. “우리가 일어서서 방을 옮기지 않고(새로고침 없이) 테이블 위 카드들의 자리만 바꾼 행동이 코딩의 json_encode와 자바스크립트 forEach 마법의 조화란다!”라고 설명해 주세요. 데이터 파싱(Parsing)과 다이내믹 렌더링의 가치를 아주 흥미진진하게 깨닫게 됩니다.

마치며: 프론트와 백엔드의 완벽한 싱크로율

오늘 우리는 텍스트 파일이나 데이터베이스에 갇혀있던 대량의 구조화된 데이터들을 JSON 이라는 세련된 전송 포맷에 담아 화면 전환 없이 번개처럼 정렬하는 고난도 웹 아키텍처의 비기를 연마했습니다. 이제 프론트엔드와 백엔드가 완벽하게 소통하는 통로가 완전히 뚫린 셈이네요! 다음 시간에는 이 통로를 확장하여, 화면 깜빡임 없이 데이터베이스 금고에 글을 실시간으로 쓰고 바로 목록에 추가하는 ‘실전 Ajax 덧글 마법: 새로고침 없는 실시간 방명록 완성하기’를 함께 정복해 보겠습니다. 내일 아침에 만나요! ✨

관련 게시물