웹 주변에서 RSS in dead라는 속삭임을 들어본 적이 있겠지만, 사실은 사실상 모든 팟캐스트가 RSS를 사용하고 있기 때문에 여전히 널리 사용되고 있다. 아마도 당신은 RSS 팬이었기 때문에 RSS와 다시 친해져야 할 것 같습니다. 아니면 넌 여기 CSS-Tricks의 Chris처럼 RSS를 여전히 사랑할지도 몰라. 어떤 경우에도 RSS는 다른 기술과 마찬가지로 웹 기술이며 피드를 만들고 관리하는 방법에 대한 모범 사례가 있습니다.
그것이 바로 내가 이 기사에서 너에게 설명하려고 하는 것이다. 다양한 피드 종류, 구현 방법 및 피드 콘텐츠를 최대한 활용하기 위해 사용할 수 있는 전략에 대해 살펴보겠습니다.
RSS 대 아톰 대 JSON
믿거나 말거나, RSS는 다른 유형의 신디케이트 웹 피드 중 하나의 형식일 뿐입니다. 가장 일반적인 형식은 다음과 같다.
- RSS
- 원자
- JSON 피드
저는 RSS가 훨씬 더 대중적인 검색어이기 때문에 이러한 형식을 의미하기 위해 RSS를 사용했습니다. 그러나 이 글에서는 특정 형식을 참조하지 않는 한 이러한 기술을 웹 피드라고 하겠습니다.
Atom, RSS 및 JSON 피드는 동일한 작업을 수행하지만, 이들 사이에는 몇 가지 차이점이 있습니다.
- Atom과 RSS는 XML을 기반으로 하는 반면 JSON 피드는 JSON을 기반으로 합니다.
- 이 모든 형식은 어떤 식으로든 확장될 수 있습니다. JSON 피드에서 이 작업은 피드의 객체에서 밑줄로 시작하는 키를 가진 객체를 추가함으로써 수행된다. Atom 및 RSS에서는 루트 요소에 네임스페이스를 선언하여 이 작업을 수행합니다. 예를 들어 iTunes 팟캐스트 네임스페이스를 선언하는 팟캐스트 피드에서
<itunes:*>태그. - JSON 피드는 최신 피드 포맷으로, 지원이 Atom이나 RSS만큼 광범위하지 않을 수 있다. 그러나 팟캐스트가 있는 경우에는 RSS가 필수입니다.
- 모든 형식이 각 엔트리/아이템에 대해 고유한 식별자를 요구하지만, 아톰은 모든 피드에 대해 고유한 식별자를 요구하기 때문에 한 단계 더 나아간다.
- 모두 HTML 마크업을 허용하지만 다른 방식으로 처리한다. JSON은 JSON 이스케이프 HTML이 포함된
content_scape키를 사용합니다. Atom은 XML 이스케이프 HTML이 포함된type=scape태그를 사용합니다. RSS는 XML 이스케이프 HTML 또는<!에서 이스케이프되지 않은 HTML을 포함하는content태그를 사용합니다.[CDATA] 태그.
이것들 외에는 사소한 차이만 있습니다. 파일 크기가 다를 수 있다고 생각할 수 있지만 압축하면 파일 크기가 각각 몇 킬로바이트로 줄어듭니다. 응용 프로그램에 특정 형식(팟캐스트 등)이 필요한 특정 사용 사례가 없는 한 여러 형식을 제공하는 것은 나쁘지 않지만 RSS와 Atom이 가장 많은 지원을 제공합니다.
무엇이 좋은 음식을 만드는가?
피드를 만들기 위한 몇 가지 모범 사례를 살펴보겠습니다. 웹 상의 대부분의 것들과 마찬가지로, 우리가 그것을 최대한 활용하기 위해 우리의 일을 최적화하기 위해 할 수 있는 것들이 있다.
It doesn’t help to have a feed if no one knows about it. And one way to make a feed discoverable is to link it up in the `<head>` of your site. This way, feed readers are able to crawl and recognize when a site offers a content feed.다음은 문서 헤드에 연결된 세 가지 형식을 모두 보여주는 예입니다.
<head>
<link rel="alternate" type="application/rss+xml" href="https://codelab.farai.xyz/index.rss.xml" title="Farai's Codelab's RSS Feed" />
<link rel="alternate" type="application/feed+json" href="https://codelab.farai.xyz/index.feed.json" title="Farai's Codelab's JSON Feed" />
<link rel="alternate" type="application/atom+xml" href="https://codelab.farai.xyz/index.atom.xml" title="Farai's Codelab's ATOM Feed" />
<!-- etc. -->
</head><head>
<link rel="alternate" type="application/rss+xml" href="https://codelab.farai.xyz/index.rss.xml" title="Farai's Codelab's RSS Feed" />
<link rel="alternate" type="application/feed+json" href="https://codelab.farai.xyz/index.feed.json" title="Farai's Codelab's JSON Feed" />
<link rel="alternate" type="application/atom+xml" href="https://codelab.farai.xyz/index.atom.xml" title="Farai's Codelab's ATOM Feed" />
<!-- etc. -->
</head>And, yes, it’s OK to use all three! You can specify as many links as you want, though some feed readers might only recognize the first one. The important thing is that one includes `rel="alternate"` and the feed’s MIME `type`. There’s also the option to add a title which never hurts.피드를 쉽게 찾을 수 있도록 다른 방법은 무엇입니까? 광고해! 사용자가 피드 판독기에 복사하여 붙여넣는 데 사용할 수 있는 피드에 대한 직접 링크를 사이트에 배치합니다.
That’s what CSS Tricks does. This is the link to the site’s RSS and it’s available in the footer across the entire site. Some feed readers can pick up on these links, too, even though they are outside of the `<head>`.
As for what to name the feed itself, it doesn’t matter as long as it’s discoverable. Here’s a good look into how various sites name their feeds, but I’ve named mine `feed.json`, `feed.rss.xml` and `feed.atom.xml` for JSON feed, Atom, and RSS respectively.당신의 피드를 조금 더 좋게 만들기 위해 활용할 수 있는 웹의 몇 가지 기본적인 특징들이 있다.
예를 들어 피드를 압축하면 전체 파일 크기와 다운로드 시간이 크게 줄어듭니다. 대부분의 서버는 gzip, Brotli 또는 기타 압축 엔진을 사용하여 이 문제를 해결할 수 있습니다.
마찬가지로, ETag 또는 If-Modified- 둘 다 클라이언트가 피드를 캐시할 수 있고 다운로드하기 전에 새 버전의 피드가 준비되었는지 브라우저에 알릴 수 있기 때문에 지원하는 것이 좋습니다. 압축과 마찬가지로 서버도 이 문제를 처리할 수 있습니다.
다른 할 일은 허용 가능한 CORS를 활성화하는 것이다. 그렇지 않으면 클라이언트가 피드를 가져오는 것을 차단할 수 있습니다. 또한 이전 사이트에서 피드를 가져올 경우 보안에 미치는 영향을 고려해야 하지만 대부분의 소규모 사이트 및 피드에서 주요 문제가 될 가능성은 거의 없습니다. CORS를 활성화하기 위해 필요한 것은 다음과 같습니다.
Access-Control-Allow-Origin: *Access-Control-Allow-Origin: *이건 완전히 사용자 경험이야. RSS 피드를 구독하면 첫 번째 단락이나 게시물의 요약만 나오는 것을 경험해 본 적이 있을 것이다. 왜 그럴까? 전통적인 생각은 요약만 제공하면 사용자가 사이트를 클릭하도록 장려하여 더 많은 방문으로 이어진다는 것입니다. 그리고 더 많은 방문이 더 많은 안구와 더 많은 수익을 의미합니다.
저는 그것을 피하고 대신 당신의 피드가 각 포스트/엔트리/항목에 대한 전체 콘텐츠를 보낼 수 있도록 하는 것을 제안합니다. 많은 사용자들은 가독성에 중점을 두기 때문에 피드 리더에서 콘텐츠를 읽는 것을 선호한다.
만약 여러분이 여러분의 콘텐츠를 전체 콘텐츠에 제공한다는 이유로 여러분의 콘텐츠를 스크랩해서 자신의 사이트에 게시하는 부정직한 사람이 걱정된다면, 여러분에게 안심시키겠습니다: 그것은 웹 페이지에 신디케이트 피드보다 어렵지 않습니다.
또한 디스플레이 광고에 의존하는 게시자가 전체 콘텐츠 전송이 매출에 미치는 영향을 염려하는 경우에도 피드 콘텐츠에 직접 정적 광고를 추가할 수 있습니다. 게다가, 일부 독자들은 피드 항목과 관련된 웹 페이지를 구문 분석하여 리더에서도 읽을 수 있습니다.
But let’s not be dogmatic and all, because there are situations where summaries make sense. One is when a feed has a bunch of long-form entries. Another is when you have rich content that can only be viewed in a particular way (think show notes for a podcast). In that case, try making a good summary. One example is Nielsen Norman Group’s RSS which has a summary and an excerpt up to the first `<h2>` tag.피드에 요약만 표시하기로 결정한 경우 요약에 이미지, 컨텐츠의 주요 요점 개요 및 정식 버전에 대한 링크를 포함해야 합니다. 그것은 약간의 작업이지만, 내가 본 몇몇 피드와 달리 독자들에게 무엇을 기대해야 할지 알려준다.
콘텐츠를 만들 때 JavaScript 및 CSS가 제한된 장소에서 웹 브라우저의 컨텍스트 외부에 표시되는 방법을 고려하십시오. 새라 수에이단에게 확인해볼 만한 팁과 아이디어가 많아 요점은 콘텐츠에 좋은 예비 경험을 제공하는 것입니다.
이것은 내재된 요소에 관한 한 가장 큰 문제입니다. 일부 임베디드들은 마크업에 예비 콘텐츠를 포함하지만(트위터의 임베디드 트윗과 코드펜의 임베디드 펜과 같은) 다른 임베디드들은 그렇지 않을 수 있다. 특정 임베디드(Vimeo에 게시된 비디오 포함)는 특정 도메인에만 임베디드할 수 있으며, 이는 피드 판독기에 나타나지 않음을 의미한다. 따라서 이미지나 웹페이지 링크와 같이 어떻게든 볼 수 있는 방법을 제공해야 합니다.
There are plenty of ways to do fallbacks. Twitter’s embed falls back to a `<blockquote>` — which makes total sense as a tweet is sort of like a quote — and a link to the tweet itself, which allows some clients that do not support embeds, like Outlook, to effectively render the content in a way that is still accessible to the user.넷뉴스와이어는 임베드가 잘 들어가지만 유튜브는 가끔 여기서처럼 동영상을 재생하지 못하게 한다. 그래서, 대신, 임베드는 유투브 사이트에서 볼 수 있는 링크에 다시 접근한다. 아웃룩은 유튜브 임베드(또는 다른 임베드)를 지원하지 않지만 유튜브에 있는 동영상에 대한 설명 링크는 여전히 이용할 수 있다.
이야기의 교훈: 독자와 독자들이 어떻게 내용을 표현하는지 알면 당신은 가능한 최고의 예비 경험을 제공할 수 있다.
상대 URL 주의
One big issue across feeds is resolving relative URLs for images and links. Resolving based off the feed’s canonical link might work, but what happens if that link is in a subdirectory? The XML formats could use the `xml:base` attribute which defines the base URL to use when resolving relative URLs, but that’s only supported by Atom and is ignored and deprecated by most readers.The most robust solution is to use absolute URLs for every `href` and `src` in an entry’s content. Meaning that the markup looks something like this:<p>Read <a href="https://css-tricks.com/archives/">all our articles</a>.</p><p>Read <a href="https://css-tricks.com/archives/">all our articles</a>.</p>…그리고 이것 둘 다:
<p>Read <a href="/archives/">all our articles</a>.</p><p>Read <a href="/archives/">all our articles</a>.</p>…이것도 아니다:
<p>Read <a href="archives/">all our articles</a>.</p><p>Read <a href="archives/">all our articles</a>.</p>정적으로 생성된 사이트에서는 이 작업을 자동으로 수행하기가 어렵습니다. 한 가지 방법은 빌드 파이프라인에서 피드를 컴파일한 후 상대 URL을 절대 URL로 만드는 것이다. 또 다른 방법은 URL이 절대적이도록 정적 사이트 생성기에서 마크다운 링크 및 이미지를 렌더링하는 방법을 조작하는 것입니다. 나는 더 많은 정적 사이트 생성기가 두 번째 옵션을 허용하기를 바라지만 현재로서는 마크다운 렌더 후크를 통해 이를 지원하는 유일한 정적 사이트 생성기는 휴고이다.
하지만 이 규칙에는 예외가 있습니다. 그리고 그것은 각주이다. 일부 독자들은 각주를 감지하여 다룰 수 있다. 다음은 상대 점프 링크를 지원하는 피드 판독기에서 작동하는 HTML입니다.
<p>They’d managed to place 27.9MB of images onto the Critical Path.
Almost 30MB of previously non-render blocking assets had just been
turned into blocking ones on purpose with no escape hatch. Start
render time was as high as 27.1s over a cable connection<sup id="fnref:1">
<a href="#fn:1" class="footnote">1</a></sup>.</p>
<div class="footnotes">
<ol>
<li id="fn:1">
<p>5Mb up, 1Mb down, 28ms RTT. <a href="#fnref:1" class="reversefootnote"></a></p>
</li>
</ol>
</div><p>They’d managed to place 27.9MB of images onto the Critical Path.
Almost 30MB of previously non-render blocking assets had just been
turned into blocking ones on purpose with no escape hatch. Start
render time was as high as 27.1s over a cable connection<sup id="fnref:1">
<a href="#fn:1" class="footnote">1</a></sup>.</p>
<div class="footnotes">
<ol>
<li id="fn:1">
<p>5Mb up, 1Mb down, 28ms RTT. <a href="#fnref:1" class="reversefootnote"></a></p>
</li>
</ol>
</div>피드의 광고를 처리하는 방법
RSS 리더 내부에서 자바스크립트 지원을 받을 가능성이 낮으며, 이는 광고 서버에 연결된 광고가 없음을 의미합니다. 다시 말해, 광고는 동적으로 삽입되는 것이 아니라 당신의 콘텐츠의 일부가 되어야 할 것이다.
PSA: 일부 콘텐츠가 피드에 포함될 필요는 없습니다.
게시된 모든 컨텐츠가 압축되어 피드의 첫 번째 항목으로 되돌아가는 피드를 보았습니다. 하루에도 수십 개의 출품작을 올리는 출판사들의 피드가 넘쳐난다. 두 경우 모두 과거 아카이브에서 사용할 수 있는 콘텐츠의 양을 제한하고 한 개 대신 여러 개의 피드를 고려하는 것이 좋습니다.
완벽한 예. MacRumors.com의 피드는 매일 수십 개의 새로운 기사들로 매우 활발하기 때문에 확인해 보세요. 10년 전의 기사로 돌아간다는 게 상상이 돼? 아마 아닐 것이다. 모든 에피소드를 저장하는 팟캐스트용 피드가 아니라면 사용자가 더 새로운 콘텐츠에 관심을 가질 수 있으므로 피드에 저장되는 항목 수를 제한해 보십시오. 따라서 대역폭과 업데이트 시간이 단축되며, 사용자가 새로 고쳐야 할 피드가 많기 때문에 특히 중요합니다.
한 번에 10~15개의 게시물이 저장되고 전시되기에 충분하다고 말하고 싶지만, 많은 것들과 마찬가지로 "그것은 달라"는 것이다. 한 달에 몇 번 새로운 콘텐츠를 올리는 사이트에서는 몇 개를 저장하는 것이 타당하지만, 훨씬 더 자주 게시하는 다른 사이트에서는 하루 만에 해당 콘텐츠가 사라질 수 있습니다. 따라서 게시물의 이상적인 수는 게시하는 콘텐츠 유형(적시성 또는 상록수성)과 게시하는 내용의 양과 빈도(하루 종일 또는 한 달에 몇 번)에 따라 달라집니다.
하지만 제가 정말로 말하고자 하는 것은, 여러분이 압도적인 사용자들에게 넘치게 해서 통과해야 할 기사 더미를 그들에게 넘치게 하는 것을 피하고자 한다는 것입니다. 이를 방지하기 위한 몇 가지 방법은 다음과 같습니다.
- 전체 내용 대신 요약 표시(이전 규칙에 대한 다른 예외 참조) 및
- 사용자가 특정 유형의 컨텐츠에 대해 여러 피드 중에서 선택할 수 있도록 컨텐츠를 필터링합니다. 즉, 모든 게시물(또는 특정 주제에 대한 전체 타임라인)을 제공하려면 해당 주제/카테고리/태그/어떠한 항목에 대한 전용 피드를 만드는 것을 고려해 보십시오.
피드의 크기와 크기가 그렇게 까다로운 이유는 이미지, 스크립트 및 기타 자산과 같은 피드의 수와 크기가 피드 판독기의 성능에 영향을 미치기 때문입니다. 사용자가 구독하는 피드가 많아지고 해당 피드에서 가져와야 하는 항목이 많아질수록 내용을 새로 고치고 표시하는 데 걸리는 시간이 늘어납니다.
피드 이동
웹 사이트가 도메인을 변경할 수 있는 것처럼 현재 주소에서 피드를 이동해야 할 수도 있습니다. 그렇게 어려운 일은 아니지만, 움직이기 전에 고려해야 할 중요한 사항들이 있습니다.
For instance, it’s a good idea to ensure that your feed’s items have a global unique identifier (GUID). This maps out to feed’s `guid` in RSS and its `id` in both Atom and JSON. The GUI prevents feed readers from fetching duplicate entries. This is all the more important (and challenging) if you’re working with a static site.식별자로 항목의 퍼말링크를 사용하는 것이 유혹적일 수 있지만, 이러한 것들은 바뀔 수 있다는 것을 기억하라. GUID를 만들려면 태그 URI를 사용하는 것이 좋습니다. 태그 URI는 다음과 같이 구성됩니다.
- 기관(즉, 사이트의 도메인)
- 날짜(태깅 엔티티가 피드와 연결된 권한 이름을 제어한 시점을 나타냄)
- 가져올 특정 URL
- 조각(하위 리소스 또는 타임스탬프일 수 있음)
tag:<authority>,<YYYY-MM-DD>:<specific>#<fragment>tag:<authority>,<YYYY-MM-DD>:<specific>#<fragment>The `<specific>` portion could be something like the relative portion of your site’s homepage URL (i.e. `/`) and the fragment can be the content’s published timestamp. For instance, a post here on CSS Tricks could have a tag URI that looks like this:tag:css-tricks.com,2021-16-11:/#1637082038781tag:css-tricks.com,2021-16-11:/#1637082038781이렇게 하면, 권한 날짜는 도메인이 손을 바꾼 경우에도 이를 보장합니다. 또한 시간에 따른 도메인 변경을 추적할 수 있으므로 정적 사이트 생성기에서 관리할 수 있습니다.
The biggest reason I suggest the tag URI scheme is that Atom requires a feed’s `id` to be in a URL format. Even though RSS and JSON don’t have the same constraint, the tag URI scheme works for them as well, meaning we have full support.또한 강력한 ID를 사용하면 피드 판독기가 중복 항목을 가져오지 않고도 피드를 안전하게 이동할 수 있습니다. 피드 자체를 이동하려면 301 리디렉션을 새 위치로 설정하면 됩니다.
피드의 새 위치를 포함하는 파일을 이전 위치에 배치하는 XML 리디렉션이라는 기술을 사용할 수 있습니다. 당신이 HTTP 코드를 조작할 수 없는 상황에서 이것이 잘 작동하기는 하지만, 나는 이것을 구현하는 피드 리더를 찾을 수 없었다.
피드 유효성 검사
HTML과 같이 피드는 제대로 작동하기 위해서는 유효해야 합니다. 검증된 피드의 이점은 코드가 오류가 없고 항목이 사이트에서 피드 판독기로 적절하게 이동한다는 것입니다.
W3C의 피드 유효성 검사 서비스는 RSS 및 Atom 피드의 옵션 중 하나입니다. 피드에 URL을 제공하거나 피드의 실제 코드를 붙여넣으면 모든 모범 사례를 충족하는지를 보여주는 전체 보고서가 표시됩니다. 당신은 경고를 받기 쉽습니다. 그것은 일어난다. 대부분의 경고는 실제로 경고일 뿐이고 피드에 영향을 미치지 않을 수 있습니다.
즉, 피드를 검증할 때 항상 두 가지 사항을 고려해야 합니다.
item에는 다음과 같은interval요소가 포함되어야 합니다. 우리가 본 것처럼 고유 식별자는 피드 판독기가 피드가 이동할 때 동일한 항목을 두 번 표시하는 것을 방지한다.element에는 절대 URL 참조가 포함되어야 합니다. 이 참조는 독자가 확인하기 어렵기 때문에 가능한 경우 상대 URL을 피하십시오.
JSON은요? JSON 피드의 유효성을 검사하려면 validator.jsonfeed.org을 사용하거나 JSON 스키마 검사기를 사용하여 JSON 피드 스키마를 확인하십시오.
피드에 대한 액세스 관리 또는 제한
유료 팟캐스트를 구독하고 구독을 통해 얻을 수 있는 모든 "프리미엄" 콘텐츠가 포함된 특수 피드 URL을 이용할 수 있는 방법을 알고 계십니까? 음, 왜냐하면 우리는 누가 특정 피드에 접근할 수 있는지 통제하고 다른 사람들은 그 콘텐츠를 받지 못하게 할 수 있기 때문이에요.
피드에 대한 액세스를 관리하는 방법에는 두 가지가 있습니다.
- HTTP 기본 인증에는 사용자 이름과 암호가 필요합니다. 이 사용자 이름은 피드 URL 자체에 제공하거나
https://username:password@domain.example/path와 같이 추론됩니다. - 토큰을 쿼리 매개 변수로 제공(예:
http://domain.com/path?token=xyz).
URL이 HTTPS인 경우 URL 경로와 암호가 암호화되어 있는 것과 동일한 보안을 가집니다. 서버에서의 인증 처리와 관련하여, CSS-Tricks에 상당히 많은 기사가 있지만, 그것은 전혀 다른 주제입니다.
RSS 클럽에 가입하세요!
RSS 클럽의 첫 번째 규칙은 다음과 같습니다.
그것에 대해 말하지 마세요. 사람들이 찾도록 놔두자. 보람있게 해.
하지만 RSS Club에 속한 피드는 맞춤형 피드의 좋은 예입니다. 피드 항목은 해당 피드에서만 사용할 수 있기 때문입니다. 다시 말해, 블로그 게시물은 게시되지만 실제 사이트에는 표시되지 않습니다. 피드를 통해서만 액세스할 수 있습니다.
Dave Rupert는 몇 년 전에 이 클럽을 설립했으며 RSS를 소규모 커뮤니티 내에서 콘텐츠를 소비하는 일류 시민으로 만들 수 있는 좋은 방법입니다.
클럽에 가입한다는 것은 해당 피드에서만 이용할 수 있는 게시물을 위한 전용 피드를 보유하는 것을 의미합니다. 예를 들어, WordPress에서 "RSS Club" 범주를 새로 작성하여 기본 게시물 질의에서 필터링할 수 있습니다. 이렇게 하면 해당 카테고리에 대해서만 피드를 제공하거나 해당 카테고리의 게시물을 계속 포함하는 전체 피드를 제공할 수 있습니다.
(본론을 누설해서 미안해, 데이브!)
콘텐츠를 뛰어넘는 웹 피드
RSS는 블로그 게시물이나 기사보다 더 많은 용도로 사용될 수 있습니다. 예를 들어, GitHub는 이슈, 커밋, 풀 리퀘스트, 릴리스에 대한 Atom 피드를 가지고 있다.
업데이트를 제공하는 데 사용할 수도 있습니다. 웹 사이트에 변경 사항이 있을 때 알려주는 피드를 원한다고 가정해 보겠습니다. 좋은 생각이지? 무슨 일이 벌어지는지 알고 싶으면 항상 반가워 특히 주방에 요리사가 한 명 이상 있을 때 말이야
주기적으로 피드를 폴링하여 변경 사항을 확인한 후 새 피드 항목을 트리거하는 일종의 시스템을 구축할 수 있지만, 여기에는 많은 리소스가 필요합니다. 또 다른 아이디어는 변경 사항을 찾을 수 있는 웹훅을 구현하는 것입니다. 한편, 특히 콘텐츠를 모니터링하는 것만 원하는 경우에는 알림을 관리하고 전송하는 것이 번거로울 수 있습니다.
웹서브도 한 번 가볼 만할 것 같아요. 게시자가 허브에 사이트가 변경되었음을 알리면 허브는 사이트의 웹 피드에 가입한 모든 시스템에 알립니다. Google의 PubSubHubBub Hub와 같은 기존 허브에 피드를 게시한 후 피드에 허브를 지정할 수 있습니다. 유튜브는 이를 구현했다.
예!
좋은 예가 몇 개 없는데 이런 튜토리얼이 어딨어? 세 가지 실제 사례를 살펴봅시다.
CSS-Tricks가 웹 역사를 다루는 진행 중인 시리즈에 대한 팟캐스트를 가지고 있다는 것을 알고 있었나요? 뭐, 그렇긴 하지. 그리고 네, RSS로 구독할 수 있습니다.
Podcasts must use RSS with the `xmlns:content` and `xmlns:itunes` extensions, which are needed to provide metadata about the podcast and its episodes. The audio file for each episode is specified in an enclosure along with its mime type and size. RSS is limited to one enclosure, but both Atom and JSON support multiple enclosures.여기 피드가 있습니다. iTunes 관련 태그와 추가 컨텍스트를 위해 제공되는 기타 비트의 정보를 확인하십시오.
<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd">
<channel>
<atom:link href="https://adactio.s3.amazonaws.com/audio/narration/web_history/podcast.xml" rel="self" type="application/rss+xml" />
<title>Web History</title>
<link>https://css-tricks.com/category/history/</link>
<language>en</language>
<copyright>2020</copyright>
<description>Written by Jay Hoffmann and narrated by Jeremy Keith.</description>
<image>
<url>https://adactio.s3.amazonaws.com/audio/narration/web_history/WebHistoryPodcast.jpg</url>
<title>Web History</title>
<link>https://css-tricks.com/category/history/</link>
</image>
<itunes:author>Jay Hoffman</itunes:author>
<itunes:summary>The history of the web.</itunes:summary>
<itunes:explicit>no</itunes:explicit>
<itunes:type>episodic</itunes:type>
<itunes:owner>
<itunes:name>Jeremy Keith</itunes:name>
<itunes:email>jeremy@adactio.com</itunes:email>
</itunes:owner>
<itunes:image href="https://adactio.s3.amazonaws.com/audio/narration/web_history/WebHistoryPodcast.jpg"/>
<itunes:category text="Technology"></itunes:category>
<item>
<title>Chapter 10: Browser Wars</title>
<description>In June of 1995, representatives from Microsoft arrived at the Netscape offices. The stated goal was to find ways to work together—Netscape as the single dominant force in the browser market and Microsoft as a tech giant just beginning to consider the implications of the Internet. Both groups, however, were suspicious of ulterior motives.</description>
<pubDate>Mon, 8 Nov 2021 12:00:00 -0000</pubDate>
<link>https://css-tricks.com/chapter-10-browser-wars/</link>
<itunes:title>Chapter 10: Browser Wars</itunes:title>
<itunes:episode>10</itunes:episode>
<itunes:episodeType>full</itunes:episodeType>
<itunes:author>Jay Hoffman</itunes:author>
<itunes:summary>In June of 1995, representatives from Microsoft arrived at the Netscape offices. The stated goal was to find ways to work together—Netscape as the single dominant force in the browser market and Microsoft as a tech giant just beginning to consider the implications of the Internet. Both groups, however, were suspicious of ulterior motives.</itunes:summary>
<content:encoded>
<![CDATA[
<p>In June of 1995, representatives from Microsoft arrived at the Netscape offices. The stated goal was to find ways to work together—Netscape as the single dominant force in the browser market and Microsoft as a tech giant just beginning to consider the implications of the Internet. Both groups, however, were suspicious of ulterior motives.</p>
]]>
</content:encoded>
<itunes:duration>00:40:40</itunes:duration>
<guid>https://adactio.s3.amazonaws.com/audio/narration/web_history/Chapter_10_Browser_Wars.mp3</guid>
<enclosure url="https://adactio.s3.amazonaws.com/audio/narration/web_history/Chapter_10_Browser_Wars.mp3" length="19608877" type="audio/mpeg"/>
</item>
</channel>
</rss><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd">
<channel>
<atom:link href="https://adactio.s3.amazonaws.com/audio/narration/web_history/podcast.xml" rel="self" type="application/rss+xml" />
<title>Web History</title>
<link>https://css-tricks.com/category/history/</link>
<language>en</language>
<copyright>2020</copyright>
<description>Written by Jay Hoffmann and narrated by Jeremy Keith.</description>
<image>
<url>https://adactio.s3.amazonaws.com/audio/narration/web_history/WebHistoryPodcast.jpg</url>
<title>Web History</title>
<link>https://css-tricks.com/category/history/</link>
</image>
<itunes:author>Jay Hoffman</itunes:author>
<itunes:summary>The history of the web.</itunes:summary>
<itunes:explicit>no</itunes:explicit>
<itunes:type>episodic</itunes:type>
<itunes:owner>
<itunes:name>Jeremy Keith</itunes:name>
<itunes:email>jeremy@adactio.com</itunes:email>
</itunes:owner>
<itunes:image href="https://adactio.s3.amazonaws.com/audio/narration/web_history/WebHistoryPodcast.jpg"/>
<itunes:category text="Technology"></itunes:category>
<item>
<title>Chapter 10: Browser Wars</title>
<description>In June of 1995, representatives from Microsoft arrived at the Netscape offices. The stated goal was to find ways to work together—Netscape as the single dominant force in the browser market and Microsoft as a tech giant just beginning to consider the implications of the Internet. Both groups, however, were suspicious of ulterior motives.</description>
<pubDate>Mon, 8 Nov 2021 12:00:00 -0000</pubDate>
<link>https://css-tricks.com/chapter-10-browser-wars/</link>
<itunes:title>Chapter 10: Browser Wars</itunes:title>
<itunes:episode>10</itunes:episode>
<itunes:episodeType>full</itunes:episodeType>
<itunes:author>Jay Hoffman</itunes:author>
<itunes:summary>In June of 1995, representatives from Microsoft arrived at the Netscape offices. The stated goal was to find ways to work together—Netscape as the single dominant force in the browser market and Microsoft as a tech giant just beginning to consider the implications of the Internet. Both groups, however, were suspicious of ulterior motives.</itunes:summary>
<content:encoded>
<![CDATA[
<p>In June of 1995, representatives from Microsoft arrived at the Netscape offices. The stated goal was to find ways to work together—Netscape as the single dominant force in the browser market and Microsoft as a tech giant just beginning to consider the implications of the Internet. Both groups, however, were suspicious of ulterior motives.</p>
]]>
</content:encoded>
<itunes:duration>00:40:40</itunes:duration>
<guid>https://adactio.s3.amazonaws.com/audio/narration/web_history/Chapter_10_Browser_Wars.mp3</guid>
<enclosure url="https://adactio.s3.amazonaws.com/audio/narration/web_history/Chapter_10_Browser_Wars.mp3" length="19608877" type="audio/mpeg"/>
</item>
</channel>
</rss>이번에는 CSS-Tricks에서 블로그 게시물의 표준 RSS 피드가 어떤 모습인지에 대한 예를 다시 한번 살펴보겠습니다.
The code for this particular RSS feed is a little more verbose than your typical feed, and that’s to do with the multiple extensions added to the `<rss>` tag. A number of them aren’t reachable but there are some that handle other things, like `xmlns:wfw` for comments, `xmlns:dc` for additional metadata, and `xmlns:sy` for information on how often the feed is refreshed.<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
<channel>
<title>CSS-Tricks</title>
<atom:link href="https://css-tricks.com/feed/" rel="self" type="application/rss+xml" />
<link>https://css-tricks.com</link>
<description>Tips, Tricks, and Techniques on using Cascading Style Sheets.</description>
<lastBuildDate>Fri, 19 Nov 2021 15:13:49 +0000</lastBuildDate>
<language>en-US</language>
<sy:updatePeriod>
hourly </sy:updatePeriod>
<sy:updateFrequency>
1 </sy:updateFrequency>
<generator>https://wordpress.org/?v=5.8.2</generator>
<image>
<url>https://i1.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=32%2C32&ssl=1</url>
<title>CSS-Tricks</title>
<link>https://css-tricks.com</link>
<width>32</width>
<height>32</height>
</image>
<site xmlns="com-wordpress:feed-additions:1">45537868</site>
<item>
<title>Parallax Powered by CSS Custom Properties</title>
<link>https://css-tricks.com/parallax-powered-by-css-custom-properties/</link>
<comments>https://css-tricks.com/parallax-powered-by-css-custom-properties/#respond</comments>
<dc:creator>
<![CDATA[Jhey Tompkins]]>
</dc:creator>
<pubDate>Fri, 19 Nov 2021 15:13:46 +0000</pubDate>
<category>
<![CDATA[Article]]>
</category>
<category>
<![CDATA[animation]]>
</category>
<category>
<![CDATA[custom properties]]>
</category>
<category>
<![CDATA[GSAP]]>
</category>
<guid isPermaLink="false">https://css-tricks.com/?p=357192</guid>
<description>
<![CDATA[
]]>
</content:encoded>
<wfw:commentRss>https://css-tricks.com/parallax-powered-by-css-custom-properties/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
<post-id xmlns="com-wordpress:feed-additions:1">357192</post-id>
</item>
</channel>
</rss><?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
<channel>
<title>CSS-Tricks</title>
<atom:link href="https://css-tricks.com/feed/" rel="self" type="application/rss+xml" />
<link>https://css-tricks.com</link>
<description>Tips, Tricks, and Techniques on using Cascading Style Sheets.</description>
<lastBuildDate>Fri, 19 Nov 2021 15:13:49 +0000</lastBuildDate>
<language>en-US</language>
<sy:updatePeriod>
hourly </sy:updatePeriod>
<sy:updateFrequency>
1 </sy:updateFrequency>
<generator>https://wordpress.org/?v=5.8.2</generator>
<image>
<url>https://i1.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=32%2C32&ssl=1</url>
<title>CSS-Tricks</title>
<link>https://css-tricks.com</link>
<width>32</width>
<height>32</height>
</image>
<site xmlns="com-wordpress:feed-additions:1">45537868</site>
<item>
<title>Parallax Powered by CSS Custom Properties</title>
<link>https://css-tricks.com/parallax-powered-by-css-custom-properties/</link>
<comments>https://css-tricks.com/parallax-powered-by-css-custom-properties/#respond</comments>
<dc:creator>
<![CDATA[Jhey Tompkins]]>
</dc:creator>
<pubDate>Fri, 19 Nov 2021 15:13:46 +0000</pubDate>
<category>
<![CDATA[Article]]>
</category>
<category>
<![CDATA[animation]]>
</category>
<category>
<![CDATA[custom properties]]>
</category>
<category>
<![CDATA[GSAP]]>
</category>
<guid isPermaLink="false">https://css-tricks.com/?p=357192</guid>
<description>
<![CDATA[
]]>
</content:encoded>
<wfw:commentRss>https://css-tricks.com/parallax-powered-by-css-custom-properties/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
<post-id xmlns="com-wordpress:feed-additions:1">357192</post-id>
</item>
</channel>
</rss>사실 이건 제 개인 자료인데 어쩌다 보니 JSON을 이용하게 되었습니다. 제가 알기로는 예제 2에서 본 것과 같은 JSON 확장 기능이 없기 때문에 다른 예에 비해 상당히 덜 어수선합니다.
저는 JSON이 전체 템플릿을 작성하는 것보다 피드 데이터가 있는 개체만 이해하는 것이 훨씬 더 쉽다는 것을 알게 되었습니다.
{
"author": {
"name": "Farai Gandiya"
},
"feed_url": "https://codelab.farai.xyz/feed.json",
"home_page_url": "https://codelab.farai.xyz/",
"icon": "https://codelab.farai.xyz/fcl-logo.png",
"items": [
{
"content_html": "...",
"date_modified": "2021-11-13T05:26:07+02:00",
"date_published": "2021-11-13T05:26:07+02:00",
"id": "https://codelab.farai.xyz/1636773967",
"summary": "...",
"title": "Don't be afraid of the Big Long Page by Amy Hupe, content designer.",
"url": "https://codelab.farai.xyz/links/long-content-ok/"
}
]
}{
"author": {
"name": "Farai Gandiya"
},
"feed_url": "https://codelab.farai.xyz/feed.json",
"home_page_url": "https://codelab.farai.xyz/",
"icon": "https://codelab.farai.xyz/fcl-logo.png",
"items": [
{
"content_html": "...",
"date_modified": "2021-11-13T05:26:07+02:00",
"date_published": "2021-11-13T05:26:07+02:00",
"id": "https://codelab.farai.xyz/1636773967",
"summary": "...",
"title": "Don't be afraid of the Big Long Page by Amy Hupe, content designer.",
"url": "https://codelab.farai.xyz/links/long-content-ok/"
}
]
}CMS 및 정적 사이트 생성기에 걸친 웹 피드 구현
대부분의 CMS와 정적 사이트 생성기는 웹 피드를 지원하지만, 일반적으로 RSS는 웹 피드를 가장 광범위하게 지원합니다. 다음은 웹 피드를 지원하는 몇 가지 CMS입니다.
- WordPress(Atom 및 RSS)
Yoast SEO를 사용하면 각 피드의 항목 전후에 내용을 수정할 수 있습니다.
WordPress JSON 피드 플러그인 - Yoast SEO를 사용하면 각 피드의 항목 전후에 내용을 수정할 수 있습니다.
- WordPress JSON 피드 플러그인
- 고스트(수정 가능한 RSS)
- 쇼핑 정보(RSS)
- Squarespace(게시물 및 팟캐스트용 RSS)
- Wix(RSS)
다음은 웹 피드(주로 RSS)를 다양한 정적 사이트 생성기에 추가하는 방법에 대한 몇 가지 리소스입니다.
- 엘레븐티
- 휴고
- 다음.js
- Nuxt.js
- 지킬
- 아스트로
- 개츠비
- 졸라
마무리하기
그래, 잘했어! 이것이 웹 피드를 구현할 때 고려해야 할 거의 모든 사항이라고 생각합니다. 여기서는 세 가지 형식(RSS, Atom, JSON)을 살펴보고, 사용자에게 친숙한 피드 읽기 환경을 만들기 위한 모범 사례를 다루었으며, 피드 검증, 피드 인증 가능성, 야생에서의 세 가지 실제 피드 예제를 살펴보고, 다양한 기술에 걸쳐 몇 가지 구현을 제공했습니다.
(아, 그리고 그 일의 첫 번째 규칙은 그 일에 대해 말하지 않는 것이다.)
이러한 가이드라인을 통해 탄력적인 웹피드를 만들 수 있기를 바랍니다. 웹 피드 구현에 대한 질문이 있거나 RSS 피드를 공유하고 싶은 마음이 든다면 댓글을 남겨주세요!
'css' 카테고리의 다른 글
| 2021년 가장 좋아하는 Chrome 확장 기능 (0) | 2021.12.29 |
|---|---|
| 사이트에 서비스 직원 추가 (0) | 2021.12.29 |
| HTML 검사기 API (0) | 2021.12.29 |
| 일관되고 유연한 스케일링 유형 및 간격 (0) | 2021.12.29 |
| 어쩌면 아무것도 아닐지도 모른다 (0) | 2021.12.29 |
댓글