1, 2차 프로젝트를 진행하며 힘들었던 것 중 하나가 fetch 함수 사용이었다.
새로 배우는 용어들과 매일매일 낯을 가렸지만 얘와는 유난히 낯을 많이 가렸던 것 같다.
이제는 눈에 좀 익었지만 처음엔 진짜 외계어 같았다.
못생긴놈.... 이건 다 니가 못생겨서야....
백에 데이터를 주는것도 받아오는 것도 이 못생긴놈이 없으면 불가능했다.
아직도 다 알고 쓰는 것 같지 않지만, 그래도 이젠 좀 친해져야지.
Fetch?
Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것이 가능하다. 이 파이프라인이라는 표현은 MDN에서 사용한 것인데 좀 마음에 든다.
또한 fetch() 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있다.
fetch()로 부터 반환되는 Promise 객체는 HTTP error 상태를 reject하지 않는다. Code가 404나 500을 반환하더라도 상태가 false인 resolve가 반환되며, 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환된다.
기본적인 fetch 사용법
기본적인 fetch는 비교적 간단하게 작성 가능하다.
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(JSON.stringify(myJson));
});이 코드가 의미하는 바를 해석해보면, 네트워크에서 JSON 파일을 가져 와서 콘솔에 인쇄하는 것이다.
간단한 fetch() 사용 흐름을 보면 인수 한개(가져올 자원의 경로)를 가져오고 응답을 포함하는 response 객체를 반환한다. 이것은 단순한 HTTP Response이며, 실제 JSON이 아님에 유의해야 한다. response 객체로부터 사진을 가져오기 위해서는 json() 메서드를 사용할 필요가 있다.
fetch() 메서드에 두번째 파라미터를 적용하는것도 가능하다. init 오브젝트는 다른 여러 세팅을 컨트롤 할 수 있게 해준다. 이번 2차 프로젝트에서 구현할 카카오 소셜로그인에서도 이 init은 중요하게 쓰인다.
아래는 MDN에 제시된 샘플코드이다.
// Example POST method implementation:
postData('http://example.com/answer', {answer: 42})
.then(data => console.log(JSON.stringify(data))) // JSON-string from `response.json()` call
.catch(error => console.error(error));
function postData(url = '', data = {}) {
// Default options are marked with *
return fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, cors, *same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json',
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: 'follow', // manual, *follow, error
referrer: 'no-referrer', // no-referrer, *client
body: JSON.stringify(data), // body data type must match "Content-Type" header
})
.then(response => response.json()); // parses JSON response into native JavaScript objects
}아래 코드는 POST프로토콜로 JSON인코딩된 데이터를 보내기 위한 코드이다.
var url = 'https://example.com/profile';
var data = {username: 'example'};
fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers:{
'Content-Type': 'application/json'
}
}).then(res => res.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));일단 모양에 익숙해지면 사용 자체가 많이 어렵지는 않으므로 눈에 익는게 중요하다.
아래 코드는 파일을 업로드하기 위한 코드이다.
var formData = new FormData();
var fileField = document.querySelector('input[type="file"]');
formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);
fetch('https://example.com/profile/avatar', {
method: 'PUT',
body: formData
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', JSON.stringify(response)));fetch시 유의할 점
POSTMAN 등의 도구를 통하여 백엔드의 서버와 잘 통신이 되고 있는지, 백엔드에서 원하는 데이터 형태는 무엇인지 잘 확인해야 한다.
각자 보내줄 데이터의 형식과 이름이 제대로 통일되어 있지 않으면 데이터를 원하는 곳에 주거나 받아올 수 없다. 이 과정에서 백엔드와의 원활한 의사소통은 필수이다.
1차 프로젝트 때는 특히나 무식했던 관계로 백엔드와의 협의가 원활하지 못했다. 물론 지금도 아주 원활하다고는 못하겠다. 그래도 전번보다 낫지 싶은건, 무슨 말인지는 알아 들으니까.
