안녕하세요
인포돈 입니다.
오늘 알아볼 것은 Javascript를 이용하여 ajax의 fetch() 사용법에 대해 알아보겠습니다.
** 참고사항
- 해당 글은 web에서의 활용을 집중적으로 다루고 있습니다.
웹에서 자바스크립트에 대해 공부를 하다 Ajax라는 라이브러리를 알게 되었습니다. Ajax의 경우 자바스크립트에서 웹 페이지를 부분적으로 바꾸고 싶어 만들어진 라이브러리입니다. 쉽게 말하면 바뀌어야 될 웹페이지만 바뀌고 바뀌지 않아야 할 웹페이지는 그대로 내버려 두도록 도와주는 라이브러리다.
예를 들어 웹페이지 카테고리, 대표 이미지 등은 해당 웹에서 다른 카테고리로 넘어가더라도 상단에 계속 남아있어야 됩니다. 만약 이러한 페이지가 수십억 개 있다면, 많은 용량을 잡아먹게 됩니다. 이러한 단점을 해결해주기 위해 만들어졌다고 볼 수 있습니다.
fetch 기본 사용법
해당 라이브러리를 사용하기 위해서는 아래 코드를 head부분에 넣어주시면 됩니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>구글에서 제공하는 ajax라이브러리입니다. 해당 태그를 이용해 ajax를 사용할 수 있습니다.
이번 글에서 집중적으로 다루어볼 것은 바로 fetch API입니다.
fetch API는 기본적으로 아래와 같은 형태를 띠고 있습니다.
fetch(url, options)
.then((response) => console.log("response:", response))
.catch((error) => console.log("error:", error))fetch 메서드는 자바스크립트에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 도와주는 메서드입니다. 쉽게 해당 메서드를 해석해보면 해당 url에 요청을 한다. 하는데 option(추가적인 데이터)을 추가해서 요청한다. 그리고 해당 요청이 잘 전달되면 response를 출력하고 그렇지 않으면 error를 출력해라.
즉, 앞서 말했듯이 ajax는 바꿔야 할 일부분만 바꾸기 위해 사용됩니다. 그중에 fetch 메서드를 이용하면, 해당 페이지의 일부분만 바꿔달라 요청을 할 수 있음을 알 수 있습니다.
여기서 option은 어떻게 작성해야 될까?
옵션은 해당 코드처럼 작성할 수 있다.
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: JSON.stringify(data)
})
.then(response => {
console.log(response);
})
.catch(error => console.log(error));하나의 객체 형태임을 알 수 있습니다. 각각의 쓰임새에 대해 설명해드리겠습니다.
method : 통신방법입니다. 우리가 쉽게 찾아볼 수 있는 http 또는 https 이런 것들이 바로 통신의 방법을 의미합니다. fetch에서 사용하는 통신방법은 GET, POST, PUT, DELET방식이 있으며 디폴트 값은 GET입니다.
(디폴트 get통신 방법은 option을 따로 지정해주지 않아도 사용이 가능합니다.)
headers : 요청 헤더에 대한 정보를 나타내는 정보
body : 요청을 보내는 데이터를 나타내며, 여러 가지 자료형을 대입할 수 있다
*fetch의 경우 ajax의 메서드로 비동기식 형식을 취한다.
fetch(url, options)
.then((response) => console.log("response:", response))
.catch((error) => console.log("error:", error))
console.log(1);
console.log(2);쉽게 말하면 병렬 형태로 진행이 된다. 네트워크로 요청을 보내면 아주 잠시 텀이 생길 때 다른 작업을 동시에 하는 방식을 의미합니다. 해당 코드대로 작성하면 아래 코드 형태로 출력이 됨을 알 수 있을 것입니다.
1
2
response { ~~ }
response가 무엇인가?
response는 fetch를 성공했을 때 (요청에 성공했을 때) 웹에서 넘겨주는 객체입니다. (그냥 약속된 반환입니다.) 해당 객체에는 여러 속성들이 있는데 그중에 저희가 집중해야 될 것은 바로 status라는 속성입니다.
status = 200 일시 우리가 보낸 fetch가 성공적으로 요청된 것이고
status = 404 일시 우리가 보낸 fetch가 실패했다는 의미입니다.
해당 부분을 잘 이용하면, 실패했을 경우의 예외처리를 할 수 있다고 생각합니다.
