어디서나 최신 DEV 게시물 포함 💌

DEV.to API를 사용하여 최근 게시물 목록을 삽입하는 방법을 살펴보겠습니다. 우리는 또한 그들의 긍정적인 반응에 따라 분류할 것입니다! 필요한 것은 클라이언트 측 JavaScript의 스플래시입니다. API는 아직 문서화되지 않았으며 변경될 가능성이 있지만 이 게시물을 최신 상태로 유지하겠습니다.

다음은 우리가 작성하게 될 작은 라이브러리를 사용하는 test page입니다. 확장 가능한 항목을 유지하기 위해 일반 목록을 만들 것입니다. repository으로 바로 건너뛰어 최종 코드를 확인할 수도 있습니다.

DEV API는 사용하기 얼마나 쉬운가요?

. 기사 경로는 https://dev.to/api/articles?username=$user 입니다. 원래는 기본값인 최신 30개 이상의 게시물을 가져오는 실험을 했습니다. 이것은 &page=$pageNum를 추가하여 수행할 수 있지만 여러 페이지를 요청하면 지연이 발생합니다. 게시물의 페이지 수를 알 수 없기 때문에 빈 페이지에 도달할 때까지 계속 진행해야 합니다. 늦게 로드되는 목록은 훌륭한 UX를 만들지 않습니다.

Fetch API을 사용하여 사용자의 브라우저에서 요청을 만들어 보겠습니다.

fetch(`https://dev.to/api/articles?username=healeycodes`)
    .then(function (response) {

        // Parse it as JSON
        return response.json();
    }).then(function (posts) {

        // An array of posts
        console.log(posts);
    })

좋아 보여. 코드에 더 쉽게 액세스할 수 있도록 일부JSDoc 주석으로 이를 정리하겠습니다. 또한 함수로 래핑합니다.

/**
 * Get a DEV user's post objects.
 * Only fetches previously 30 posts. Using `&page=X` is too slow.
 * @param {string} username - DEV username, e.g. 'ben'.
 * @returns {array} User's post objects.
 */
function getPosts(username) {

    // Assume that `api` is defined as a constant
    return fetch(`${api}/articles?username=${username}`)
        .then(function (response) {
            return response.json();
        })
        .then(function (posts) {

            // Sort the array in place with a compare function
            return posts.sort((a, b) => b.positive_reactions_count - a.positive_reactions_count);
        });
}

30개의 게시물 목록은 다소 많을 수 있습니다. 나중에 잘라보겠습니다. 지금은 compareFunction 을 사용하여 어레이를 제자리에 정렬한 방법에 주목하십시오. 우리는 속기 버전을 사용했습니다. 비교 함수는 일반적으로 두 매개변수를 비교할 때 -1 , 1 또는 0 를 반환하여 작성됩니다. 그러나 중요한 것은 비교 기능이 일관된다는 것입니다.

CSS로 스타일을 지정할 수 있는 간단한 목록을 만들고 싶습니다. 합리적인 클래스 이름은 dev-feed-list 및 dev-feed-item 일 수 있습니다. 우리는 이 목록을 첨부할 요소가 필요하므로 라이브러리가 취하는 인수가 되어야 합니다. JavaScript를 사용하면 다음과 같이 클래스를 추가하고 목록을 만들고 즉시 첨부할 수 있습니다.

// An unordered list
const list = document.createElement('ul');

// A list item
const item = document.createElement('li');
item.classList.add('dev-feed-item');
item.innerText = 'I am a list item.';

// Let's create a relation between them
list.appendChild(item);

// Now between the list and the document, rendering the list
// body -> ul -> li
document.body.appendChild(list);

포함된 목록을 구성할 요소를 빌드하는 함수를 만들어 보겠습니다. 이전의 getPosts 함수를 사용하여 정렬된 게시물 배열을 가져옵니다.

/** 
 * Creates a DEV feed of posts.
 * @constructor
 * @param {Element} elem - Place list of posts inside this element.
 * @param {string} username - DEV username, e.g. 'ben'.
 * @param {number} numberOfPosts - Number of posts to list. 
 */
function createFeed(elem, username, numberOfPosts = 5) {
    const feed = document.createElement('ul');
    feed.classList.add('dev-feed-list');
    getPosts(username)

        // With our posts array
        .then(function (posts) {
            posts.length = numberOfPosts;
            posts.forEach(function (post) {

                // We create an element for each item
                const item = document.createElement('li');
                item.classList.add('dev-feed-item');

                // As well as a link for users to click through
                const link = document.createElement('a');
                link.href = post.url;
                link.innerText = post.title;

                // ul -> li -> a
                item.appendChild(link);
                feed.appendChild(item);
            });

            // Attach the list of posts, rendering it
            elem.appendChild(feed);
        });
}

이 모든 것을 스크립트로 묶으면 createFeed(element, username, numberOfPosts)를 호출하여 목록을 생성할 수 있습니다. 여기서 element는 목록의 컨테이너이고 username는 유효한 DEV 사용자이고 numberOfPosts는 원하는 게시물 수입니다. 렌더링합니다.

맞춤 수의 게시물을 가져올 수 있도록 허용하고 합리적인 CSS 클래스를 사용함으로써 우리 라이브러리는 확장 가능하고 작은 모듈로 사용할 수 있습니다!


프로그래밍 및 개인 성장에 대해 150명 이상의 사람들이 내newsletter에 가입했습니다!

기술에 대해 트윗합니다.