fetch함수

🤷‍♂️ fetch란?

---

fetch 는 client가 서버에 요청을 보낼 때 사용하는 함수이다. 예를 들어, fetch('javascript') 라는 표현은 "웹브라우저야, javascript 라는 파일을 서버에 응답해줘" 라는 뜻이다.

동기(synchronous) : A가 끝나야 그 다음 B를 실행하는 처리방식
비동기(Asynchronous) : A가 끝나지 않아도 B를 실행하는 처리방식

기본적으로 fetch() 함수는 비동기 처리에 해당한다. fetch를 동기적 처리로 만들기 위해 .then()을 사용한다.

 

🧑‍💻 예제 코드

---

function callBackMe() {
	console.log("response end")
}

fetch('html').then(callBackMe);
console.log(1);
console.log(2);

부가적인 것은 생략하고 핵심만 살펴보자. 현재 fetch를 통해 html 파일을 서버에 요청한 상태이다. 요청 이후에 서버로부터 응답을 받으면 .then() 을 통해 callBackMe 함수를 실행하도록 돼있다. 그리고 그 아래에 콘솔로 1,2를 출력하도록 해놨다. 실행 결과는 다음과 같다.

1
2
response end

fetch 는 기본적으로 비동기 처리에 해당하기 때문에 fetch 를 실행하는 순간 그 아래 있는 console.log 도 실행된다. 그 다음 fetch 를 통해 요청한 html 파일이 서버로부터 도착하면 .then() 안에 있는 함수가 실행된다.

그래서 response end는 가장 마지막에 출력되고 그 전에 1과 2가 출력되는 것이다.

 

⚡️ JSON 제대로 알아보기

---

fetch를 사용하면서 빼놓을 수 없는 것이 바로 JSON 이다. JSON은 자바스크립트에서 데이터를 저장하는 방식이다. 보통 key와 value 형태로 저장하는데, 이러한 형태를 다양한 방식으로 변환하거나 응용할 수 있고 용량이 작아서 저장하기에 용이하다.

데이터 전달방식으로 XML도 있지만 태그가 중복되고 한 눈에 보기 쉽지 않기 때문에 데이터를 전달할 때 주로 JSON으로 전달한다.

사진과 예제를 통해 살펴보자.

 

object를 JSON으로 바꿔서 전달하기

---

전달하고자 하는 데이터 또는 오브젝트를 JSON으로 만들려면 JSON.stringify() 를 사용하면 된다. 오브젝트 안에 있는 함수는 전달되지 않는다.

let json = JSON.stringify(true);
console.log(json); // true

json = JSON.stringify(['apple','banana']);
console.log(json); // ["apple","banana"] 큰따옴표로 변한다.

const rabbit = {
	name: 'cuty',
  	color: 'white',
  	size: null,
  	jump: () => {
    	console.log(`${name} can jump!`);
    },
};

json = JSON.stringify(rabbit);
console.log(rabit); 
// {"name":"cuty","color":"white","size":null}

json = JSON.stringify(rabbit, ['name']);
console.log(rabit); // {"name":"cuty"} 해당하는 항목만 반영 가능

 

JSON을 object로 바꿔서 전달하기

---

반대의 방법은 JSON.parse() 를 사용하면 된다. JSON으로 변환될 때 함수는 제외됐으므로 JSON에서 다시 object로 바뀔 때 당연히 함수는 존재하지 않는다.

json = JSON.parse(rabbit);
console.log(json); //{name: "cuty", color: "white", size: null}

 

fetch 사용법

---

이제 fetch 사용법에 대해 알아볼 차례다. GET, POST, PUT, DELETE 요청 사용법 등 자세한 설명은 이 곳에 잘 나와있다.