[뉴스 타임즈] API 에서 받아온 데이터를 UI에 보여주기 2

자 이번엔 무엇을 할꺼냐묜!

데이터를 받아오는 도중에 데이터가 null 일 경우나 비어있을 경우 참 난감하죠?

그럴 때 대체해줄 사진이나, 글을 입력해주는 것과

기사가 올라온 시간을 좀 더 트뤤디~ 스럽게 바꾸는 방법을 알려드릴게요 오홍홍

자 먼저 데이터가 null일 경우 어떻게 할랭?..

어떻게 해야할까요? 먼저 당연히 map 안에서 반복하게끔 해야겠죠? ㅋㅋ

저는 모두 If 문을 해주었습니당.

    newsHTML = news.map((newsItem) => {
        if(newsItem.urlToImage === null){
            newsItem.urlToImage = '../images/noimg_fac.gif'
        };
        if(newsItem.title === null || newsItem.title === ""){
            newsItem.title = '제목 정보가 없습니다.'
        };
        if(newsItem.content === null || newsItem.content === ""){
            newsItem.content = '기사 내용이 없습니다.'
        }
        if(newsItem.publishedAt === null || newsItem.publishedAt === ""){
            newsItem.publishedAt = '기사 날짜가 없습니다.'
        }

자 요렇게 return 하기 전에 조건문을 먼저 들릴 수 있도록

return 전에 if 문을 넣어주었구용.

첫번째로 , 이미지가 널이라면, (거의 대부분 비어있는 값 대신 null 이 나오더라구요?)

할튼 null 일 경우에 대체 할 이미지 경로를 넣어줍니다. 아주 쉽죠? 

그럼 저게 true 가 될 경우에는 저 이미지 경로로 들어가서 저 이미지를 보여줄 것이에요. ㅎㅎ

그 뒤부터는 쉽죠?? 내용이 null 이거나 빈 값일 경우엔 저렇게 나오도록 해주었어요 easy.

결과물을 볼까요?

---

자 그럼 이제는 기사 올린 시간을 좀 더 투렌뒤 하게 만들기 위해서 저는

moment.js 라는 오픈소스 라이브러리를 사용해줄거에요 !! 우앙

https://momentjs.com/

Moment.js | Home

요 라이브러리는용..

시간을 다양하게 보여줄 수 있는 코드를 사용할 수 있도록 해준다고 합니더 (와우)

인스타그램이나 페이스북같은 곳에서도 많이 쓰나봐요 ?

그래서 이 라이브러리를 사용해서, 저희의 기사 시간을 멋있게 보이도록 해줄것입니당

예를 들면 (3일 전) , (3 days ago) 이런 느낌으로 !!

일단 요기서

Docs 를 클릭해줍니다.

그리고 Using Moment 클릭!

그리고 이 쪽을 보시면 밑에 링크 첫번째꺼 있죠? 얘를 클릭해줄거에요

왜냐면 우리는 cdn 링크로 라이브러리를 사용할 것이기 때문!

들어가면 엄청 뭐가 많아요 저희는 2번째꺼를 갖고올겁니당 

제가 오류가 떠서 다 들고 하나씩 하나씩 해보니까 두번 째 거가 오류가 안나오더라구요? ㅎㅎ

저기서 두번째 아이콘을 누르면 script src 가 복사가 됩니당 good!

그리고 </body> 끝나기 전에 붙여넣기 해주면 끝!

그리고 사용해줄게요

        return `<div id="news">
        <div id="news_img">
            <img src="${newsItem.urlToImage}" alt="">
        </div>
        <div id="news_cont">
            <h2>${newsItem.title}</h2>
            <p id="news_say">
                ${newsItem.content}
            </p>
            <p id="news_date">
                ${moment(newsItem.publishedAt).fromNow()}
            </p>
        </div>
    </div>`
    }).join('');

return 하는 html 에다가 moment()에 시간을 넣어주시공~

그리고 fromNow() 함수를 써주시면 3일전 또는 영어로 3 days ago 이렇게 나와요

또 다른 느낌으로도 해볼 수 있는데, 저는 이렇게 하도록 할게요

이 라이브러리 홈페이지 홈 부분에 예시가 나와있으니까 참고하심 될듯 싶네요 ㅎㅎ

결과물은?

짠!