TIL 20 React - fetch()

1. fetch()

fetch()함수는 백엔드 서버에서 API를 호출하여 서버와 통신할 수 있게 해주는 함수이다. 그리고 과거에는 비동기방식으로 브라우저에서 직접 HTTP 통신을 하기 위해 Ajax를 사용했었다. 지금은 거의 사용되지 않지만 공부를 하며 사용했던 적이 있었다. 사용률이 적어진 많은 이유가 있겠지만 내가 느낀 바로는 코드가 너무 복잡하다.

function DeleteWine(num) {						
	var wine_name=$("#wine_name"+num).text();
	var count=document.getElementById("wine_count"+num).value;죽
	$.ajax({
		type : "post",
		url : "DeleteWineCart",
		data : {"wine_name" : wine_name, "count" : count, "id":'<%= user_dto.getId() %>', "w_seq":'<%= wine_list.get(i).getW_seq() %>'}, 
		contentType: "application/x-www-form-urlencoded; charset=UTF-8",
		dataType : "text",
		success : function(data) {
			alert("위시리스트에서 삭제되었습니다.")
			location.href = "wine_home.jsp";
			},
		error : function() {
			alert("다시 시도해 주세요")
		}
	});
}

과거에 비동기방식을 구현하기 위해 Ajax를 사용하기위해 작성했던 코드인데 다시 봐도 눈이 핑돈다.

하지만 fetch()를 봐보면 일단 눈에 더 잘 들어오고 이해하기 쉽다. 물론 상황에 따라 fetch도 코드 자체가 길어질 수는 있겠지만 내가 느낀 것은 일단 무엇을 주고 받을 지에 대한 가시성이 더 확실하다.

fetch("http://10.58.5.21:8000/users/sign_in", {
	method: "POST",
	body: JSON.stringify({
	email: inputId,
	password: inputPw,
   }),
})

2. fetch() 기본 형태

fetch()함수는 첫 번째 인자로 URL, 두 번째 인자로 옵션 객체를 받고, Promise타입의 객체를 반환한다. API호출이 성공했을 경우 응답 객체를 resolve하고, 실패했을 경우 예외 객체를 reject한다. 아직 Promise의 개념에 대해 잘 알지 못해서 이 부분은 따로 공부가 더 필요하다.

fetch() 기본 형태

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error))

옵션(options) 객체에는 HTTP 방식(method), HTTP 요청 헤더(headers), HTTP 요청 전문(body) 등을 설정해줄 수 있다.

응답(response) 객체로 부터는 HTTP 응답 상태(status), HTTP 응답 헤더(headers), HTTP 응답 전문(body) 등을 읽어올 수 있다.

3. fetch() - method: GET

fetch() 함수에서 default method는 GET이다. GET방식은 단순히 원격 API에 있는 데이터를 가져올 때 쓰인다. GET방식은 요청 전문을 받지 않기 때문에 옵션 객체가 필요가 없다.

fetch('https://api.google.com/user/3')
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        console.log(`${res.user.name}` 님 환영합니다);
    }
  });

4. fetch() - method: POST

POST방식은 백앤드와 통신을 하기 위해 데이터를 주고 받아야 한다. 그렇기 때문에 GET과는 달리 옵션 객체가 필요해진다.

fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "yeri",
        batch: 1
    })
  })
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        alert("저장 완료");
    }
  });

• 두 번째 인자에 method와 body를 보내준다.
• method는 post
• body는 JSON형태로 보내기 위해 JSON.stringfy()를 사용하였다.
  ++ JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환한다.

5. 정리

• fetch()를 이해하기 위해 Promise에 대해 공부가 필요하다.

• 로그인이 성공하면 백엔드에서 token을 보내주는데 이 토큰이 로컬에서 어디에 저장되어 있을 까에 대해 공부를 했는데 응답 객체의 HTTP 응답 헤더에 보관된다.

• API의 주소, method 방식은 API를 만든 개발자한테 물어봐야한다