웹개발 종합반 프로젝트 - 02 뉴스 API

프로젝트의 메인 부분에서 오른쪽에는 뉴스 API를 가져와서 총 4가지의 뉴스를 보여주려고 했다.

처음 세운 계획은 아래와 같다

- 틀 만들기
- 카드 만들고 카드에 뉴스 api 가져오기
- 뉴스 업데이트는 어떻게?
- 뉴스는 시간마다 업데이트 주고싶은데 db가 필요할까?

 

먼저 틀을 만들었다. 

처음에는 Bootstrap에서 가져오려 했으나, Card가 마음에 들지않고, 수정을 많이해야 했기때문에 그냥 처음부터 만들었다.

아래 코드는 Ajax로 API를 받아오는거까지 같이있다.

<div class="news-box">
    <a href="${url}" target="_blank">
        <!-- News Title-->
        <div class="news-title">
            <div class="news-logo">
            <span class="news-channel">
              <img id="news-logo"
                   src="http://www.google.com/s2/favicons?domain=${url}"
                   alt="logo">
              ${source}</span>
            </div>
            <span class="news-time">${published_at.substring(0, 10)}</span>
        </div>
        <!-- News Main-->
        <div class="news-main">
            <div class="news-body">
                <img id="news-image" width=150px
                     src="https://transpower.ca/wp-content/themes/consultix/images/no-image-found-360x250.png"
                     alt="image">
                <div class="news-contents">
                    <div class="news-contents-title">${title}</div>
                    <p class="news-contents-contents">${description}</p>
                </div>
            </div>
        </div>
        <!-- News Author-->
        <div class="news-author">author: ${author}</div>
    </a>
</div>

CSS는 아래와 같다.

새로 배운 CSS는 ellipsis를 사용해서 문자열이 일정 갯수를 넘으면 ... 처리가 가능하다.

.news-box{
    width: 100%;
    max-width: 500px;
    border: 2px solid black;
    margin: 5px auto 5px auto;
    padding: 5px;
}

.news-title {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.news-body{
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.news-contents-title{
    width: 300px; /* 너비는 변경될수 있습니다. */
    text-overflow: ellipsis; /* 위에 설정한 300px 보다 길면 말줄임표처럼 표시합니다. */
    white-space: nowrap; /* 줄바꿈을 하지 않습니다. */
    overflow: hidden; /* 내용이 길면 감춤니다 */
    display: block; /* ie6이상 현재요소를 블럭처리합니다. */

    font-size: 20px;
    font-weight: 700;
}

.news-contents-contents{
    width: 300px; /* 너비는 변경될수 있습니다. */
    text-overflow: ellipsis; /* 위에 설정한 300px 보다 길면 말줄임표처럼 표시합니다. */
    white-space: nowrap; /* 줄바꿈을 하지 않습니다. */
    overflow: hidden; /* 내용이 길면 감춤니다 */
    display: block; /* ie6이상 현재요소를 블럭처리합니다. */
}

새로 배운 자바스크립트는

.substring(0, 10)

문자열.substring(시작index, 끝index) - 문자열을 나타내고싶은 부분만 나타낼수있다.

Date를 출력할때 사용했다.

 

URL 에서 Favicon을 가져오는 방법

url에 링크를 쓰면된다.

http://www.google.com/s2/favicons?domain=url

아래 코드는 Favicon을 가져와서 가로 길이를 16px로 맞춰주는 코드이다.

<img id="news-logo" width=16px src="http://www.google.com/s2/favicons?domain=${url}" alt="logo">

 

전체적인 Ajax로 API Get 하는 코드

 $.ajax({
            type: "GET",
            url: "http://api.mediastack.com/v1/news" +
                "?access_key=키" +
                "&countries=us",
            data: {},
            success: function (response) {
                let rows = response['data']
                for (let i = 1; i < 5; ++i) {
                    let author = rows[i]['author']
                    let title = rows[i]['title']
                    let description = rows[i]['description']
                    let published_at = rows[i]['published_at']
                    let source = rows[i]['source']

                    let image = rows[i]['image']
                    let url = rows[i]['url']

                    console.log(url)

                    let html_temp = ``;

                    // If Image is available
                    if (image != null) {
                        html_temp = `<div class="news-box">
                                        <a href="${url}" target="_blank">
                                        <!-- News Title-->
                                        <div class="news-title">
                                            <div class="news-logo">
                                                <span class="news-channel">
                                                    <img id="news-logo" width=16px src="http://www.google.com/s2/favicons?domain=${url}" alt="logo">
                                                    ${source}</span>
                                            </div>
                                            <span class="news-time">${published_at.substring(0,10)}</span>
                                        </div>
                                        <!-- News Main-->
                                        <div class="news-main">
                                            <div class="news-body">
                                                <img id="news-image" width=150px src=${image} alt="image">
                                                <div class="news-contents">
                                                    <div class="news-contents-title">${title}</div>
                                                    <p class="news-contents-contents">${description}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- News Author-->
                                        <div class="news-author">author: ${author}</div>
                                        </a>
                                    </div>`
                    } else {
                        html_temp = `<div class="news-box">
                                        <a href="${url}" target="_blank">
                                        <!-- News Title-->
                                        <div class="news-title">
                                            <div class="news-logo">
                                                <span class="news-channel">
                                                    <img id="news-logo" src="http://www.google.com/s2/favicons?domain=${url}" alt="logo">
                                                    ${source}</span>
                                            </div>
                                            <span class="news-time">${published_at.substring(0, 10)}</span>
                                        </div>
                                        <!-- News Main-->
                                        <div class="news-main">
                                            <div class="news-body">
                                                <img id="news-image" width=150px src="https://transpower.ca/wp-content/themes/consultix/images/no-image-found-360x250.png" alt="image">
                                                <div class="news-contents">
                                                    <div class="news-contents-title">${title}</div>
                                                    <p class="news-contents-contents">${description}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- News Author-->
                                        <div class="news-author">author: ${author}</div>
                                       </a>
                                    </div>`
                    }

                    // add html
                    $('#news').append(html_temp)
                }

            }
        })

이번에도 Image에 null인 부분이 있어서 그 부분은 대체이미지를 사용했다.

 

궁금했던 것은 이번에는 없던거 같다.

 

 

현재 진행상황