지브리 API 불러오기

라이브러리

• CDN(콘텐츠 전달 네트워크 시스템) 방식 - 특정 지역마다 네트워크를 뿌리는 것.

• module 방식 - import

• include는 옛날 방식이라 지양하는 것이 좋음.

API

• 애플리케이션(응용 프로그램) - 특정한 일을 하도록 만들어진 프로그램. ex) 카톡, 브라우저

• 인터페이스 - 접점, 두 물체간 서로 정보를 주고받을 수 있는 경계선. 인터페이스는 나와 홈페이지가 주고받는데 이 정보를 사용자에게 명확하게 전달하기 위해 사용하기 때문에 인터페이스라는 말을 사용함

통신 방식

• 동기 방식 - 같은 기간, 흐름에서 작업하는 것. JS 기본값 * 장점 - 컨트롤이 쉬움. * 단점 - 많을수록 프로그램이 뚝뚝 끊김.

• 비동기 방식 - 다른 기간, 흐름에서 작업하는 것. * 장점 - 이벤트를 진행하고 있다가 중간에 들어와도 괜찮음. * 단점 - 흐름이 많을 수록 컨트롤하기 어려움.

비동기 방식

1. callback - 다른 함수에게 인자로 전달되어 어느 시점에 실행될 수 있도록 던져주는 함수. 콜백지옥 형성.

2. promise - 어떤 값이 생성 되었을 때 그 값을 대신하는 대리자.

3. async, await - Await 모드는 Promise 객체를 받아 처리하고, 만약 비동기 함수가 아닌 동기적 함수라면 리턴 값을 그대로 받음. Async 함수는 Promise가 없으면 의미 없음. Promise 객체를 통해 비동기적으로 처리된 내용을 동기적인 코드 진행 순서로 보여주는 역할.

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function getApple() {
  await delay(2000);
  return "👍";
}

async function getBanana() {
  await delay(1000);
  return "😍";
}

async function pickAllFruit() {
  return Promise.all([getApple(), getBanana()]).then((fruits) =>
    fruits.join("+")
  );
}

pickAllFruit().then(console.log); //👍+😍

Ajax

fetch

let promise = fetch(url, [options])

• url - 접근하고자 하는 URL

• options - 선택 매개변수, method나 header 등을 지정할 수 있음. options에 아무것도 넘기지 않으면 요청은 GET 메서드로 진행되어 url로부터 콘텐츠가 다운로드 됨.

hash

//현재 URL이 http://www.example.com/test.htm#part2라고 가정
var x = location.hash;
console.log(x) //#part2

REST API

• URI - 자원을 구조와 함께 나타내는 형태의 구분자. 동사가 아닌 명사로 이루어져야 함. ex) 자원을 구별하는 ID는 ‘/groups/:group_id’.

• CRUD - Create(생성), Read(읽기), Update(갱신), Delete(삭제).

• put은 통채로 정보를 바꿀 때, patch는 일부분 특정 방식으로 변경할 때 사용.

DOM

DOM createElement

• appendChild - 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙임.

JSON.parse()

const json = '{"result" : true,"count" : 43}';
const obj = JSON.parse(json);

console.log(obj.count); //43

forEach()

Vim 단축키

지브리 API 불러오기

API to HTML 실습

const uri = "https://ghibliapi.herokuapp.com/films/58611129-2dbc-4a81-a72f-77ddfc1b1b49";

async function fetchGhibliData() {
    const res = await fetch(uri);
    const jasonData = await res.json();
    return jasonData;
}

결과보기

function createGhibliElement(ghibliData) {
    const $ghibliElement = document.createElement('div');

    const $title = document.createElement('h2');
    $title.textContent = ghibliData.title;
    const $originTitle = document.createElement('span')
    $originTitle.textContent = ghibliData.original_title;

    $ghibliElement.appendChild($title);
    $ghibliElement.appendChild($originTitle);

    return $ghibliElement;
}

async function render() {
    const ghibliData = await fetchGhibliData()
    console.log(ghibliData);
    const $ghibliElement = createGhibliElement(ghibliData)
    const $container = document.querySelector('.container');
    $container.appendChild($ghibliElement);
}

render();

결과보기

API로 작품 보여주기

• api로 받아온 정보로 요소를 생성하여 HTML에 삽입하는 방식.

• 사용된 핵심 속성 : fetch, createElement, appendChild, forEach, async, await

• dataset - 읽기 전용 속성

마치며