저번에 ES6의 내장함수인 Fetch함수를 이용해서 API를 호출해보았다. ( 궁금한 사람은 아래 링크 참조 )
https://bongra.tistory.com/131
[JS] ES6 내장 함수인 Fetch를 활용하여 비동기 통신을 해보자. ( 오픈 API로 데이터 받아오기 )
며칠전에 옆 팀에 놀러갔다가, 같이 일했던 선임이 Fetch함수를 이용해서 비동기통신을 하고 있는 걸 보고 나도 한번 써보고 싶어져서 이렇게 정리한다. 지금까지는 ajax아니면 axios ( axios를 더 많
bongra.tistory.com
이제 Fetch함수를 활용해서 API호출은 할 수 있게 됬는데, 정확히 Fetch함수의 구조와 활용형태에 대해서는 잘 몰라서
이번에 정리해보려고 한다. ( 실습위주가 아니라, 그냥 정리임 )
Fetch함수 구조
============================================================================
우선 Fetch함수의 전신은 다음과 같다.
let fetchTest = fetch(url, [options]);url 부분에는 API호출 URL이 들어갈테고.. 그럼 options는? 기존 비동기 통신에 사용한 ajax와 axios와 비슷하다.
options 종류
1. method : 요청 방식을 지정함
let res = fetch(url, {
method : 'GET', -- 또는 method : 'POST'
});
2. headers : API요청시 파라메터 값 설정
let res = fetch(url, {
headers : {
'Content-type' : 'application/json',
'openApiID' : 'TEST', -- openApi 인증 아이디
'openApiPW' : 'abc1234', -- openApi 인증 비밀번호
}
});
3. body : 전달하는 형태
let res = fetch(url, {
body : JSON.stringify(data)
-- data를 JSON형태로 변환하여 파라메터에 담음
-- 이종간 서버통신(클라이언트<->서버)를 할 때는 JSON으로 보내는 것이 좋다는 것을 잊지 말자!
});
위를 전부 합치면 대략 다음과 같은 형태가 된다.
let res = fetch(url, {
method : 'GET',
headers : {
'Content-type' : 'application/json',
'openApiID' : 'TEST',
'openApiPW' : 'abc1234',
},
body : JSON.stringify(data)
});
-- 나는 GET방식으로 해당 데이터들을 JSON형태로 보내겠다. 라는 의미가 됨
근데 쓰면서 궁금해진건데, headers에서는 부가적인 정보를 적고, body에서는 데이터를 보낸다.
예를 들면
headers에 있는 Content-type : application/json은 나는 데이터를 json형태로 보낼거야 라고 서버에 알려주는 것이고,
body안의 data를 stringify함수를 이용해서 실제로 json형태로 변경한 다음 보내준다.
그럼 어떨 때 body를 쓸까?
body는 보통 POST 요청을 할 때 사용 된다. 즉, 클라이언트의 데이터를 가지고 서버에 데이터를
추가 또는 업데이트를 할 때 사용한다는 의미이다.
그러니, 단순 조회를 하는 GET이나 DELETE같은 곳에서는 body를 사용하지 않는다고 한다.
나는 지금까지 보통 비동기통신을 통해 API서버에서 데이터를 '단순조회'하는데만 사용해서 POST는 생소하다.
기왕 정리하는 겸 POST요청을 여기에서 한번 해보도록 하자. ( GET은 API호출 할 때 자주 써서.... POST만 안써봄 )
Fetch POST 요청
============================================================================
우선 껍데기를 다음과 같이 만들었다.
 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>Fetch POST 테스트</div>
<button onclick="fetchPost()">클릭</button>
<script type="text/javascript">
const fetchPost = () => {
};
</script>
</body>
</html>저 위에 [클릭] 버튼을 누르면 fetchPost 함수를 호출하도록 만들었다. 이제 저 fetchPost함수안에,
fetch함수를 통해 POST요청을 하도록 해보자. ( Controller까지 가고, DB에 적재 된 것 까지만 확인해보겠다. )
우선 fetch함수를 다음과 같이 작성한다.
<script type="text/javascript">
const fetchPost = () => {
const url = 'fetchTestPro.do';
//테스트용 객체 생성
let testData = {
'txt' : '텍스트입니다.',
'number' : 256
};
let res = fetch(url,{
/*
method : POST방식으로 비동기 통신 요청,
headers : 보내는 데이터타입은 json형식,
body : 객체 데이터를 json형식으로 변경하여 담음
*/
method : 'POST',
headers : {'Content-type' : 'application/json'},
body : JSON.stringify(testData)
}).then(res => res.json());
};
</script>
이렇게 하고 버튼을 클릭하면?
JSON 형식의 데이터를 서버로 가져오는 것을 알 수 있다. 저기에서 이제 JSON데이터를 파싱해서 사용하든
사용자가 알아서 DB에 넣거나 UPDATE 하면 될 거 같다. 나중에 JSON형태의 데이터 파싱하는 것도 정리해야지..
