술책! 더 이상 개만을 위한 것이 아닙니다!

Flatiron School의 소프트웨어 엔지니어링 부트캠프의 3단계 및 4단계에서는 백엔드 API 및 일관된 데이터베이스를 만드는 데 중점을 둡니다. 4단계에서는 백엔드와 프런트엔드를 통합하는 것이 Project Week의 주요 초점이었습니다. 프런트엔드에서 백엔드로 또는 그 반대로 데이터를 이동하는 것은 한 단계에 불과하지만 앱의 중요한 "성공 또는 중단"구성 요소입니다. 이 데이터 교환이 없으면 앱의 앞면과 뒷면이 별도의 두 개체가 되어 두 구성 요소가 모두 쓸모가 없게 됩니다. 이 데이터의 "라스트 마일 전달"은 앱에서 가장 중요한 부분일 수 있습니다.

JavaScript 및 React에서 "가져오기"는 프런트엔드와 백엔드에서 데이터를 주고 받는 데 사용됩니다. 데이터로 수행하려는 작업에 따라 사용하는 가져오기 유형이 다릅니다. "GET"은 API에서 데이터를 검색하고, "POST"는 프런트엔드에서 새 데이터 조각을 보내고, "PATCH"및 "PUT"은 프런트엔드의 데이터를 사용하여 백엔드의 데이터를 수정하고, "DELETE"는 백엔드에서 프런트엔드에 지정된 데이터를 제거합니다.

API에서 프런트엔드로 데이터를 가져오는 방법을 "GET"요청이라고 합니다. "GET"인 경우 가져오기 요청에 지정할 필요가 없습니다. 예를 들어:

fetch('https://fakesite.com/api')
  .then(response => response.json())
  .then(resp => console.log(resp);

이 가져오기 요청에서 우리는 가져오기에게 첫 번째 줄의 URL로 어디를 볼 것인지 알려줍니다. "GET"을 수행하고 있다는 사실은 수행 중인 가져오기를 지정하지 않았기 때문에 암시됩니다. 두 번째 줄은 가져오기에 JSON 형식의 응답 데이터를 기대하고 있음을 알려줍니다. 수행 중인 작업에 따라 JSON, 텍스트, 특정 형식 데이터 또는 기타 형식이 될 수 있습니다. 세 번째 줄 console.logs는 응답을 기록합니다. 이것을 변수에 할당하고 응용 프로그램의 다른 곳에서 데이터를 사용할 수도 있습니다.

"POST", "PATCH"및 "PUT"을 수행하려면 "GET"보다 더 많은 정보가 필요하지만 서로 매우 유사합니다. 실제로 구문은 모두 동일하며 데이터와 백엔드에서 수행되는 데이터만 다를 뿐입니다. 예를 들면 다음과 같습니다.

            fetch("https://fakesite.com/api", {
            method: "POST",
            headers: {"Content-Type" : "application/json"},
            body: JSON.stringify({_this will be the data object you are sending_})
        })
            .then(resp => resp.json())
            .then(data => console.log(data))

두 번째 줄에서 사용하려는 가져오기 방법을 지정해야 한다는 것을 볼 수 있습니다. 세 번째 줄은 JSON 데이터를 보내고 있음을 API에 알립니다. 다시 말하지만 이것은 요구 사항에 따라 다를 수 있습니다. 네 번째 줄은 데이터를 JSON 형식으로 변환합니다. 이렇게 하면 개체가 API로 전송되고 배열에 새 항목이 생성됩니다. "PATCH"및 "PUT"기능은 유사하지만 주소를 지정할 배열의 개체를 지정해야 합니다. 또한 "PUT"을 사용하면 개체에 대한 모든 값을 입력해야 합니다. "PATCH"의 경우 수정하려는 데이터만 입력하면 됩니다.

배열에서 객체를 삭제하는 것은 다른 가져오기 방법보다 훨씬 간단합니다. 일반적인 "DELETE"요청은 다음과 같습니다.

   fetch('https://fakesite.com/api', {
        method: 'DELETE',
      })

"삭제"작업을 수행하려면 개체를 지정해야 합니다. 이를 수행하는 방법에는 여러 가지가 있지만 이 블로그 게시물에서는 다루지 않을 것입니다! 개체가 삭제된 후 원하는 경우 확인 메시지 또는 기타 항목을 반환할 수도 있습니다.

이 블로그 게시물은 확실히 지구를 산산이 부수는 것이 아닙니다. 늘 그렇듯 제가 잘 이해하지 못하는 과목을 선택해서 설명을 하려고 공부했는데 이해하는데 도움이 되었어요!a