Jikan Anime API를 사용하여 React JS에서 ANIME 검색 데이터베이스 구축

이 프로젝트에서는 Jikan Anime API 및 React JS를 사용하여 애니메이션 검색 데이터베이스를 구축하는 방법, 보다 구체적으로는 반응 후크를 학습합니다. 양식을 살펴보고 데이터, 구성 요소를 가져오고 배열을 통해 카드를 표시합니다. 또한 전처리기로 SCSS를 사용합니다.

프로젝트 데모
https://the-anime-database-notsodevv.vercel.app/

반응 앱 만들기

Create React App은 React를 배우기에 편안한 환경이며 React에서 새로운 단일 페이지 애플리케이션 구축을 시작하는 가장 좋은 방법입니다.

최신 JavaScript 기능을 사용할 수 있도록 개발 환경을 설정하고 멋진 개발자 환경을 제공하며 프로덕션을 위해 앱을 최적화합니다. 컴퓨터에 Node >= 14.0.0 및 npm >= 5.6이 있어야 합니다. 프로젝트를 만들려면 다음을 실행합니다.

npx create-react-app my-app
cd my-app
npm start

Create React App은 백엔드 로직이나 데이터베이스를 처리하지 않습니다. 프런트엔드 빌드 파이프라인을 생성하기 때문에 원하는 모든 백엔드에서 사용할 수 있습니다. 내부적으로는 Babel과 webpack을 사용하지만 이에 대해 알 필요는 없습니다.

프로덕션에 배포할 준비가 되면 npm run build를 실행하면 빌드 폴더에 앱의 최적화된 빌드가 생성됩니다. README 및 사용 설명서에서 Create React App에 대해 자세히 알아볼 수 있습니다.

https://reactjs.org/docs/create-a-new-react-app.html

프로젝트 구조

우리의 주요 코드는 src 폴더에 있습니다. 가서 살펴보겠습니다.

API 경로 및 버전 가져오기

다음 링크에서 API 경로 및 버전을 가져옵니다.

https://jikan.docs.apiary.io/

Fetch with async/await를 사용하여 API를 사용하여 Anime을 가져옵니다.

async/await와 함께 Fetch를 사용하는 방법

Fetch API는 네트워크를 통해 리소스에 액세스합니다. HTTP 요청(GET, POST 및 기타 방법 사용), 파일 다운로드 및 업로드를 수행할 수 있습니다.

요청을 시작하려면 특수 함수 fetch()를 호출합니다.

const response = await fetch(resource[, options]);

2개의 인수를 허용합니다.

1. 리소스: URL 문자열 또는 요청 객체

2. 옵션: 메서드, 헤더, 본문, 자격 증명 등과 같은 속성이 있는 구성 개체입니다.

fetch()는 요청을 시작하고 약속을 반환합니다. 요청이 완료되면 Response 개체로 약속이 해결됩니다. 일부 네트워크 문제로 인해 요청이 실패하면 약속이 거부됩니다.

async/await 구문은 프라미스 작업을 단순화하기 때문에 fetch()와 잘 어울립니다.

예를 들어 영화를 가져오도록 요청해 보겠습니다.

async function fetchMovies() {
  const response = await fetch('/movies');
  // waits until the request completes...
  console.log(response);
}

fetchMovies()는 async 키워드로 표시되기 때문에 비동기 함수입니다.

await fetch('/movies')는 '/movies' URL에 대한 HTTP 요청을 시작합니다. await 키워드가 있기 때문에 요청이 완료될 때까지 비동기 함수가 일시 중지됩니다.

요청이 완료되면 응답이 요청의 응답 객체와 함께 할당됩니다. 응답에서 JSON 또는 일반 텍스트와 같은 유용한 데이터를 추출하는 방법은 다음 섹션에서 살펴보겠습니다.

자세한 내용을 보려면 이 링크를 방문하십시오.

가져오기() 소개

JSON을 가져오는 중

가져오기 오류 처리

가져오기 요청 취소

병렬 가져오기 요청

요약

https://dmitripavlutin.com/javascript-fetch-async-await/

기여

풀 리퀘스트를 환영합니다. 주요 변경 사항의 경우 먼저 문제를 열어 변경하고자 하는 사항을 논의하십시오.

테스트를 적절하게 업데이트하십시오.