HTTP 그리고 axios와 fetch
프로젝트 진행 중 백엔드 팀원과 요청, 응답을 테스트 하는 과정에서 이슈가 있었다.
GET 요청을 통해 조회를 시도했지만 클라이언트 쪽에서 에러가 발생한 것이다.
POSTMAN으로 요청을 보내는 URL을 타고 들어가면 분명 조회가 잘 되는데..axios의 형식을 바꿔 보기도하고, fetch로 해보고 할 수 있는 것들을 모두 시도해본 후에야 깨달았다. GET요청을 할 땐 POST나 PUT과 같은 다른 메서드와 달리 클라이언트에서 서버로 데이터를 보낼 수 없는 것이었다. 애초에 백엔드 쪽에서 요청 받을 데이터를 지정하지 않고 params를 사용해야 했었다. 이와 같은 경험을 토대로 미흡했던 HTTP 통신 부분을 제대로 짚고 넘어가고자 마음 먹었다.
HTTP
- 인터넷에서 데이터를 주고받을 수 있는 프로토콜(규칙)
HTTP 메시지
- 시작줄, 헤더, 본문으로 구성
요청
- 시작줄(HTTP 메서드, 주소, HTTP 버전), 헤더(요청에 대한 정보), 본문(요청할 때 보낼 데이터)
응답
- 시작줄(HTTP 버전, 상태코드, 상태 메시지), 헤더(응답에 대한 정보), 본문(요청한 데이터)
REST
- HTTP 메서드를 동사로 보고 주소를 자원으로 보는 방식
그 밖에
- GET과 DELETE 요청 시에 본문을 어떻게 처리해야 한다는 정의가 없기 때문에 본문을 같이 보내지 않음 → Query String Parameters 사용(예로, /user?id=1&name=solda)
- 서버는 요청 메시지에 담긴 본문을 받아 파싱(해석)한 후 사용
HTTP 헤더
- 종류가 다양하지만 이번 프로젝트를 진행하면서 자주 보았던 헤더만 먼저 정리하고자 한다.
공통
- Content-Type : 클라이언트에서 서버로 데이터를 보낼 때 www-url-form-encoded, multipart/form-data 등이 있음
요청
- Accept : 요청을 보낼 때 서버에 이런 타입(MIME)의 데이터를 보내줬으면 좋곘다고 명시
- Authorization : JWT나 Bearer과 같은 인증 토큰을 서버로 보낼 때, API 요청할 때 사용
- Origin
응답
- Access-Control-Allow-Origin : 서버에서 클라이언트 주소를 적어주어야 에러가 발생하지 않음
AJAX
- 자바스크립트를 사용한 비동기 통신
- 클라이언트와 서버 간에 XML를 주고 받음
- XHR(XMLHttpRequest)객체를 통해 전체 페이지를 리로드 하지 않고 필요한 데이터만 로드
axios
const options = {
method: "POST",
url: "http://www.example.com",
headers: {
"Accept": "application/json",
"Content-Type": "application/json; charset=UTF-8"
},
data: {
key: value
}
};
axios(options);
- JSON 데이터로 자동변환
- 응답시간 초과 설정하는 방법이 존재
- 브라우저 호환성 유리
- Promise 객체 반환
fetch
const url = "http://www.example.com";
const options = {
method: "POST",
mode: "cors",
headers: {
"Accept": "application/json",
"Content-Type": "application/json; charset=UTF-8"
},
body: JSON.stringify({
key: value
})
};
fetch(url, options);
- ES6부터 자바스크립트 내장 라이브러리로 들어와 import 하지 않고 사용이 가능
- 지원하지 않는 브라우저가 존재
- Promise 객체 반환
결론
- 자바스크립트를 사용한 비동기 통신
- 클라이언트와 서버 간에 XML를 주고 받음
- XHR(XMLHttpRequest)객체를 통해 전체 페이지를 리로드 하지 않고 필요한 데이터만 로드
axios
const options = {
method: "POST",
url: "http://www.example.com",
headers: {
"Accept": "application/json",
"Content-Type": "application/json; charset=UTF-8"
},
data: {
key: value
}
};
axios(options);
- JSON 데이터로 자동변환
- 응답시간 초과 설정하는 방법이 존재
- 브라우저 호환성 유리
- Promise 객체 반환
fetch
const url = "http://www.example.com";
const options = {
method: "POST",
mode: "cors",
headers: {
"Accept": "application/json",
"Content-Type": "application/json; charset=UTF-8"
},
body: JSON.stringify({
key: value
})
};
fetch(url, options);
- ES6부터 자바스크립트 내장 라이브러리로 들어와 import 하지 않고 사용이 가능
- 지원하지 않는 브라우저가 존재
- Promise 객체 반환
결론
const options = {
method: "POST",
url: "http://www.example.com",
headers: {
"Accept": "application/json",
"Content-Type": "application/json; charset=UTF-8"
},
data: {
key: value
}
};
axios(options);
const url = "http://www.example.com";
const options = {
method: "POST",
mode: "cors",
headers: {
"Accept": "application/json",
"Content-Type": "application/json; charset=UTF-8"
},
body: JSON.stringify({
key: value
})
};
fetch(url, options);
- ES6부터 자바스크립트 내장 라이브러리로 들어와 import 하지 않고 사용이 가능
- 지원하지 않는 브라우저가 존재
- Promise 객체 반환
결론
웹 개발을 하기 전에 HTTP의 기본 개념을 어느정도 학습했다면 에러와 맞서기가 훨씬 수월했을 거란 생각이 들었다. 꾸준히 프로젝트를 진행하면서 서버와의 통신에 익숙해지는 수밖에 없다.
Author And Source
이 문제에 관하여(HTTP 그리고 axios와 fetch), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@solda/HTTP-그리고-axios와-fetch저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)