08 데이터 통신

1 XML과 JSON

1) XML

• Extensible Markup Language
• 인간과 응용프로그램간, 혹은 응용프로그램 간에 정보를 쉽게 교환하기 위해 만든 데이터 교환 포멧
• XML 기반: WHTML, MathML, SVG, XUL, RSS, RDF
• HTML이 데이터를 표현하는 언어라면 XML은 데이터를 전달하는 언어
• HTML과 달리 Tag가 미리 정의되어 있지 않음
• 특징: 표준성, 분리성, 단순성, 호환성, 수용성, 확장성, 정보검색의 정확성

2) JSON

• JavaScript Object Notation
• 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식
• 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용함
• 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐임
• 자바스크립트를 이용하여 JSON 형식의 문서를 쉽게 자바스크립트 객체로 변환할 수 있음
• JSON 문서 형식은 자바스크립트 객체의 형식을 기반으로 만들어짐

 

2 API

• 정의 및 프로토콜 집합을 사용하여 두 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘

 

 

1) Request

• 서버로 전달하는 메시지로, 서버 측 액션을 유도함
• 시작줄: HTTP 요청 메소드 + URI + HTTP 버전
• getContextPath() : 웹 어플리케이션의 컨텍스트 패스를 얻음
• getMethod() : get 방식과 post 방식을 구분할 수 있다
• getSession : 세션 객체를 얻는다
• getProtocol() : 해당 프로토콜을 얻는다
• getRequestURL() : 요청 URL을 얻는다
• getRequestURI() : 요청 URI를 얻는다

2) Response

• 시작줄: HTTP 버전 + 상태 코드 + 상태 텍스트
• getCharacterEncodinng() : 응답할 때 문자의 인코딩 현태를 구함
• addCookie(Cookie) : 쿠키를 지정함
• sendRedirect(URL) : 지정한 URL로 이동함, 특정상황에 조건에 따라 원하는 페이지로 이동하게 함

const $contentBox = document.querySelector("#contentBox");

const API_KEY = "AIzaSyD9RMpRQ1PLaVKBViB9yV0tZB1qngyx61Q";

function fetchVideo() {
    fetch(
        `https://youtube.googleapis.com/youtube/v3/videos?part=snippet%2C%20statistics&chart=mostPopular&maxResults=100&regionCode=Kr&key=${API_KEY}`
    ).then((response) => response.json())
    .then((result) => result.items.map(video => videoCardTemplate(video)))
    .catch((error) => console.log(error))
}
fetchVideo();


function videoCardTemplate(data) {

    const videoItem = `
    <div class="videoItemContainer">
        <a href=${`https://www.youtube.com/watch?v=${data.id}`}>
            <div class="videoThumbnailContainer">
                <img class="thumbnailImg" src=${data.snippet.thumbnails?.high.url} />
            </div>
        </a>
        <div class="videoDetailsContainer">
            <a class="videoChannelLink" href=${`https://www.youtube.com/channel/${data.snippet.channelId}`}>
                <img class="channelImg" src="https://yt3.ggpht.com/8T1OF6XdiT2t5fjitlxh5KzcrqSsTbrEUxCF0JOM_fCKgWCenl0X8lvmv6NGmLVDSVsP4wZvwQ=s68-c-k-c0x00ffffff-no-rj" />
            </a>
            <a href=${`https://www.youtube.com/watch?v=${data.id}`}>
                <div class="videoMetaDetails">
                    <div class="videoTitle">
                        <h3>${data.snippet.title}</h3>
                    </div>
                    <div class="videoMetaData">
                        <p class="metaText">Chilli Music</p>
                        <p class="extraMeta">
                        <span class="metaText viewCount">${
                            Number(data.statistics.viewCount) > 1000
                              ? (Number(data.statistics.viewCount) / 1000).toFixed(0) + "K"
                              : Number(data.statistics.viewCount)
                            } views</span>
                            <span class="metaText">${luxon.DateTime.fromISO(data.snippet.publishedAt).toRelative()}</span>
                        </p>
                    </div>
                </div>
            </a>
        </div>
    </div>
    `;

    $contentBox.insertAdjacentHTML('beforeend', videoItem);
}