2021. 3. 19. 17:52ㆍFront-end/Javascript
안녕하세요, 이번 시간에는 fetch API 사용법에 대해 알아보겠습니다.
지난시간에 Ajax가 무엇인지에 대해 개념적으로 알아보는 시간을 가졌는데요.
Ajax를 구현한 여러가지 방법 중 최신 방법이 fetch API 입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="fetch" onclick = "alert('hi')">
</body>
</html>
↑ fetch.html
이런 파일을 작성해보았습니다. fetch라고 써있는 버튼이 있고 클릭하면 hi라는 경고창이 뜨게 하는 코드입니다.
일단은 우리가 Ajax를 사용하기 위해서 필요한 코드를 하나하나 이해하기 전에 기계적으로 타이핑해보겠습니다.
<body>
<input type="button" value="fetch" onclick = "
fetch('css').then(function(response){
response.text().then(function(text){
alert(text);
})
})
">
</body>
↑ fetch.html
그리고 css.txt 파일에 ' <h2>CSS</h2> CSS is .... ' 라고 적었습니다.
fetch.html을 실행하고, 개발자도구-network에서 확인해보면,
버튼을 누르기 전에는 fetch.html만 존재하고 있습니다.
이 상태에서 버튼을 누르면,
경고창이 뜨면서 경고창 안의 내용은 css.txt안의 내용으로 채워졌고 fetch.html 밑에 css라는 파일이 생긴 것을 확인할 수가 있습니다.
만약 html.txt의 내용으로 채우고 싶다면?
<body>
<input type="button" value="fetch" onclick = "
fetch('html').then(function(response){
response.text().then(function(text){
alert(text);
})
})
">
</body>
간단하게 fetch('') 이 괄호안에 부분만 바꾸어주면 됩니다.
<body>
<article>
</article>
<input type="button" value="fetch" onclick = "
fetch('html').then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML = text;
})
})
">
</body>경고창이 아니라 내부에 글씨를 채우고 싶다면 article이라는 태그를 추가하고 querySelector를 이용해서 article을 가져온다음 innerHTML로 text를 대입하면 될 것입니다.
지금은 위의 코드가 무슨 의미인지 이해할 수 없지만, 일단은 '저 코드는 서버에게 html이라는 파일을 요청하고 응답이 끝나면 최종적으로 alert(text)가 실행되면서 서버가 응답해준 데이터가 text라는 변수에 담겨있다'는 사실만 숙지하면 됩니다.
다음시간부터는 위의 fetch API 코드의 의미를 더 자세하게 알아보도록 하겠습니다. (☆▽☆)
'Front-end > Javascript' 카테고리의 다른 글
| [Ajax] fetch API - response 객체 (0) | 2021.03.21 |
|---|---|
| [Ajax] fetch API - 요청과 응답 (0) | 2021.03.21 |
| [Ajax] Ajax란? (0) | 2021.03.19 |
| Promise - 콜백 지옥을 Promise로 바꾸기! (0) | 2021.02.05 |
| Promise - Promise Chaining & Error Handling (0) | 2021.02.05 |