`fetch`는 컴퓨터에게 다른 곳에서 정보를 가져오라는 하는 명령이다.
간단히 말하면, `fetch`는 우리가 인터넷에서 무언가를 찾을 때 사용하는 도구이다.
우리가 컴퓨터에게 "이 주소로 가서 정보를 가져와줘!"라고 말하면,
`fetch`는 그 주소로 가서 정보를 가져오고, 우리가 그 정보를 활용할 수 있게 도와주는 것이다.
간단한 예제를 들어보자.
fetch('https://www.exampleapi.com/data')
.then(response => {
return response.json(); // 서버에서 데이터가 도착하면 이 부분이 실행됨.
//JSON 형식으로 변환하여 데이터 출력
})
.then(data => {
// JSON 형식으로 변환된 데이터를 사용하여 다른 작업을 수행함
console.log(data); //서버에서 받은 데이터 출력
})
.catch(error => {
console.error('데이터 가져오기 실패:', error);
})
- `.then( )`
: 서버에서 응답이 오면 그에 따라 실행될 함수를 지정하는 역할.
`then( )`은 "응답이 왔을 때, 이 작업을 수행해줘!" 라고 말하는 것과 비슷하다.
- `response`
: 서버에서 보내주는 답변. 질문을 하면, 서버는 그에 맞는 대답을 response에 담아서 보내준다.
"고양이 사진을 보여줘!" 라고 요청한다면, 서버는 고양이 사진이 담긴 특별한 상자인 `response`를 우리에게 보내준다.
그리고 이 정보를 우리가 이해할 수 있는 형식으로 변환해주는 것이 중요하다.
이 때 `.json()`을 사용해서 JSON 형식으로 변환하는 것이다.
(p.s. JSON 형식에는 기본적으로 객체(Object)와 배열(Array)이라는 두 가지 주요 유형이 있음)
한마디로, `response`는 서버의 답변을 담은 특별한 상자이고, `.json()`은 그 상자 안의 정보를 꺼내서 이해하기 쉬운 형식으로 바꿔주는 역할을 하는 것이다.
- 그럼 `.then(data => {console.log(data); })` 는?
`response`에서 받아온 정보들을 가지고 뭔가를 할 때가 있는데 그 "뭔가"를 지정하는 부분이다.
여기서 `data`는 서버가 보낸 답변 안에 있는 정보들이다.
그리고 {console.log(data); } 는 받아온 정보를 화면에 출력하는 역할을 하는거다.
쉽게 말해, "서버에게 무언가를 부탁하고, 그 답변을 받아오면 그에 대한 처리를 해줘!"라고 이해하면 된다.
그래서 `.then( )`은 서버의 답변을 받아온 다음에 무슨 일을 할지를 정하는 부분이다.
이걸 적용한 간단한 예제를 들어보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>고양이 사진 보기</title>
</head>
<body>
<!-- 이미지를 표시할 곳 -->
<img id="catImage" alt="고양이 사진">
<script>
// fetch를 사용하여 고양이 사진 정보 가져오기
fetch('http://www.thecatpic.com/v1/images/search')
.then(response => response.json())
//fetch로 가져온 데이터를 사용하는 곳
.then(data => { //여기서 data는 가져온 정보를 담고 있는 우리에게 필요한 정보통.
//가져온 이미지 정보를 이용해 화면에 표시하기 위한 변수 담기
//catImg란 이름의 HTML요소(이미지)를 가져와서 catImg에 저장한다.
const catImg = document.getElementById('catImg');
catImg.src = data[0].url //가져온 이미지 주소를 화면에 표시
//위의 코드는 `data` 안에 있는 첫 번째(index가 0인) 고양이 사진의 주소를 가져와서 그 주소를 사용해 화면에 고양이 사진을 표시하고 있다.
catImg.alt = '고양이 사진'; //화면에 표시되는 이미지 설명
})
// 고양이 사진을 가져오는 중 인터넷 연결이 끊겼다면 `catch`가 그 문제를 잡아내서 오류 메세지를 보여줄 수 있다.
.catch(error => { //`catch`는 문제가 생겼을 때, 그 문제를 잡아내고 처리하는 용도로 쓰인다.
console.error('이미지 가져오기 실패:', error);
})
</body>
</html>
여기서 `data[0].url`은 가져온 데이터 중에서 첫 번째(index 0) 고양이 사진의 주소를 의미한다.
그리고 이 주소를 `catImg.src`에 넣어주면, 화면에 해당 고양이 사진이 나타나게 된다.
`catImg`는 화면에 표시될 이미지를 담고 있는 특별한 상자인데,
`.src`는 그 상자 안에 어떤 이미지를 보여줄지를 나타내는 속성이다.
마치 우리가 앨범에서 특정 사진을 선택해서 보고 싶다면, 그 사진의 주소를 찾아서 앨범에 넣는 것처럼,
`catImage.src`에는 고양이 사진의 주소가 들어간다.
그러면 브라우저는 그 주소에서 사진을 찾아와서 화면에 보여준다.
그래서 `.src`에 주소를 넣으면, 화면에 해당 이미지가 표시되게 된다.
'Javascript > 기초' 카테고리의 다른 글
| 웹 페이지에서 입력된 데이터를 Firebase DB에 저장하는 코드 (0) | 2023.12.15 |
|---|---|
| 관계형 데이터베이스 VS 비관계형 데이터베이스 사용 이유 기초 (0) | 2023.12.14 |
| [배열] toString 메서드 (0) | 2023.12.04 |
| [조건문] if문이란? (0) | 2023.11.29 |
| [자료와 변수] - 자료형 (0) | 2023.11.28 |