다시 시작하는 리액트 - 리액트 심화 3-1

 

1. 네트워크 요청, http 프로토콜

 

1-1.  Mock API 만들기

 

이번 시간은 Mock API를 만들고 테스트까지 해볼건데요! 테스트하기 위한 준비물이 있습니다.
바로바로 POST MAN이라는 프로그램이에요.
포스트맨 사이트에서 포스트맨을 설치하신 후 강의를 진행해주세요!
(설치하러 가기→)

 

1) Rest API란? :

 

mock API를 배우기 전에 잠깐!
REST API가 뭔지 살짝만 읽어보고 가요. 😊

[REST API]
REST API는 REpresentational State Transfer API의 약어예요.
소프트웨어 개발 아키텍쳐의 한 형태로, 클라이언트와 서버 사이 통신 방식 중 하나입니다.
RESTful은 REST API를 제공하는 웹서비스를 말합니다.

 

- REST 구성

 

• 자원: URI
• 행위: Http method (GET, POST, PUT, DELETE)
• 표현: JSON, XML, ... (대부분의 경우 JSON을 주고 받습니다.)

 

어디로 요청을 보낼 거야, 어떤 방식으로 보낼 거야, 무엇을 주고 받을 거야 하는 3개로 구성이 되어 있음.

이 3개를 지켜준다면 어느 플랫폼이던 간에 사용이 가능함. (웹이던 앱이던 상관 없이)

 

- REST 특징

 

• 클라이언트 - 서버 구조
• 무상태성
• 캐시 처리 기능
• 자체 표현 구조
• 계층화
• 인터페이스 일관성

 

 

2) mock API란? :

 

Mocking API mocking api는 실제로 REST API가 구축되어 있지 않더라도,
있는 것처럼 테스트 환경을 만들어주는 거예요. 🙂
실제로 뭔가 저장하진 않고 흉내만 내는 거니까 당연히 프로덕션 레벨에서 사용할 수 없어요.
API 준비가 덜 된 상태로 개발 진행을 한다거나 지금처럼 공부할 때 쓰기 좋습니다.

 

 

3) json-server 설치 :

 

json-server는 json 파일으로 REST API mock server 구축을 해주는 패키지입니다.

 

- 폴더 생성

 

mkdir my_mock_api

 

- 프로젝트 초기화

 

yarn init -y

 

- 설치

 

yarn add json-server

 

 

4) json-server로 일주일 수면 시간을 알려주는 API 만들기

 

- db.json 만들기

 

db.json은 디비 역할을 해줄 파일입니다.

{
  "sleep_times" : [
    {
      "id": 0,
      "day": "월",
      "sleep_time": "10:00"
    },
    {
      "id": 1,
      "day": "화",
      "sleep_time": "10:00"
    },
    {
      "id": 2,
      "day": "수",
      "sleep_time": "10:00"
    },
  ]
}

 

- json-server 실행하기

 

DB를 만들었으니 json-server가 db를 보고 있도록 해줘야 합니다.
—watch로 db.json을 보도록 해줄 수 있고, 실행할 포트는 —port를 사용해서 지정할 수 있어요.
(지정하지 않을 경우, 기본값은 3000번 포트예요!)

yarn json-server --watch db.json --port 5001

 

 

5001 서버 뒤에 슬래쉬(/)를 해주고 sleep-times를 붙이면

만들어둔 목업 데이터에 접근할 수 있음.

 

 

- json-server 실행 커멘드 추가하기

 

매번 실행 명령어를 입력하긴 귀찮죠! 실행 명령어를 추가해봅시다.

// package.json
...
"scripts": {
  ...
  "server-start": "json-server --watch db.json --port 5001"
},
...

 

 

5) API 테스트하기

 

포스트맨을 열어봅시다!
GET과 POST를 사용해서 데이터를 가져오고, 넣어줘봅시다.

 

- GET 요청 보내기

 

• 메서드에 GET을 넣고,
• 주소를 넣어줌. endpoint는 sleep_times.

 

 

서버의 목업 데이터가 저장된 곳의 url을 입력해주고 데이터 받아오기.(GET)

 

 

- POST 요청 보내기

 

• 메서드에 POST를 넣고,
• 주소를 넣어줌. endpoint는 sleep_times.
• Body에 추가할 데이터를 넣어보기.

 

 

POST의 경우, 먼저 Headers에 들어가서 이대로 설정을 해줌.

그 다음 Body로 이동해 추가할 데이터를 작성해주면 됨.

 

 

그러면 db.json에 데이터가 추가된 것을 확인할 수 있음.

사실 id는 굳이 추가해주지 않아도 알아도 추가된다는 사실.

 

 

 

1-2.  네트워크 요청 1 - XMLHTTPRequest

 

1) 서버와 클라이언트 동작방식

 

- 서버와 클라이언트

 

클라이언트는 요청을 하고, 서버는 응답을 한다!
네! 또 찾아왔습니다.
잊을만 하면 찾아오는 서버와 클라이언트 동작방식 알아보기 시간입니다.

 

- 서버와 클라이언트가 뭘 통해서 소통할까? → REST API!

- 클라이언트는 REST API를 호출하고, 서버는 응답을 보내준다!

 

 

2) XMLHTTPRequest => 🩸🩸 많이 오래된 방식.

 

XMLHttpRequest 객체는 서버와 통신하기 위해 사용하는 객체예요.
조금 달리 말해보면 브라우저는 XMLHttpRequest를 이용해서
Ajax요청을 생성하고 전송한다고 할 수 있습니다.

이때, 서버가 브라우저의 요청에 대한 어떤 응답을 돌려주면
같은 XMLHttpRequest 객체가 그 결과를 처리해요!

XML뿐 아니라 JSON, text 등등 모든 종류의 데이터를 받아오는데 사용할 수 있어요.
HTTP이외의 프로토콜도 지원합니다. (file, ftp도 지원해요!)
(docs 보러가기 →)

 

 

- XMLHTTPRequest 객체 생성하기

 

let xhr = new XMLHttpRequest();

 

- 요청 만들기

 

xhr.open('GET', 'http://localhost:5001/sleep-times');

 

- 요청 보내기

 

xhr.send();

 

프로젝트를 하나 새로 생성한 후 App.js에서 XMLHttpRequest()를 사용할 거임.

useEffect() hook 안에서 사용해보기.

 

 

이때 서버가 계속 켜져 있어야만 요청을 보낼 수 있음.

이렇게 네트워크 구간에 sleep-times가 떠 있는 것을 볼 수 있음.

 

 

- 응답 받기

 

// 두가지 방법으로 응답을 받을 수 있어요!
// 하나는 onreadystatechange를 쓰는 방법, 다른 하나는 onload를 쓰는 방법입니다.

// 1.
// XMLHttpRequest.readyState 프로퍼티가 변경(이벤트 발생)될 때마다
// 콜백함수(이벤트 핸들러)를 호출해요!
xhr.onreadystatechange = function (e) {
  // 이 함수는 Response가 클라이언트에 도달하면 호출됩니다!

  // readyStates는 XMLHttpRequest의 상태(state)를 반환해요
  // readyState :::
  // UNSENT = 0; // XMLHttpRequest.open() 메소드 호출 이전
  // OPENED = 1; // XMLHttpRequest.open() 메소드 호출 완료
  // HEADERS_RECEIVED = 2; // XMLHttpRequest.send() 메소드 호출 완료
  // LOADING = 3; // 응답 기다리는 중(서버 응답 중(XMLHttpRequest.responseText 미완성 상태))
  // DONE = 4; // 서버 응답 완료
  if (xhr.readyState !== XMLHttpRequest.DONE) return;

  // status는 response 상태 코드를 반환 : 200 => 정상 응답
  if(xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.log('Error!');
  }
};

//2.
// load 이벤트는 서버 응답이 완료된 경우에 발생해요!
xhr.onload = function (e) {
  // status는 response 상태 코드를 반환 : 200 => 정상 응답
  if(xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.log('Error!');
  }
};

 

- 1번째 방법 : onreadystatechange()

XMLHttpRequest.readyState 프로퍼티가 변경이 될 때마다 콜백함수를 호출해줌.

 

• readyState : XMLHttpRequest의 상태를 반환해줌.

 

readyState는 5가지 상태로 나뉘는데, 각 상태별로 무언가 행동을 취할 수 있음.

=>  0, 1, 2, 3, 4

 

- 0 : 객체 생성 후

 

- 1 : 서버 요청을 만든 후

 

- 2 : 요청을 보낸 후

 

- 3 : 요청을 보내고 기다리는 시간

 

- 4 : 요청이 끝나고 서버한테 응답을 받은 시간

 

 

callback 함수 내에서 xhr.readyState를 찍어보면 이렇게 상태들이 나오게 됨.

4가 서버에게 응답을 받은 후이므로 if문을 이용하여 xhr.readyState === 4일 때 데이터를 받아올 거임.

 

 

- 2번째 방법 : onload()
onload는 서버에서 완전히 응답을 받은 후에만 사용할 수 있음.

 

 callback 함수 내에서 xhr.responseText 콘솔을 찍어 데이터 받아오기.

 

 

 

1-3.  네트워크 요청 2 - Fetch API와 Axios

 

1) Fetch API :

 

Fetch API
Fetch API도 서버와 통신하기 위해 사용하는, XMLHttpRequest의 대체제예요.
XMLHttpRequest보다 훨씬 사용법이 간단하고 서비스 워커 등 다른 기술을 쓸 때 손쉽게 엮어 사용할 수 있어요.
(사용법 docs 보러가기 →)

프라미스를 반환하여 .then 등의 후속처리를 하기 좋음.

fetch()는 구식 브라우저에서는 돌아가지 않아요!

 

- .fetch() 생김새 보기

 

fetch()를 호출하면?
브라우저는 네트워크 요청을 보내고 프라미스를 반환됩니다.
이 프라미스를 사용해서 fetch()를 호출해요!

// url – 접근하고자 하는 URL
// options – 선택 매개변수, method나 header 등이 여기에 들어가요!
let promise = fetch(url, [options]);

 

- .fetch() 써보기

 

• get

const callSomething = async () => {
  let response = await fetch('http://localhost:5001/sleep-times');
  console.log(response);
}

 

 

 

• post

const callSomething = async () => {
  let data = {
    "id": 6,
    "day": "일",
    "sleep_time": "10:00"
  },

  let response = await fetch('http://localhost:5001/sleep-times', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json;charset=utf-8'
    },
    body: JSON.stringify(data)
  });
    console.log(response);
}

 

 

 

 

2) Axios :

 

Axios를 사용하면 인터셉트를 정말 편하게 처리해줄 수 있음.

then, catch로 처리되기전에 return을 통해서 반환하는 것이 가능.

fetch와 달리 then, catch를 사용하기 전에 return을 통해 데이터를 반환할 수 있음.

 

XMLHttpRequest를 배이스로한 프라미스 기반 HTTP 클라이언트 라이브러리입니다.
악시오스는 node 런타임과 브라우저 양측에서 모두 돌아가요.
악시오스는 오늘 알아본 통신 방법 중 가장 기능이 많은 친구입니다.
그 기능을 잘 소개해주는 굉장히 대단한 공식문서가 준비되어 있으니 꼬옥 읽어보시길 바랍니다!
(axios 공식문서 보러가기 →)

 

- 설치하기

 

yarn add axios

 

- 요청하고 응답 받기

 

• config로 GET 요청해보기

axios({
  method: 'get',
  url: 'http://localhost:5001/sleep-times',
})
  .then((response) => {
    console.log(response);
  });

 

 

 

• 요청 메서드로 GET 요청해보기

axios.get("http://localhost:5001/sleep-times");

 

 

 

• 요청 메서드로 POST 요청해보기

let data = {
  id: 6,
  day: "일",
  sleep_time: "10:00"
};

axios.post("http://localhost:5001/sleep-times", data);

 

json화 따로 해주지 않아도 오류가 나지 않음.

axios가 알아서 json화 해주기 때문.

 

 

 

fetch나 axios 등 사용하는 것에 따라서 모양의 차이가 조금씩 있음.