API연동

API연동

---

1. 비동기 작업의 이해

서버에서 데이터를 주고받는 시간이 즉시 처리되는 것이 아니라
응답을 받는 시간이 있기 때문에 이 과정을 비동기적으로 처리하게 됩니다.
만약 작업을 동기적으로 처리한다면 요청이 끝날 때까지
중지 상태가 되기 때문에 작업에 있어서 비효율적 입니다.

function printMe() {
    console.log("Hi")
}
setTimeput(printMe, 3000);
console.log("대기 중...")

// 대기 중...
// Hi

• 비동기 함수를 흔히 사용하는 방법 콜백함수

1.1. 콜백함수

function increase(number, callback) {
    setTimeout (()=> {
        const result = number + 10;
        if (callback) {
            callback(result);
        }
    }, 1000)
}

increase(0, result => {
    console.log(result);
});

• 콜백 지옥

function increase(number, callback) {
    setTimeout (()=> {
        const result = number + 10;
        if (callback) {
            callback(result);
        }
    }, 1000)
}

console.log("작업 시작");
increase(0, result => {
    console.log(result);
    increase(0, result => {
    console.log(result);
        increase(0, result => {
        console.log(result);
            increase(0, result => {
            console.log(result);
            console.log("작업완료")
            });
        });
    });
});

1.2. Promise

콜백 지옥 같은 코드가 형성되지 않게 하는 방안으로 ES6에 도입된 기능입니다.
.then을 사용하여 그다음 작업을 이어받기 때문에 콜백 지옥이 형성되지 않습니다.

function increase(number) {
    const promise = new Promise((resolve, reject) => {
        //resolve는 성공, reject는 실패
        setTimeout(()=> {
            const result = number + 10;
            if (result > 50) {
                //50보다 높으면 에러 발생시키기
                const e = new Error('NumberTooBig')
                return reject(e)
            }
        resolve(rejult);
        }, 1000);
    });
    return promise;
}

increase(0)
    .then(number=>{
        //Promise에서 resolve된 값은 .then을 통해 받아 올 수 있음
        console.log(number);
        return increase(number)
    })
    .then(number=>{
        console.log(number);
        return increase(number)
    })
    .then(number=>{
        console.log(number);
        return increase(number)
    })
    .then(number=>{
        console.log(number);
        return increase(number)
    })
    .then(number=>{
        console.log(number);
        return increase(number)
    })
    .catch(e => {
        console.log(e);
    })

2. axios로 API 호출해서 테이터 받아오기

현재 가장 많이 사용되고 있는 자바스크립트 HTTP클라이언트로

3. API 키 발급받기

4. 뉴스 뷰어 UI 만들기

5. 데이터 연동하기

6. H카테고리 기능 구현하기

7. 리엑트 라우터 적용하기

8. tsePromise 커스텀 Hook 만들기