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 피드와 호환되는지 확인하는 것입니다.

이 글도 확인해 보세요:  Python을 사용하여 할 일 목록 프로그램 만들기

결론적으로 의료, 교육, 비즈니스 등 다양한 분야에서 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 리더를 만드는 프로세스를 성공적으로 실행하여 기본적이면서도 기능적인 구현을 완료했습니다.

이 글도 확인해 보세요:  성능 최적화를 위한 자바스크립트 팁과 요령 10가지

RSS는 어떤 용도에 적합할까요?

RSS는 웹사이트, 블로그, 뉴스 매체, 팟캐스트 등 여러 온라인 리소스를 관리할 수 있는 간소화된 접근 방식을 제공하여 하나의 중앙 위치에서 콘텐츠를 효율적으로 정리할 수 있는 수단을 제공합니다. 이를 통해 사용자는 깔끔한 인터페이스를 통해 선호하는 정보 소스를 최신 상태로 유지하면서 시간을 절약할 수 있습니다.

RSS는 콘텐츠를 집계하고 뉴스를 최신 상태로 유지하는 데 탁월한 수단이지만 실시간, 대화형, 고도의 보안 또는 고도로 개별화된 콘텐츠 상황에는 적합하지 않을 수 있다는 점을 고려하시기 바랍니다.

By 김민수

안드로이드, 서버 개발을 시작으로 여러 분야를 넘나들고 있는 풀스택(Full-stack) 개발자입니다. 오픈소스 기술과 혁신에 큰 관심을 가지고 있고, 보다 많은 사람이 기술을 통해 꿈꾸던 일을 실현하도록 돕기를 희망하고 있습니다.