RSS(Really Simple Syndication)는 온라인 콘텐츠의 체계적인 배포를 용이하게 하는 널리 사용되는 프로토콜입니다. 기술 애호가 및 교육자를 포함한 다양한 개인이 선호하는 웹 사이트 또는 블로그에서 게시한 업데이트 및 기사에 대한 최신 인식을 유지하기 위해 RSS를 사용합니다.
스벨트를 기반으로 개발된 매우 효율적이고 유연한 메타 프레임워크인 스벨트키트를 사용하여 처음부터 RSS 리더를 만들 수 있으며, 사용자 친화적인 디자인과 직관적인 인터페이스 덕분에 비교적 쉽게 수행할 수 있습니다.
스벨테키트 프로젝트 설정하기
물론! 다음은 원문을 좀 더 다듬은 문구입니다: “이 프로젝트에 사용된 소스 코드는 MIT 라이선스 조건에 따라 제한 없이 무료로 GitHub 리포지토리를 통해 액세스할 수 있도록 제공되었습니다. 관심 있는 당사자는 제공된 쇼케이스를 방문하여 이 프로젝트의 운영 데모를 살펴볼 수 있습니다.
이 프로세스를 시작하려면 컴퓨터 시스템에 Node.js 환경이 설정되어 있고 Node 패키지 관리자(NPM)가 설치되어 있어야 합니다. 터미널 애플리케이션을 열고 명령 프롬프트에서 다음 명령을 실행하여 설치를 시작하세요:
npm create svelte
# or
yarn create svelte
Vite와 함께 Create Svelte CLI를 사용하여 Svelte 애플리케이션을 생성하는 프로세스를 시작하려면 다음 단계를 따르세요: 1. 터미널 또는 명령 프롬프트에 ‘create-svelte’를 입력하여 명령줄 인터페이스를 시작합니다. 그러면 스벨테 애플리케이션 개발을 위한 CLI 도구가 활성화됩니다. 2. CLI가 활성화되면 새 프로젝트의 이름을 입력한 다음 사용 가능한 템플릿에서 ‘스켈레톤 프로젝트’ 옵션을 선택합니다. 이 옵션은 Svelte를 사용하여 웹 애플리케이션을 구축하기 위한 기본 구조를 제공하므로 이 옵션을 선택할 수 있습니다. 3. 다음으로, 이 기능과 관련된 확인란을 선택 해제하여 TypeScript로 유형 검사를 비활성화합니다. 이렇게 하면 개발자는 TypeScript에서 부과하는 엄격한 유형 검사 규칙을 준수하지 않고도 작업할 수 있습니다. 4.
npm install
# or
yarn
애플리케이션의 기능을 제대로 활용하려면 “rss-parser” 및 “moment”라는 두 개의 추가 라이브러리를 설치해야 합니다. 이 도구는 각각 XML 데이터를 효과적으로 구문 분석하고 날짜 서식을 정확하게 지정하는 데 매우 중요합니다. 명령줄 인터페이스에서 이 설치 프로세스를 실행하려면 다음 명령을 순서대로 입력하세요:
npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment
애플리케이션 개발 프로세스를 시작하려면 지정된 명령을 실행하여 개발 서버를 시작하기만 하면 됩니다.
npm run dev
# or
yarn dev
이 작업은 프로젝트의 디렉토리 구조를 재구성하는 동시에 CSS 파일을 지운 다음 아직 존재하지 않을 수 있는 필요한 디렉터리를 생성한 다음 해당 이름의 빈 파일을 생성해야 합니다.
소스 디렉터리를 수정하려면 라이브러리 폴더와 해당 소스 디렉터리 내에 “lib”라는 하위 디렉터리를 포함시켜야 합니다. 또한 소스 디렉터리에는 “피드” 하위 디렉터리가 포함된 “경로” 디렉터리가 있어야 합니다. 이 “피드” 하위 디렉터리 내에 “[title]”이라는 제목의 새 디렉터리가 생성되며, 그 안에 “page.server.js” 및 “page.svelte”라는 두 개의 추가 파일이 포함됩니다.
명령줄을 통해 디렉터리를 만드는 것은 여러 셸이 패턴 매칭을 위해 대괄호를 사용하기 때문에 어려울 수 있습니다. 오류가 발생할 경우 디렉토리 이름을 다음과 같이 따옴표로 묶는 것이 좋습니다:
mkdir '[title]'
유효한 RSS 피드를 확인하기 위한 API 경로 만들기
“routes/\_server.js” 파일을 열고 JSON 유틸리티와 RSS 파서 패키지의 파서 객체를 통합합니다.
import { json } from "@sveltejs/kit";
import Parser from "rss-parser";
다음 코드 스니펫을 통합하여 URL 매개변수를 받아들이고 Promise를 반환하는 `fetchRSS`라는 이름의 비동기 함수를 정의합니다. 함수 내에서 두 개의 상수 변수 `rssLink`와 `parser`를 설정합니다. 전자는 주어진 URL에서 가져온 RSS 피드 링크의 값을 할당하고 후자는 `xml2js` 파서 객체를 나타냅니다.
들어오는 요청을 효과적으로 처리하기 위해서는 먼저 URL의 검색 매개변수를 저장하기 위한 변수와 새로운 `Parser` 객체를 인스턴스화하기 위한 변수 두 개를 할당해야 합니다. 그 후, 제공된 RSS 링크(`rssLink`)를 전달하여 `parser` 변수의 `parseURL()` 메서드를 호출합니다. 마지막으로 JSON 직렬화 기능을 사용하여 형식이 지정된 응답을 생성한 다음 사용자에게 다시 반환합니다.
export async function GET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}
홈페이지 디자인
스벨트키트의 라우팅 메커니즘의 기본 동작은 파일 시스템 중심 접근 방식을 기반으로 합니다. 라우팅 폴더와 그 콘텐츠는 프레임워크에 의해 자동으로 관리되어 웹 애플리케이션의 기본 랜딩 페이지로 사용됩니다.
당면한 작업을 진행하려면 프로젝트 저장소 내에 있는 “plus-one.svelte” 파일에 액세스하세요. 파일이 열리면 해당 파일 내에 있는 스크립트 태그를 찾아서 아직 설정되지 않은 앞서 언급한 “addToLocalStorage” 함수를 즉시 임포트합니다. 이 작업이 성공적으로 실행되면 “url”과 “ready”라는 두 개의 변수를 생성하고 후자의 엔티티에 초기값을 ‘false’로 할당합니다.
<script>
import addToLocalStorage from '$lib/addToLocalStorage';
let url;
let ready = false;
</script>
마크업 섹션에 새 제목을 추가했습니다.
<main>
<h1>RSS Reader</h1>
<h3>Add a new feed:</h3>
<input
type="url"
placeholder="Enter a valid RSS link..."
bind:value={url}
on:input={() => {
if (url.length > 0) {
setTimeout(() => {
ready = true;
}, 250);
} else {
ready = false;
}
}}
/>
</main>
앞서 언급한 코드 스니펫은 사용자가 입력한 텍스트의 글자 수가 0이 아닌지 확인하는 입력 컴포넌트를 설정합니다. 따라서 이러한 조건이 확인되면 인터페이스 내에서 특정 시각적 구성 요소를 렌더링할 수 있습니다.
{#if ready}
{#await fetch(`/?url=${url}`).then((res) => res.json())}
<p>Gathering information... Please wait</p>
{:then data}
{#if data.message === 'Internal Error'}
<p>Something went wrong...Check your URL and try again</p>
{:else}
<div>
{#if data.image}
<img
src={data.image.url}
alt={data.title}
/>
{/if}
<p>{data.title}</p>
<p>{data.description || ''}</p>
{console.log(data) || ''}
</div>
<button on:click={()=>{
addToLocalStorage(data.title, url);
location.reload();
}}>Add to My Feeds</button>
{/if}
{/await}
{/if}
주어진 코드 블록은 `ready` 값이 참으로 설정되었는지 여부를 평가합니다. 설정된 경우 함수는 이전에 정의된 API 엔드포인트에 요청을 진행합니다. 이 특정 코드 섹션의 주요 목적은 사용자가 제공한 URL이 유효한 RSS 피드와 호환되는지 확인하는 것입니다.
결론적으로 의료, 교육, 비즈니스 등 다양한 분야에서 AI 기술을 통합함으로써 얻을 수 있는 무수한 이점에 대해 자세히 살펴보았습니다. AI의 힘을 활용함으로써 사회는 효율성, 정확성, 혁신의 향상이라는 보상을 얻을 수 있습니다. 그러나 이러한 통합에는 윤리적 고려 사항을 고려하여 신중하고 책임감 있게 접근하는 것이 중요합니다. 앞으로 나아가면서 우리의 가치를 염두에 두면서 새로운 기술 발전의 시대를 수용합시다.
<style>
img {
width: 40px;
height: 40px;
}
input {
padding: 15px;
font-size: 20px;
width: 50%;
}
</style>
레이아웃 설정
“html
export const prerender = false;
export const ssr = false;
이어서, `+layout.svelte` 파일에서 브라우저의 로컬 저장소에서 피드 컬렉션을 검색합니다.
<script>
let feeds = JSON.parse(window.localStorage.getItem('feeds')) || [];
feeds = feeds.reverse();
</script>
물론입니다! 다음은 HTML과 CSS를 사용하여 내비게이션 바를 만드는 방법의 예시입니다: “`html
“` 이렇게 하면 웹사이트의 다른 페이지로 연결되는 4개의 링크가 있는 간단한 탐색 표시줄이 만들어집니다. 필요에 따라 스타일이나 추가 요소를 추가하여 추가로 사용자 지정할 수 있습니다.
<nav>
<a href="/">Home</a>
<span>My Feeds:</span>
<div class="my-feeds">
{#each feeds as feed}
{@const number = feeds.indexOf(feed)}
<div>
{number + 1}. <a href={`/feed/${feed.title}?url=${feed.url}`}>{feed.title}</a>
</div>
{/each}
</div>
</nav>
사용자가 직접 텍스트를 입력할 수 있는 새로운 기능을 추가하려면 애플리케이션의 사용자 인터페이스에 “슬롯” 구성 요소를 만들어야 합니다. 적절한 클래스 이름과 속성을 가진 HTML 요소를 추가하고 적절한 형식을 지정하기 위해 몇 가지 CSS 스타일을 작성하면 이 작업을 수행할 수 있습니다.이 작업이 완료되면 사용자는 페이지의 지정된 영역에 자신의 텍스트를 입력할 수 있어야 합니다.
<slot />
<style>
nav {
display: flex;
font-size: 18px;
background-color: white;
padding: 10px;
width: 98vw;
}
.my-feeds {
display: flex;
white-space: nowrap;
overflow-x: scroll;
margin-left: 30px;
gap: 10px;
}
span {
white-space: nowrap;
font-weight: 900;
margin-left: 20px;
margin-right: -5px;
}
</style>
로컬 저장소에 유효한 URL 추가
실제로 애플리케이션을 통해 RSS 피드의 존재를 확인한 후에는 나중에 참조할 수 있도록 해당 URL을 디바이스의 로컬 저장소에 저장하는 것이 좋습니다. 이를 위해 “addToLocalStorage.js” 파일에 액세스하여 다음 코드 스니펫을 추가할 수 있습니다:
export default function addToLocalStorage (title, url) {
let feedInLocalStorage = JSON.parse(localStorage.getItem("feeds")) || [];
localStorage.setItem(
"feeds",
JSON.stringify([...feedInLocalStorage, {title:title, url:url}])
);
}
본 구현에서는 최종 사용자의 피드 소스와 관련된 정보로 구성된 배열의 영구적인 표현을 저장하고 유지하기 위해 localStorage의 컨텍스트 내에서 `setItem` 함수를 사용합니다.
특정 RSS 피드에 대한 항목 목록 렌더링
다음 코드 스니펫을 `plusPage.server.js` 파일에 통합합니다:
import Parser from "rss-parser";
export async function load({url}){
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return {...feed};
}
제공된 코드 스니펫은 ‘+page.svelte’ 파일과 동시에 작동하는 스크립트와 관련이 있습니다. 이 특정 스크립트는 지정된 RSS 피드에서 가장 최신 업데이트를 검색합니다. “+” 페이지 템플릿 내에 이 기능을 통합하려면 해당 템플릿 내에서 가져오기를 통해 모멘트 라이브러리를 포함해야 합니다. 또한 검색된 정보를 원활하게 통합하기 위해 데이터 속성을 할당해야 합니다.
<script>
import moment from 'moment';
export let data;
</script>
해당 이미지가 있는 경우 정보의 시각적 표현을 생성하고 data.items 배열을 순회하여 관련 자료를 표시합니다:
{#if data.items}
{#each data.items as item}
{@const number = data.items.indexOf(item)}
<div class="item">
{number + 1}.
<a href={item.link}> {@html item.title}</a>
<div class="metadata">
<span>{item.author || item.creator || ""}</span>
<span>{moment(item.isoDate).fromNow()}</span>
</div>
<div class="snippet">{item.contentSnippet || ""}</div>
</div>
{/each}
{:else}
<p>Something went wrong...</p>
{/if}
웹사이트 제작의 마지막 단계는 최적의 사용자 경험을 제공하기 위해 웹사이트의 모양과 기능을 미세 조정하는 것입니다. 이 과정에서는 타이포그래피, 색 구성표, 레이아웃, 탐색 메뉴 등 다양한 디자인 요소를 신중하게 고려해야 합니다. 또한 이미지 압축, 코드 최소화 등의 방법을 통해 사이트 성능을 최적화하면 로딩 시간을 개선하고 전반적인 사용자 만족도를 높일 수 있습니다. 또한 SSL 인증서 및 정기 백업과 같은 보안 기능을 통합하는 것은 민감한 정보를 보호하고 비즈니스 연속성을 보장하는 데 매우 중요합니다. 마지막으로, 다양한 디바이스와 브라우저에서 사이트를 테스트하면 플랫폼이나 디바이스 유형에 관계없이 모든 사용자에게 원활하게 작동하는지 확인하는 데 도움이 됩니다. 이러한 단계를 수행함으로써 개발자는 시각적으로 매력적이고 기능성이 뛰어난 웹사이트를 제작하여 긍정적인 사용자 경험을 제공하고 온라인 벤트의 성공에 기여할 수 있습니다.
<style>
.snippet {
font-size: 18px;
}
a {
font-size: 25px;
text-decoration: underline;
color: black;
&:visited {
color: gray;
}
&:hover {
text-decoration: none;
}
}
.item {
display: flex;
flex-direction: column;
padding: 10px 10px;
}
.metadata {
display: flex;
gap: 10px;
margin: 10px 0px 10px 0px;
}
img {
width: 40px;
height: 40px;
}
</style>
SvelteKit을 사용하여 RSS 리더를 만드는 프로세스를 성공적으로 실행하여 기본적이면서도 기능적인 구현을 완료했습니다.
RSS는 어떤 용도에 적합할까요?
RSS는 웹사이트, 블로그, 뉴스 매체, 팟캐스트 등 여러 온라인 리소스를 관리할 수 있는 간소화된 접근 방식을 제공하여 하나의 중앙 위치에서 콘텐츠를 효율적으로 정리할 수 있는 수단을 제공합니다. 이를 통해 사용자는 깔끔한 인터페이스를 통해 선호하는 정보 소스를 최신 상태로 유지하면서 시간을 절약할 수 있습니다.
RSS는 콘텐츠를 집계하고 뉴스를 최신 상태로 유지하는 데 탁월한 수단이지만 실시간, 대화형, 고도의 보안 또는 고도로 개별화된 콘텐츠 상황에는 적합하지 않을 수 있다는 점을 고려하시기 바랍니다.