fetch란?

공부하면서 fetch기능을 사용하여 어떤식으로 작동하는지는 배웠지만

fetch가 뭐야? 라고 물어봤을 때 머릿속에 정리된게 없어서 이렇게 기록으로 남기게 되었습니다.

 

fetch

fetch 자체는 단순히 네트워크를 통해 데이터를 요청하고 응답을 처리하는 데 사용되는 JavaScript API입니다.

또한 Promise를 반환하여, 이를 통해 비동기적으로 네트워크 요청을 다룰 수 있습니다.

 

그럼 여기서 모르는게 두가지가 나왔습니다.

Promise는 무엇이며 비동기적은 어떤 것이냐?

 

우선 비동기적부터 알아보자면

실행의 방법은 동기적과 비동기적  있습니다.

 

동기적(synchronous) 

가장 직관적이 예로 로그인을 하고자 할 때 아이디와 비밀번호를 적은다음 로그인 버튼을 눌렀을 때 새로고침과 같이 페이지가 재로딩 되면서 로그인 상태로 바뀌는걸 볼수 있습니다.

즉, 데이터를 서버로 전송하고 서버로부터 응답을 받은뒤에 로그인 성공, 실패, 또는 해당하는 페이지로 이동하는 것이 동기적 방식입니다. 

 

비동기적 (asynchronous)

비동기적인 방식의 대표적인 예로는 자동 완성 기능입니다.

사용자가 입력을 하는동안에 페이지는 재로딩 되지 않으며 적고자 하는 글이 자동완성 되면서 사용자는 다른 작업을 할수가 있습니다.

즉, 어떤 작업이 끝날 때까지 기다리지 않고 다른 작업을 계속할 수 있습니다.

서버로 데이터를 요청하고 응답을 기다리는 동안 웹은 자신의 다른 업무를 진행하고 응답이 오면 그 후에 작업을 진행하는 것이 비동기적 방식입니다. 대표적으로 ajax방식이 있습니다.

 

Promise는 무엇일까요?

Promise는 JavaScript에서 비동기적인 작업을 간편하게 처리할 수 있도록 도와주는 객체입니다.

특정 작업이 완료되었을 때 또는 실패했을 때의 결과를 나타내는 객체로, 비동기 코드를 더 효율적으로 관리할 수 있게 해줍니다. 

 

이제 fetch함수는 비동기적인 네트워크 요청을 다루기 위해 Promise 객체를 활용한다는 말을 이해 할수가 있게 되었습니다.

 

fetch의 작동 방식

fetch('url')
  .then(response => response.json())
  .then(data => console.log(data))

이런 식으로 생긴 걸 볼수 있는데 복잡해 보이지만 하나하나 뜯어보면 알기 쉽습니다.

 

fetch('url')

- url을 매개변수로 받아 네트워크 요청을 생성하고, 이때 Promise를 반환합니다.

- 기본값은 get입니다.

 

.then(response => response.json())

- .then메서드를 사용하여 서버 응답을 JSON으로 반환합니다. 

- response(변수명)안에 통신 요청 받은 데이터를 넣을 것이고

  데이터가 들어간 response를 json형태로 바꿀 것이다 라는 의미입니다.

 

.then(data => console.log(data))

- json화 된 데이터의 이름을 data(변수명)로 정한뒤 console에 출력할 것이다 라는 의미입니다.

 

 

이렇게 fetch를 사용하여 open API로 요청한 데이터를 JSON형식으로 받아와 사용할수 있는 방법을 알게 되었습니다.

 

 

 

 

 

 

글을 적으면서도 아직 많이 사용해 보지 않아 애매한 것같지만 그래도 +1된 것 같습니다.

부족한게 있다면 댓글로 지적해주세요!! 감사합니다!😊