위코드 파운데이션 과정을 들으며 정리한 내용입니다.

fetch 정의

정보가 필요할 때 클라이언트는 서버에 HTTP 통신으로 요청을 보내고 응답을 받습니다. fetch 메서드를 사용해 데이터를 요청해서 받고(read), 생성하고(create), 수정하고(update), 삭제(delete)할 수 있습니다.

fetch 요청, request

fetch 메서드 기본 구조는 아래와 같습니다. 첫번째 인자로 정보를 요청할 API 주소를 넣고(필수) 두번째 인자로 요청 옵션 값들을 객체 형태로 넣습니다. (선택) 이렇게 요청하고 응답을 받습니다.

fetch('api 주소', {
	method: '...',
	headers: { 'key' : 'value' },
	body: JSON.stringify({ 'key' : 'value' }),
}) //여기까지 요청하고 아래는 응답 확인
	.then(( response ) => response.json())  // 응답 받은 json 데이터 js 로 변환
	.then(( data ) => console.log(data)); // 콘솔 찍어서 데이터 확인. 이후 이 부분에서 데이터를 state 에 담아줌

두 번째 인자로 전달하는 객체 형태 옵션 값의 key 로는 method headers body mode credentials omit same-origin include cache redirect referrer referrerPolicy integrity keepalive signal 등이 있습니다.

첫번째 인자 api 주소

필수 인자인 api 주소는 백엔드에게 받습니다. http://, https://, IP 주소, 도메인 주소, 엔드 포인트 등으로 구성되어 있습니다.

fetch('http://10.58.113.116:8000/signin');
fetch('https://jsonplaceholder.typicode.com/posts');

두번째 인자 method

용도에 따라 어떤 method로 요청할지 적습니다. 아래 내용은 클라이언트 입장에서의 설명입니다.

GET // 데이터를 서버로 부터 받아 올 때 ( 가장 많이 사용 ) 
POST // 데이터를 생성 / 수정 할 때, 생성 및 수정할 정보를 Body 에 담아서 전달
DELETE // 특정 데이터 삭제를 요청할 때

fetch('https://jsonplaceholder.typicode.com/posts', {
	method: 'POST',
});

두번째 인자 headers

서버 요청 시 부가적인 정보를 담습니다. POST 로 요청하는 경우 Content-Type: application/json; charset=utf-8 을 필수로 담아야 합니다. 선택적으로 사용하는 키로 Host user-Agent Authorization 등이 있습니다.

fetch('https://jsonplaceholder.typicode.com/posts', {
	method : 'POST',
	headers : {
		'Content-Type': 'application/json;charset=utf-8',
	},
}); 

두번째 인자 body

요청할 body 가 있다면,

서버에 보낼 정보가 있을 경우, 해당 정보를 JSON.stringify 메서드로 형변환하여 보내야 합니다. JSON 형태로 보내면 서버, 클라이언트 간의 언어가 달라도 데이터를 주고 받을 수 있습니다.

fetch('https://jsonplaceholder.typicode.com/posts', {
	method : 'POST',
	headers : {
		'Content-Type': 'application/json;charset=utf-8',
	},
	body : JSON.stringify({ // 여기서 사용
		title: 'update title',
		content: '서버에 요청할때 담아서 보내는 정보',
	}),
});

요청할 body 가 없다면,

아래처럼 method, GET 으로 요청 하면 됩니다.

fetch('https://jsonplaceholder.typicode.com/users/1', { method: 'GET' });

비동기 (asynchronous)

동기(synchronous)적인 처리는 이전 작업이 끝나야 다음 작업으로 이어지는 처리 방식입니다. 반대로 비동기(asynchronous)는 이전 작업의 종료 여부와 상관없이 다른 작업을 할 수 있습니다. 통신은 중간에 인터넷 연결이 끊기거나 속도가 느려 언제 끝날지 예측하기 어렵습니다. 따라서 모든 통신을 동기적으로 처리하면 빈 화면을 오래 보게 될 수 있습니다. 그래서 통신과정은 동기적 처리 순서에 영향을 주지 않도록 비동기 처리해야 하고 fetch 함수는 비동기로 동작하게 설계되어 있습니다.

fetch 응답, response

.then 메서드는 Promise 를 return 하고 두 개의 콜백함수를 인자로 받습니다. 첫번째 인자는 Promise 가 이행됐을 때, 두번째는 거부햇을 때 사용하는 콜백 함수입니다. 아래 예시는 첫번째 인자만 들어간 예시입니다. .then() 메서드는 Promise 를 return 하기 때문에 첫 번째 then() 에서 반환한 값을 두번째 .then() 에서 이어서 처리하는 메서드 체이닝이 가능합니다.

fetch('https://jsonplaceholder.typicode.com/posts', {
	method : 'POST',
	headers : {
		'Content-Type': 'application/json;charset=utf-8',
	},
	body : JSON.stringify({
		title: 'update title',
		content: '서버에 요청할때 담아서 보내는 정보',
	}),
}) 
	// 여기 까지 요청, 아래는 응답
	.then((response) => response.json()) // json 데이터 js 로 변환
	.then((data) => console.log(data)); // 들어온 데이터 콜솔로 확인

status code 에 따른 분기 처리

json 을 js 로 변화하기 전, response 를 콘솔로 찍어보면, 통신 성공여부를 status 로 확인할 수 있습니다. 통신에 성공하면 200~299, 실패하면 400~499(클라이언트 에러) 혹은 500~599(서버 에러) 가 뜹니다. 요청이 성공해 정보가 서버에 반영되었다면 201이 뜨고, 요청하는 api 주소가 틀렸거나, 이용할 수 없는 웹 페이지나 서버를 가리킬 경우는 404 가 뜹니다. 자세한 상태 코드는 MDN 에서 확인 가능합니다.

통신은 성공과 실패 여부에 따라 status code 분류가 명확하므로 response 의 status code 에 따라 분기처리 하는 게 좋습니다. 첫 번째 then() 에서 응답받은 status 코드로 성공여부를 확인한 후, 응답받은 json 데이터를 js 로 변환하고(첫번째 분기처리) 두번째 then() 에서 리턴받은 데이터를 처리합니다.(두번째 분기처리)

fetch('로그인 API', {
	method: 'post',
	body: JSON.stringify({
		id: 'qawsedrf',
		password: '123456',
	}),
})
	.then((response) => { 
		if (response.ok === true) {
			return response.json();
		}
		throw new Error('에러 발생!');
	})
	.catch((error) => console.log(error))
	.then((data) => {
		if (data.message === 'login success') {
			localStorage.setItem('TOKEN', data.token);
			alert('로그인 성공');
		} else {
			alert('로그인 실패');
		}
	});