🔄 AJAX가 필요한 이유

🔄 AJAX가 필요한 이유

AJAX(Asynchronous JavaScript And XML)는
페이지 전체를 새로고침하지 않고도
백엔드와 데이터를 주고받을 수 있는 기술입니다.

✅ 좋아요 버튼
✅ 필터링 검색
✅ 댓글 비동기 제출
✅ 무한 스크롤
✅ 사용자 입력 → 실시간 응답

👉 이런 UI/UX 개선은 AJAX가 없으면 불가능합니다.

 

---

⚙️ 워드프레스 AJAX 처리 흐름 구조

txt

복사편집

[사용자 액션] ↓ JavaScript (jQuery.ajax or fetch) ↓ admin-ajax.php (워드프레스 AJAX 핸들러) ↓ PHP 함수 (wp_ajax_{action}) ↓ 응답 → JS에서 처리

• WordPress는 admin-ajax.php라는 전용 엔드포인트를 통해 AJAX 요청을 수신
• wp_ajax_ / wp_ajax_nopriv_ 후킹으로 로그인 여부 구분

---

✅ 실전 예제: 버튼 클릭 시 카운트 증가

① 자바스크립트 (jQuery 예시)

js

복사편집

jQuery(document).ready(function($){ $('#like-btn').on('click', function(){ $.ajax({ url: my_ajax_object.ajax_url, type: 'POST', data: { action: 'increase_like', post_id: $(this).data('id'), nonce: my_ajax_object.nonce }, success: function(response){ $('#like-count').text(response.count); } }); }); });

my_ajax_object는 PHP에서 wp_localize_script로 전달한 전역 변수입니다.

---

② PHP (functions.php 또는 전용 파일)

php

복사편집

add_action('wp_enqueue_scripts', 'enqueue_ajax_script'); function enqueue_ajax_script() { wp_enqueue_script('custom-js', get_template_directory_uri() . '/assets/custom.js', array('jquery'), null, true); wp_localize_script('custom-js', 'my_ajax_object', array( 'ajax_url' => admin_url('admin-ajax.php'), 'nonce' => wp_create_nonce('like_nonce') )); }

---

③ AJAX 처리 핸들러

php

복사편집

add_action('wp_ajax_increase_like', 'handle_like_ajax'); add_action('wp_ajax_nopriv_increase_like', 'handle_like_ajax'); function handle_like_ajax() { // 보안 검사 check_ajax_referer('like_nonce', 'nonce'); $post_id = intval($_POST['post_id']); $likes = (int) get_post_meta($post_id, 'likes', true); $likes++; update_post_meta($post_id, 'likes', $likes); wp_send_json_success(['count' => $likes]); }

---

🔐 AJAX 요청 보안을 위한 Nonce

Nonce (Number used once) 는
CSRF(사이트 간 요청 위조) 방지를 위한 워드프레스 전용 토큰입니다.

• wp_create_nonce('action_name')
• check_ajax_referer('action_name', 'nonce')

📌 Nonce는 무조건 필수입니다!
없으면 누구나 요청 가능 → 데이터 위변조 가능성 있음.

---

🧠 wp_ajax vs wp_ajax_nopriv 차이

액션설명

wp_ajax_{action}	로그인된 사용자 요청 처리
wp_ajax_nopriv_{action}	비로그인 사용자 요청 처리

대부분의 프론트엔드 요청은 nopriv까지 함께 등록해야 합니다.

---

💡 팁: fetch API로 작성하면 더 깔끔해요 (jQuery 없이)

js

복사편집

document.querySelector('#like-btn').addEventListener('click', function() { fetch(my_ajax_object.ajax_url, { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, body: new URLSearchParams({ action: 'increase_like', nonce: my_ajax_object.nonce, post_id: this.dataset.id }) }) .then(res => res.json()) .then(data => { document.querySelector('#like-count').innerText = data.data.count; }); });

---

✅ AJAX 처리 점검 체크리스트

항목완료 여부

JavaScript에서 AJAX 요청 구현	✅ / ❌
admin-ajax.php로 전송 경로 설정	✅ / ❌
wp_ajax / wp_ajax_nopriv 등록 완료	✅ / ❌
check_ajax_referer로 보안 검증	✅ / ❌
성공 시 wp_send_json_success()로 응답	✅ / ❌