초보자를 위한 간단한 REST API 자습서

REST(Representational State Transfer)란 무엇입니까?

RESTful API가 호출되면 서버는 요청된 리소스의 상태 표현을 클라이언트에 전송합니다.

상태의 표현은 JSON 형식일 수 있으며 아마도 대부분의 API의 경우 실제로 그럴 것입니다. (XML 또는 HTML 형식일 수도 있음)

서버는 무엇을 합니까?

클라이언트가 API 중 하나를 호출하는 경우 서버에 제공해야 하는 두 가지 사항에 따라 달라집니다.

관심 있는 리소스에 대한 식별자입니다. 엔드포인트라고도 하는 리소스의 URL입니다. 실제로 URL은 Uniform Resource Locator의 약자입니다.

서버가 해당 자원에 대해 HTTP 메소드 또는 동사 형식으로 수행할 작업입니다. 일반적인 HTTP 메서드는 GET, POST, PUT 및 DELETE입니다.

어떻게 작동합니까?

REST API는 리소스 내에서 레코드(CRUD라고도 함) 생성, 읽기, 업데이트 및 삭제와 같은 표준 데이터베이스 기능을 수행하기 위해 HTTP 요청을 통해 통신합니다. 예를 들어...

REST API는 GET 요청을 사용하여 레코드를 검색합니다.

하나를 생성하기 위한 POST 요청,

레코드를 업데이트하기 위한 PUT 요청,

하나를 삭제하기 위한 DELETE 요청.

모든 HTTP 메서드는 API 호출에서 사용할 수 있습니다. 잘 설계된 REST API는 HTTP 기능이 내장된 웹 브라우저에서 실행되는 웹 사이트와 유사합니다.

프로젝트 설정

명령 프롬프트에서 이 코드를 실행하여 새 반응 앱을 생성합니다.

npx create-react-app rest-api

1a. 앱 폴더에 CD

cd rest-api

1b. npm 시작 실행

이제 프로젝트가 시작되어 실행됩니다. 코딩을 시작합시다!

폴더 구조

루트 수준에서 다음 파일을 보관합니다.

인덱스.JS

앱.제이에스

App.CSS

인덱스.CSS

앱 구성 요소

div 내의 모든 항목을 제거하여 App.js를 정리하고 다음과 같이 보이게 합니다.

import React from 'react';
import './App.css';

function App(){
  return (
    <div className="App">
    Hello World!
    </div>
  )
}

export default App

API 데이터 가져오기

이제 useEffect 후크를 사용하여 QuotesApi의 데이터를 기록해 보겠습니다.

import './App.css';
import React,{useEffect} from 'react';

export default function App() {

  useEffect(() => {

  }, []);


  return (
    <div className="App">

    </div>
  );

}

URL 정의

  useEffect(() => {
    const url = "https://type.fit/api/quotes";

  }, []);

비동기 함수 만들기

그런 다음 데이터를 가져오는 비동기 함수를 만듭니다. 이 사용 사례의 경우 함수는 계속하기 전에 데이터를 가져온 후(우리의 약속) 기다려야 합니다.

  const fetchData = async () => {
      try {
          const res = await fetch(url);
          const json = await res.json();
          console.log(json);
      } catch (err) {
          console.log("error", err);
      }
  };

useEffect 후크 내에 fetchData 함수를 넣고 그렇게 호출하는 것을 잊지 마십시오.

  useEffect(() => {
    const url = "https://type.fit/api/quotes";

    const fetchData = async () => {
      try {
          const res = await fetch(url);
          const json = await res.json();
          console.log(json);
      } catch (err) {
          console.log("error", err);
      }
  };

  fetchData();
  }, []);

방금 만든 함수는 try...catch 문으로 래핑되어 오류를 포착하고 콘솔에 인쇄합니다. 우리는 왜 이것을 하는가? 디버깅을 돕고 앱이 예기치 않게 충돌하는 것을 방지합니다.

console.log 문을 확인하고 API에서 올바른 데이터를 가져오는지 확인하십시오.



API에서 데이터를 어떻게 가져오나요?

그렇게 하려면 react에서 useState를 가져와서 정의해야 합니다.

import React,{useEffect, useState} from 'react';

 setQuotes(json);

그런 다음 반환 본문은 다음과 같아야 합니다.

  return (
    <table className="App">
    <tr>
        <th>Text</th>
        <th>Author</th>
    </tr>
    {quotes.map(({ author, text }, index) => (
        <tr key={index}>
            <th>{text}</th>
            <th>{author}</th>
        </tr>
    ))}
    </table>
  );

이제 모든 스타일링과 함께 프로젝트를 완성해 봅시다!

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

export default function App() {

  const [quotes, setQuotes] = useState([]);

  useEffect(() => {
    const url = "https://type.fit/api/quotes";

    const fetchData = async () => {
      try {
          const res = await fetch(url);
          const json = await res.json();
          console.log(json);
          setQuotes(json);
      } catch (err) {
          console.log("error", err);
      }
  };

  fetchData();
  }, []);


  return (
    <table className="App">
    <tr>
        <th>Text</th>
        <th>Author</th>
    </tr>
    {quotes.map(({ author, text }, index) => (
        <tr key={index}>
            <th>{text}</th>
            <th>{author}</th>
        </tr>
    ))}
    </table>
  );
}

콘솔을 다시 확인하고 API에서 가져온 데이터를 봅니다.

이것이 출력이 됩니다.



멋져 보여!

끝까지 와주셔서 정말 감사합니다, 좋은 하루 되세요!