[HTTP] http 통신 (GET), 비동기, promise, async/await

Client vs Server

- web application

React App (Client)       ----(HTTP 통신)----       server         ----------      Database(저장소)

클라이언트에서 데이터 베이스의 데이터를 가져오고 수정하고 넣기 위해서는 직접 접근하면 안되고, 가운데 서버를 거쳐서 통신해야한다.

클라이언트와 서버가 통신하는 프로토콜을 HTTP라고 한다.

HTTP?

-> HyperText Transfer Protocol

웹에서 정보를 주고 받을 수 있는 프로토콜으로, HTML 문서와 같은 리소스를 주고 받는데 사용합니다.

http 요청과 응답을 보면 아래와 같은 것들이 있다.

- version of the protocol (http3.0까지 있지만 우리는 1.1, 2.0을 자주 사용한다.)

- status code

- status message

- Headers 

... 

 

HTTP 요청 보내기

google 에 free api를 검색하면 무료로 사용할 수 있는 api들이 있다.

GET request

비동기 (콜백, 프로미스, async/await)

- url

- fetchAPI (브라우저에서 제공)

- header (옵션)

News API에서 apikey를 발급받고, react project에서 news 기사를 가져온 후 fetch하여 데이터를 화면에 뿌려보겠다.

import {React, useEffect, useState} from 'react';
import NewsItem from '../NewsItem';

const NewsList = () => {
  const [news, setNews] = useState([])
  useEffect(() => {
    getNewsList();
  }, [])
  const getNewsList = () => {
    fetch('https://newsapi.org/v2/everything?q=tesla&from=2023-07-21&sortBy=publishedAt&apiKey=발급받은 api 키')
      .then((response) => 
        response.json()
      )
      .then((data)=> {
        console.log(data)
        setNews(data.articles)
      })
  }
  return (
    <div>
      {news.map((news) => <NewsItem {...news} />)}
    </div>
  );
};

export default NewsList;

fetch API를 통해 해당 리소스 경로인 url로 호출하고 받은 response를 json()형태로 바꿔서 news에 set해준다.

그리고 news를 map함수를 통해서 NewsItem 컴포넌트를 하나씩 뿌려준다.

fetch API는 Request, Response 객체, 그리고 기타 네트워크 요청에 관련된 것들을 사용한다.

(CORS, HTTP Origin 헤더 행동 등 개념도 포함한다.)

브라우저에서 기본 제공하는 API이다.

반환 값은 Response로 이행하는 Promise이다. 서버가 헤더를 포함한 응답을 하는 순간 이행한다. 이는 서버가  HTTP 오류 응답 코드로 응답해도 이행한다는 뜻이다.

??비동기??

하나의 프로세스가 완료되기 전에 다음 프로세스를 시작하는 방식이다.

function func1() {
	console.log('func1');
    
    func2();
}

function func2() {
	setTimeout(() => {
    	console.log('func2');
    }, 0);
    
    func3();
}

function func3() {
	console.log('func3');
}

func1();

위와 같은 코드가 있다고 하면,

func1()이 수행이 되면, 

func1

func3

func2

로 결과가 찍히는 것을 확인할 수 있다.

브라우저 런타임에서 javascript engine, 실행컨텍스트, 힙, WEB API, callback queue, event loop가 있는데,

callback함수와 같은 비동기 함수가 실행되면 callback queue로 보내준 다음에 실행 컨텍스트가 비어 있으면, callback queue에서 빼서 실행 컨텍스트에서 실행을 한다. (이 때, callback queue에서 빼주는 역할은 event loop가 한다.)

위의 예제에서 setTimeout은 콜백함수이기 때문에 func2가 바로 찍히지 않고 콜백 큐에 넣어져 있는 상태고, func3가 실행 컨텍스트로 들어가서 func3가 찍히고 실행 컨텍스트가 비고 나서 callback queue에서 event loop를 통해서 실행 컨텍스트에 넣어져서 func2가 찍히는 것을 확인할 수 있다.

??콜백함수??

callback 함수는 setTimeout()과 같이 특정 함수 안에 매개 변수 형태로 전달 받은 함수를 의미한다.

function Callback(cb) {
	console.log('콜백 함수 안');
	cb();
}

Callback(() => console.log('이 부분이 콜백'))

// 콜백 함수 안
// 이 부분이 콜백

하지만 콜백 지옥과 같은 현상이 일어나서 Promise가 등장하게 되었다.

 

??Promise??

ES6 (ECMAScript2015)에서 등장한 자바스크립트에서 비동기를 처리하기 위해 사용하는 객체

비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있다.

 

- pending : 이행하지도, 거부하지도 않은 초기 상태.

- fulfilled : 성공적으로 완료.

- rejected : 연산 실패.

 

?? Async / await ??

ES7 (ECMAScript2016) 에서 등장한 자바스크립트에서 Promise를 가지고 비동기를 동기처럼 사용하는 문법이다.

function sleep(ms) {
	return new Promis(resolve => setTimeout(resolve, ms));
}

async function process() {
    console.log('log!');
    await sleep(1000);
    console.log('log2!!');
}

process();

// log!
// log2!!

!주의! async로 감싸줘야 안에 await 을 사용할 수 있다.

위에 News list를 동기로 호출한 것을 

비동기로 호출해보겠다. 이렇게 깔끔하게 async await을 사용해서 호출하는 것을 확인해보았다.

import {React, useEffect, useState} from 'react';
import NewsItem from '../NewsItem';

const NewsList = () => {
  const [news, setNews] = useState([])
  useEffect(() => {
    getNewsList();
  }, [])
  const getNewsList = async () => {
    const response = await fetch('https://newsapi.org/v2/everything?q=tesla&from=2023-07-21&sortBy=publishedAt&apiKey=발급받은 api키')
    const data = await response.json()
    setNews(data.articles)
  }
  return (
    <div>
      {news.map((news) => <NewsItem {...news} />)}
    </div>
  );
};

export default NewsList;