React 부트캠프 12일차 TIL

🖥️ 자바스크립트 라이브 강의 3일차 실습 - 비동기 처리 / DOM 제어

⭐ 3초 뒤 실행되는 함수 만들기

// 3초 뒤 url 이 API_URL과 같다면 성공으로 처리를, 아닐 경우 실패로 처리를 하게 해주세요
// getData(API_URL), getData(WRONG_URL) 각각 성공과 실패에 대한 처리를 코드작성해주세요.

const API_URL = "https://open.api.com/v1/data";
const WRONG_URL = "https://open.api.com/v1/wrong";

// 작성 답안
function getData(url) {
    return new Promise((resolve, reject) => {
        setTimeout(()=> {
        if ( url === API_URL ){
            resolve("성공")
        } else reject("실패");
    }, 3000);
});
}

getData(API_URL)
    .then(result=> {
        console.log(result);
    })
    .catch(error => {
     	console.error(error);
    });

getData(WRONG_URL)
    .then(result=> {
        console.log(result);
    })
    .catch(error => {
        console.error(error);
    });

제시된 getData 함수를 완성하는 문제였다. url을 인자로 받아 setTimeout으로 3초 뒤에 실행되도록 설정, 조건에 맞춰 프로미스를 반환하도록 만들었다. 그리고 .then .cath 메소드를 사용해서 값이 출력되도록 만들었다.

⭐ 3초 뒤 실행되는 함수를 async, await 사용해서 만들기

// async await 를 사용한 코드로 변경해보기
const API_URL = "https://open.api.com/v1/data";
const WRONG_URL = "https://open.api.com/v1/wrong";

function promise(url) {
    return new Promise((resolve, reject) => {
    setTimeout(() => {
        if ( url === API_URL ) {
            resolve("성공")
        } else reject ("실패")
    }, 3000);
});
}

async function getData(url) {
    try {
    const answer = await promise(url);
    console.log(answer);
    } catch (error) {
        console.error(error);
    }
};

getData(API_URL);
getData(WRONG_URL);

1번 문제와 똑같지만 이번엔 async, await을 사용해야만 했다.

url을 인자로 받는 promise라는 함수를 선언하고 1번과 똑같이 3초 뒤 프로미스를 반환하는 코드를 추가했다. 그리고 getData 함수를 만들어 await를 통해 promise함수를 불러왔다.

console.log(await promise(url)); 이렇게 작성해도 정상적으로 작동이 되는데, 어제 강의 자료에서는 반환값을 변수에 할당에서 사용하셨길래 튜터님께 찾아가서 여쭤봤다. 그런데 그냥 정상적으로 작동이 된다면 콘솔에 바로 찍어도 된다고 하셨다. 하지만 실무에서는 반환값을 여기저기 많이 사용하니까 변수에 할당하는 게 자연스럽게 버릇이 된다고..!

⭐ fetch로 API요청하고 데이터로 img 태그 생성하기

        let API_URL = `https://api.thecatapi.com/v1/images/search`;

        let options = {
            method: "GET",
            headers: {
                accept: "application/json",
                "x-api-key":
                    "live_8GfbTk0GMtgRdbxUB7XcuYzuMmfShEHGHNSnDo26DDgJDVUHDWqzJ25rJKpsSqud",
            },
        };

        fetch(API_URL, options)
            .then(response => response.json())
            .then(data => {
                const imageContainer = document.getElementById('imageContainer');
                data.forEach(cat => {
                    const img = document.createElement('img');
                    img.src = cat.url;
                    imageContainer.appendChild(img);
                });
            })

의외로 이 문제가 제일 오래 걸렸다. fetch랑 DOM은 실습으로 많이 써봐서 뚝딱 될 줄 알았는데... 실습에서 썼던 코드랑 다르게 작성하려니 오류가 많았다ㅋㅋㅋ 우선 createElement 안쓰고 그냥 바로 append에다가 HTML 코드를 쓰려고 했는데 실패! 문자열로 된 HTML은 DOM 요소에 직접 추가할 수 없었다. innerHTML을 이용해야 한다는 것.. 근데 그건 싫어서 img 태그를 가진 요소를 추가하고 이미지의 src에 api를 통해 불러온 url을 할당했다.

지금 튜터님이 올려주신 답안 파일을 보다가 안 사실.

해당 API는 ..

애초에 이미지를 하나씩만 불러온다...
나는 당연히 지금까지 써온 API처럼 여러 이미지가 배열에 들어가있는 줄 알아서 forEach를 쓴건데.. 그럴 필요가 없었던 것.

      fetch(API_URL, options)
        .then((response) => response.json())
        .then((data) => {
          const imageContainer = document.getElementById("imageContainer");
          const caturl = data[0].url;
          const img = document.createElement("img");
          img.src = caturl;
          imageContainer.appendChild(img);
        });

이렇게 아예 인덱스를 지정해서 url를 뽑아도 되는 거였다. 대박;

⭐ <선택 문제> 가장 먼저 완료되는 프로미스 반환값 출력하기

function taskA() {}

function taskB() {}

function taskC() {}

// 가장 먼저 완료된 작업을 찾아서 반환되는 값을 출력하세요.

Promise.race([taskA(), taskB(), taskC()]).then((first) => {
    console.log(first);
})

해당 문제는 시간이 남으면 풀으라는 선택 문제였다. race를 강의에서 알려주진 않았지만 알고 있으면 좋을 것 같아서 추가하신 것 같다.
rece는 배열 안의 프로미스 중 가장 먼저 완료되는 프로미스를 반환한다. 반환값을 바로 출력되도록 만들었다. 처음 안 메소드였는데 생각보다 간단해서 오! 했다. 프로미스는 진짜 너무 어려운데.. 메서드가 이렇게 쉽다니...