PHP - AJAX RSS Feed Example

안녕하세요, 초보 프로그래머 여러분! 오늘 우리는 PHP, AJAX, 그리고 RSS 피드의 세계로 흥미로운 여정을 떠납니다. 이 용어들이 지금은 알파벳 스튜프似하게 들리시나, 이 튜토리얼이 끝나면 이들을 마치 프로처럼 덤블링할 수 있을 것입니다! 시작해 보겠습니다!

Really Simple Syndication (RSS)

코딩을 시작하기 전에 RSS에 대해 이해해 보겠습니다.

RSS는 'Really Simple Syndication'의 약자입니다. 인터넷의 뉴스 배달 서비스 같은东西입니다. 당신이 좋아하는 뉴스 웹사이트가 있지만, 매일 방문하여 새로운 기사를 확인하고 싶지 않다면, RSS가 유용합니다!

RSS 피드는 웹사이트가 최신 콘텐츠를 표준화된 형식으로 게시하는 특별한 파일입니다. 이 형식은 다른 프로그램(RSS 리더라고 불리는 것)이 쉽게 여러 웹사이트의 최신 업데이트를 한 곳에서 가져오고 표시할 수 있게 합니다.

Our Project: Building an RSS Feed Reader

오늘 우리는 PHP와 AJAX를 사용하여 간단한 RSS 피드 리더를 만들어 보겠습니다. 우리의 프로젝트는 두 가지 주요 부분으로 구성됩니다:

피드를 표시하고 AJAX 코드를 포함한 HTML 페이지 (index.html).
RSS 피드를 가져오고 파싱하는 PHP 스크립트 (rss.php).

먼저 HTML 페이지부터 시작해 보겠습니다.

Index.html

여기서是我们的 index.html 파일의 코드입니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RSS Feed Reader</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#getFeed").click(function(){
$.ajax({
url: "rss.php",
type: "GET",
dataType: "json",
success: function(data){
var html = "<ul>";
$.each(data, function(index, item){
html += "<li><a href='" + item.link + "'>" + item.title + "</a></li>";
});
html += "</ul>";
$("#feedContent").html(html);
},
error: function(){
$("#feedContent").html("피드 가져오는 중 오류가 발생했습니다.");
}
});
});
});
</script>
</head>
<body>
<h1>내 RSS 피드 리더</h1>
<button id="getFeed">최신 피드 가져오기</button>
<div id="feedContent"></div>
</body>
</html>

이제 이를 해부해 보겠습니다:

우리는 기본적인 HTML 구조로 시작합니다.
<head> 섹션에서 jQuery를 포함시키면 AJAX 호출을 쉽게 할 수 있습니다.
문서가 준비되면 실행되는 스크립트가 있습니다. 이 스크립트는 "최신 피드 가져오기" 버튼에 클릭 이벤트를 연결합니다.
버튼이 클릭되면, PHP 스크립트 (rss.php)에 AJAX 호출을 합니다.
호출이 성공하면, 피드 데이터에서 링크의 비정형 목록을 만들어 feedContent div에 표시합니다.
오류가 발생하면, 오류 메시지를 표시합니다.

rss.php

이제 RSS 피드를 가져오고 파싱하는 PHP 스크립트를 만들어 보겠습니다:

<?php
// 크로스 오리진 요청을 허용합니다
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

// RSS 피드 URL
$feedUrl = "http://rss.cnn.com/rss/edition.rss";

// 새로운 DOMDocument 객체 생성
$xmlDoc = new DOMDocument();

// RSS 피드 로드
$xmlDoc->load($feedUrl);

// 모든 <item> 요소 가져오기
$items = $xmlDoc->getElementsByTagName('item');

$feed = array();

// 각 <item>을 반복합니다
foreach ($items as $item) {
$title = $item->getElementsByTagName('title')->item(0)->nodeValue;
$link = $item->getElementsByTagName('link')->item(0)->nodeValue;

// 이 항목을 우리 피드 배열에 추가합니다
$feed[] = array(
'title' => $title,
'link' => $link
);
}

// 피드를 JSON으로 출력합니다
echo json_encode($feed);
?>

이 PHP 스크립트를 해부해 보겠습니다:

우리는 크로스 오리진 요청을 허용하고 JSON을 출력할 수 있도록 헤더를 설정합니다.
우리는 가져올 RSS 피드의 URL을 정의합니다 (이 경우 CNN의 주요 기사).
우리는 새로운 DOMDocument 객체를 생성하고 이를 사용하여 RSS 피드를 로드합니다.
우리는 피드의 모든 <item> 요소를 가져옵니다 (각 <item>은 단일 기사나 기사를 나타냅니다).
우리는 각 항목을 반복하여 제목과 링크를 추출하고 우리의 $feed 배열에 추가합니다.
마지막으로, 우리는 $feed 배열을 JSON으로 인코딩하고 출력합니다.

How It All Works Together

브라우저에서 index.html을 엽니다. "최신 피드 가져오기" 버튼을 클릭하면 다음이 일어납니다:

index.html의 JavaScript가 rss.php에 AJAX 호출을 합니다.
rss.php는 RSS 피드를 가져오고 파싱하여 JSON 데이터를 반환합니다.
JavaScript는 이 JSON 데이터를 받아와서 페이지에 링크 목록을 생성합니다.

그러면! 우리는 PHP와 AJAX를 사용하여 간단한 RSS 피드 리더를 만들었습니다!

Methods Used

이 프로젝트에서 사용한 주요 메서드를 표로 정리하겠습니다:

메서드	설명
$.ajax()	jQuery 메서드로 AJAX 요청을 수행합니다
$.each()	jQuery 메서드로 배열이나 객체를 반복합니다
DOMDocument::load()	PHP 메서드로 XML 파일이나 URL을 로드합니다
getElementsByTagName()	PHP 메서드로 태그 이름으로 요소를 가져옵니다
json_encode()	PHP 함수로 값으 JSON 형식으로 인코딩합니다

기억하세요, 프로그래밍은 연습과 실험에 관한 것입니다. 이 코드를 수정해 보거나 다른 RSS 피드를 시도하거나 새로운 기능을 추가하지 말라. 더 많이 놀러 다니면, 이 모든 것이 어떻게 맞물리는지 더 잘 이해할 수 있을 것입니다.

미래의 기술 마법사 여러분, 즐겁게 코딩하세요!

Credits: Image by storyset