[JS] 비동기 & API

동기 / 비동기

동기 방식 : 한 업무가 끝나야, 다음 업무가 시작한다.
비동기 방식 : 다른 업무를 기다리지 않고 진행한다.

비동기 방식을 사용하는 이유 : 더 효율적인 화면을 구성하기 위해서

이벤트 발생시 호출되는 예약 함수인 Callback 함수로 실행되는 것이 비동기 방식이다.
하지만, callback 함수로 비동기 방식을 구현하는 것은 가독성도 떨어져 유지 보수가 힘들다.
ES6(프로미스 객체) 출현 후 Async/await를 통해 쉽게 비동기 방식을 구현가능하다.

sync : 특정 동작이 끝난 이후, 다른 동작을 수행하기 시작 함
async : callback 함수 등록 처리 , 다른 동작을 수행, 특정 이벤트 발생시, callback 함수 수행됨

Promise

ES6때 도입하여 비동기 작업을 좀 더 편하게 할 수 있도록 해준다.
new Promise((resolve,reject) => 콜백함수);
1. pending 상태 : 대기 상태, resolve나 reject가 실행되기 전의 상태
2. fulfiled 상태 : 이행 상태, resolve 호출 시의 상태
3. rejected 상태 : 실패 상태, reject 호출 시의 상태

const pro = new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("저기요!");
      resolve();
      // reject(); : resolve 주석 처리 후 reject 실행 시 
      // "이거 주세요" 출력되지 않고 "못 고르겠음" 출력됨
    }, 1000);
  });
  
  console.log("점원: 어서오세요");
  console.log("점원: 주문하시겠어요?");
  console.log("손님: 메뉴 고르고 부를게요");
  console.log("점원: 고르시면 불러주세요");
  pro
    .then(() => {
    // resolve 실행
      console.log("이거 주세요");
    })
    .catch(() => {
    // reject 실행
      console.log("못 고르겠음...");
    });
  console.log("다른손님 서빙중...");

-----------------------------------------
결과  

점원: 어서오세요
점원: 주문하시겠어요?
손님: 메뉴 고르고 부를게요
점원: 고르시면 불러주세요
다른손님 서빙중...
저기요!
이거 주세요

Promise Chaining

Promise.then을 호출하면 자동적으로 Promise가 return 된다.

const wakeUp = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("일어나기");
      }, 1000);
    });
  };
const eatMeal = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("밥먹기");
    }, 1000);
  });
};
const drinkCoffee = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("커피 마시기");
    }, 1000);
  });
};
const sleep = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("sleep");
    }, 1000);
  });
};

// 프라미스 체이닝으로 리팩토링하기
wakeUp()
  .then((data) => {
    console.log(data);
    return eatMeal();
  }) // promise를 eatMeal에서 return하기 때문에 .then 구문을 한번 더 사용가능하다.
  .then((data) => {
    console.log(data);
    return drinkCoffee();
  })
  .then((data) => {
    console.log(data);
    return sleep();
  })
  .then((data) => {
    console.log(data);
  });


-------------------------------
1초마다 출력

일어나기
밥먹기
커피 마시기
sleep

Promise Chaining 응용

const plus = (number) =>{
    console.log(`number: ${number}`);
    return new Promise((resolve,reject) => {
        resolve(number + 1);
    });
};

console.log("start");

plus(0)
    .then((result) => { // number : 0
        console.log(result); // 1
        return plus(result);
    })
    .then((result) => { // number : 1
        console.log(result); // 2
        return plus(result);
    })
    .then((result) => { // number : 2
        console.log(result); // 3
    });

-------------------------------
 출력

start
number: 0
1
number: 1
2
number: 2
3
    

Await / Async

비동기를 동기적으로 실행되도록 합니다.

const eat = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("먹어!!!");
        },1000);
    });
};

const wait = async() => {
    console.log("기다려!!!!");
    const result = await eat(); // eat callback 함수 실행할때 동안 대기 : 동기적
    console.log(result); 
    console.log("잘했어!!");
};

wait();  // wait callback 함수 우선 실행

-------------------------------------
  출력
기다려!!!!
(1초후)
먹어!!!
잘했어!!

Ajax

Ajax 는 Asynchronous Javascript and XML의 뜻으로 비동기성으로 페이지 새로고침을 하지 않고 서버와 통신한다.

JSON

JSON은 Key-Value 구조로, XML을 대체하는 데이터 포맷이다. JS 구문을 따르지만, 독립적인 플랫폼을 쓴다. 비동기 서버통신을 위해 쓰인다. 클라이언트 통신할 때 사용한다. 클라이언트에서 객체를 주고 보낼 때 사용한다.

Axios

가장 널리 쓰이는 http 통신 라이브러리 , Promise 형태 return 한다.

const url = "https://jsonplaceholder.typicode.com/todos/"; 
// json으로 리턴하는 url

// axios.get(url)
// // axios를 사용하면 .data 값도 같이 가져옴
//     .then(res => console.log(res.data))
//     .catch(res => console.log(err));

const gerSamoleData = async() => {
    // promise에서 제공하는게 아닌 그냥 제공되는 문법
    // 성공할 때 try 실행 실패할 때 catch 실행
     try{
        // async/await 안 쓸시 출력 : undefined
        const res = await axios.get(url);
        if(res.data) console.log(res.data);
    }catch{
        console.log(err);
    }
};

gerSamoleData();

Fetch API

URL : 서버의 주소 / 서버 API 의 구조입니다. 서버로부터 간략하게 정보를 JSON 형태로 가져온다. 객체를 Promise 형태로 반환한다.

const url = "https://jsonplaceholder.typicode.com/todos/";
// json으로 리턴하는 url


// fetch의 리턴값은 promise 이므로 .then과 .catch 사용 가능
fetch(url)
    .then(response => {
// response는 각종 정보의 결과, 통신 결과(통신 성공시 status = 200)
        if(response.status === 200) {
// .then이 한번 더 실행된 것을 보면 response.json()도 promise 값
            return response.json();
        }else{
            console.error(`HTTP error! status: ${res.status}`);
        }
    })
    .then(jsonData => {
        console.log(jsonData);
    })
    .catch(err =>{
        console.log(err);
    });

Rest API

Rest : 클라이언트(프론트엔드)에서 서버(백엔드)에 CRUD를 해달라고 JSON 형태로 요청(request)한다.
서버에서 JSON 형태로 응답(response)로 받고 DB/API로 접근 후 요청에 맞는 정보를 JSON 형태로 클라이언트로 재 전송한다.

CRUD : Create, Read, Update, Delete

HTTP Request Method

1. Post : Create로 새로운 리소스를 생성할 때 사용한다. Body 부분에 데이터를 넣어서 보안상 안전한다. ex) 게시글 작성하기

2. GET : Read로 데이터를 읽거나 검색할 때 주로 사용한다. URL에 데이터를 붙여서 보내고, 캐싱이 가능하다. ex) 검색 결과 확인하기

3. PUT : Update로 전체 데이터를 변경 및 갱신할 때 사용한다. ex) 게시글 수정하기

4. PATCH : Update로 일부 데이터를 변경할 때 사용한다.

5. DELETE : Delete로 리소스를 삭제할 때 사용한다. ex) 게시글 삭제하기