당신의 fetch()를 말리십시오

API 으로 작업하는 경우 의심할 여지 없이 fetch() 방법을 배우고 사용해야 합니다. fetch()를 사용하면 개발자가 API에 액세스하고 여러 방식으로 데이터를 사용할 수 있습니다. 궁금하신 분들을 위해 평균fetch() 게시 방법의 구문은 다음과 같습니다.



이제 추출된 데이터로 수행하기로 선택한 작업이 크게 다를 수 있습니다. 이 예에서 나는 모든 것을 console.log() -하고 있습니다. 이는 fetch()가 올바르게 작동하는지 확인하는 데 매우 유용할 수 있습니다.
fetch()는 매우 중요한 방법이며 개발자가 여러 방법으로 웹 사이트 백엔드 데이터에 액세스할 수 있도록 합니다...

가장 일반적으로, 우리는

데이터 생성,

데이터 읽기,

데이터 업데이트

데이터 삭제

이것은 약어 "CRUD"를 사용하여 쉽게 기억할 수 있습니다. 개발자로서 우리는 항상 CRUD와 함께 작업합니다. 프로젝트를 만드는 동안 CRUD에 무릎을 꿇는 경우가 많다고 말할 수 있습니다. 운 좋게도 CRUD가 너무 많이 발생하지 않도록 하는 솔루션이 있습니다.

하지마

반복

너 자신!

아니, 난 그냥 당신에게 소리를 지르는 것이 아닙니다. 이것은 실제로 "DRY"라는 또 다른 약어이며 CRUD에 빠지지 않도록 도와줍니다. 코드를 보다 효율적이고 모듈식으로 만들고 건조하게 유지할 수 있는 재미있는 작은 기술을 배웠습니다. 함수를 사용하여 fetch() 요청을 선언하십시오!

가장 단순한 규모로 보면 다음과 같을 것입니다.


이것을 분해합시다. 이것은 이전 예제와 정확히 동일한fetch() 순서입니다. 이 기능이 멋진 이유는 데이터를 가져오는 위치에 따라 변경할 수 있도록 가져오기의 URL을 매개변수로 설정했기 때문입니다!

이 함수 위에 우리가 쓴 경우...

const url = 'http://example.com/movies'

... 위의 첫 번째 "지루함"fetch()과 정확히 동일한 데이터를 반환합니다!

함수를 호출하고 원하는 URL을 매개변수로 전달하여 이를 더욱 동적으로 만들 수 있습니다.


이것이 매우 유용함에도 불구하고 "어쨌든 필요할 때마다 올바르게 구문이 지정된 가져오기를 입력하는 것이 그리 어렵지 않다"고 생각할 수 있습니다. 그러나 가져오기가 더 복잡해지면 분명히 CRUD에 빠지기 시작할 것입니다. 좀 더 복잡한 다른 fetch() 를 살펴보고 정보를 매개변수로 전달하는 것이 얼마나 유용한지 살펴보겠습니다.





CRUD를 탭하여 새 데이터를 업데이트하고 생성하면 fetch() 구문이 더 집중되고 정확한 세부 정보를 기억하기 어려워집니다. 이러한 가져오기를 함수로 생성하고 필요한 정보를 매개변수로 전달하는 것이 훨씬 쉽습니다.

감사합니다!