[🍦] 손님~ 진동벨로 알려드릴게요! (1) - promise

Promise

 

fetch는 Promise를 return 하는 함수이다.

 

📍fetch란? 외부에서 데이터(정보)를 가져오는 함수

 

📍Promise가 아닌 경우와 비교하기 (document.querySelector("선택자") vs fetch("주소"))

 

document.querySelector()

const 요소 = document.querySelector(".클래스이름");
console.log(요소) // html 요소가 나온다. 
// ex) <div class="클래스이름"></div>

변수에 담으면 원하는 것이 나온다.

 

fetch()

const response = fetch("https://jsonplaceholder.typicode.com/todos/1");
console.log(response);

이상한 데이터가 나온다. 이게 바로 promise 이다.

이런 promise를 만나면 다른 방법을 찾아야 한다.

 

👇🏻글로 정리한 내용

1. fetch 함수를 일반 함수처럼 사용할 시, 원하는 데이터의 형태로 변환할 수 없다. 
2. JS에서 사용하기 위해서는 json을 이용한 변환이 필요하다. 그 단계는 다음과 같다.
3. fetch 함수는 promise라는 객체를 반환한다.
4. promise 객체는 then이라는 메서드를 갖고 있다.
5. then 메서드는 인풋으로 콜백함수를 받는다.
6. 그 콜백함수의 인자에는 promise 객체의 return 값을 넣어준다.
    콜백함수 안에서는 json 메서드를 통해 JS에서 활용 가능한 객체 형태로 바꿔준다.
7. json도 promise를 return 하기 때문에 또 then으로 받을 수 있다.
8. 결국 JS에서 활용 가능한 array 형태로 결과값을 얻을 수 있다.

 

👇🏻이런 복잡한 방법을 왜 사용할까?

• 만약 세탁기를 돌리고, 세탁기가 완료될 때까지 다른 작업을 못한다면 굉장히 비효율적일 것이다.
• 일반적으로 오래 걸리는 세탁기를 작동한 후 다른 일을 한다. 그리고 세탁기는 알아서 돌아가다 끝낸다.
• fetch는 외부에서 데이터를 가져오는 일이다. 즉, 오래 걸린다. 마치 세탁기처럼
• 코드는 원래 위에서 아래로 순서대로 실행된다.
  그런데 위에 있는 코드가 완료되는데 너무 느리면 아래 코드들은 실행되지 못한다.
• 오래 걸릴 수 있는 코드는 비동기로 실행하여 다음 코드는 계속 진행되도록 만드는 것이 더 좋다.
• 대신 .then을 통해 오래 걸리는 작업이 끝나면 .then() 함수로 결과가 전달되게 만든 것이다.

 

console.log("시작")
fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data); // 2. 얘는 나중에 출력됨 
  });

console.log("fetch 끝났니?"); // 1. 얘가 먼저 출력되고

 

📍fetch 작성법

1. fetch의 인자로 주소 작성

fetch(주소)

 

2. 뒤에 .then(함수) 작성 

fetch(주소).then(() => { })

 

3. then의 콜백함수에 파라미터 및 return 파라미터.json() 작성

fetch(주소).then((파라미터이름) => { 
	return 파라미터이름.json();
})

 

4. .then을 한 번 더 작성 및 파라미터 사용

fetch(주소).then((파라미터이름) => { 
	return 파라미터이름.json();
}).then((필요한데이터) => {
		// 데이터 사용
		console.log(필요한데이터)
})

 

 

options

📍options란?

const options = {
  method: "GET",
  headers: {
    accept: "application/json",
    Authorization:
      "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmOGE3YjI2ZmRmZmFiYmVjMjNhZWE0NjZkMzFkODM2NSIsIm5iZiI6MTcyOTU3OTAwMi43Nzc1MzgsInN1YiI6IjY0NzFhM2NmYTE5OWE2MDBmOTQxZjlhYyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.H2-DM_YlyvlwTr4KI-xacY2oeCrSVxybY2tRcPFRhwU",
  },
};

fetch(
  "https://api.themoviedb.org/3/movie/upcoming?language=en-US&page=1",
  options
)
  .then((res) => res.json())
  .then((res) => console.log(res))
  .catch((err) => console.error(err));

백엔드 개발자가 추가적인 정보를 요청한 경우에 넣는다.

• method
  - GET, POST, PUT, PATCH, DELETE
• headers
  - accept: "application/json": 서버에게 JSON 형식의 응답을 요청한다.
  - Authorization: 인증 정보 넣는 곳 (없을 때도 있음)

작성법: fetch의 두 번째 인자로 넣는다.

fetch(주소, { method: "GET", headers: { ... } })

 

 

 

method

• method의 종류
  1. GET: 조회
  2. POST: 추가, 등록
  3. PUT: 전체 수정
  4. PATCH: 일부 수정
  5. DELETE: 삭제

[문서]

method와 주소가 있다.

주로 백엔드 개발자는 method, 주소를 제공해주며 우리는 사용만 하면 된다.

• method: GET
• 주소: /posts
  • 의미: 게시물 여러 개(posts)를 조회(GET)한다.
  • 하지만 GET 메소드는 생략하면 그냥 fetch가 알아서 GET이라고 생각한다.

fetch("https://jsonplaceholder.typicode.com/posts", { method: "GET" })
// method 생략 가능

fetch("https://jsonplaceholder.typicode.com/posts")

 

• method: GET
• 주소: /posts/1
  • 의미: id가 1인 게시물(/posts/1)을 조회(GET)한다.

fetch("https://jsonplaceholder.typicode.com/posts/1", { method: "GET" })

 

• method: GET
• 주소: /comments?postId=1 vs /post/1/comments
  • 모든 댓글 중 id가 1인 게시물(/comments?postId=1)을 필터링해서 조회(GET)온다.

fetch("https://jsonplaceholder.typicode.com/comments?postId=1", { method: "GET" })

 

• method: POST
• 주소: /posts
  • 게시물들(/posts)에 데이터를 **추가(POST)**한다
  • POST 메소드는 body를 넣을 수 있음
  • body에 추가할 데이터를 넣는다.

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

 

 

• method: PUT
• 주소: /posts/1
  • id가 1인 게시물(/posts/1)을 **수정(PUT)**한다.
  • PUT 메소드는 body를 넣을 수 있음
  • body에 수정할 데이터를 넣는다.

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PUT',
  body: JSON.stringify({
    id: 1,
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

 

• method: PATCH
• 주소: /posts/1
  • id가 1인 게시물(/posts/1)을 **일부 수정(PATCH)**한다.
  • PATCH 메소드는 body를 넣을 수 있음
  • title만 수정

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PATCH',
  body: JSON.stringify({
    title: 'foo',
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

 

• method: DELETE
• 주소: /posts/1
  • id가 1인 게시물(/posts/1)을 삭제(DELETE)한다.

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'DELETE',
});

 

 

 

catch

📍catch란?

에러가 발생할 때 어떻게 처리할지 조작하는 용도이다.

const options = {
  method: "GET",
  headers: {
    accept: "application/json",
    Authorization:
      "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmOGE3YjI2ZmRmZmFiYmVjMjNhZWE0NjZkMzFkODM2NSIsIm5iZiI6MTcyOTU3OTAwMi43Nzc1MzgsInN1YiI6IjY0NzFhM2NmYTE5OWE2MDBmOTQxZjlhYyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.H2-DM_YlyvlwTr4KI-xacY2oeCrSVxybY2tRcPFRhwU",
  },
};

fetch(
  "https://api.themoviedb.org/3/movie/upcoming?language=en-US&page=1",
  options
)
  .then((res) => res.json())
  .then((res) => console.log(res))
  .catch((err) => console.error(err));

 

 

연습용 세팅

[index.html]

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<div id="movie-container"></div>
	<script src="script.js"></script>
</body>

	</html>

 

[script.js]

const options = {
  method: "GET",
  headers: {
    accept: "application/json",
    Authorization:
      "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmOGE3YjI2ZmRmZmFiYmVjMjNhZWE0NjZkMzFkODM2NSIsIm5iZiI6MTcyOTU3OTAwMi43Nzc1MzgsInN1YiI6IjY0NzFhM2NmYTE5OWE2MDBmOTQxZjlhYyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.H2-DM_YlyvlwTr4KI-xacY2oeCrSVxybY2tRcPFRhwU",
  },
};

fetch(
  "https://api.themoviedb.org/3/movie/upcoming?language=en-US&page=1",
  options
)
  .then((res) => res.json())
  .then((res) => {
   // 만약 여기 아래 코드에서 에러가 발생하면 catch로 이동합니다. 
    const movies = res.results;
    const movieContainer = document.getElementById("movie-container");
    movies.forEach((movie) => {
      movieContainer.innerHTML += `<div>${movie.title}</div>`;
    });
  })

 

일부러 에러를 발생시켜본다.

const options = {
  method: "GET",
  headers: {
    accept: "application/json",
    Authorization:
      "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmOGE3YjI2ZmRmZmFiYmVjMjNhZWE0NjZkMzFkODM2NSIsIm5iZiI6MTcyOTU3OTAwMi43Nzc1MzgsInN1YiI6IjY0NzFhM2NmYTE5OWE2MDBmOTQxZjlhYyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.H2-DM_YlyvlwTr4KI-xacY2oeCrSVxybY2tRcPFRhwU",
  },
};

fetch(
  "https://api.themoviedb.org/3/movie/upcoming?language=en-US&page=1",
  options
)
  .then((res) => res.json())
  .then((res) => {
    const movies = res.results;
    // 코드 망가뜨림(document.get 이라는 함수는 없어요!)
    const movieContainer = document.get("movie-container");
    movies.forEach((movie) => {
      movieContainer.innerHTML += `<div>${movie.title}</div>`;
    });
  })

 

catch를 붙여 에러를 처리한다.

const options = {
  method: "GET",
  headers: {
    accept: "application/json",
    Authorization:
      "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmOGE3YjI2ZmRmZmFiYmVjMjNhZWE0NjZkMzFkODM2NSIsIm5iZiI6MTcyOTU3OTAwMi43Nzc1MzgsInN1YiI6IjY0NzFhM2NmYTE5OWE2MDBmOTQxZjlhYyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.H2-DM_YlyvlwTr4KI-xacY2oeCrSVxybY2tRcPFRhwU",
  },
};

fetch(
  "https://api.themoviedb.org/3/movie/upcoming?language=en-US&page=1",
  options
)
  .then((res) => res.json())
  .then((res) => {
    const movies = res.results;
    const movieContainer = document.get("movie-container");
    movies.forEach((movie) => {
      movieContainer.innerHTML += `<div>${movie.title}</div>`;
    });
  })
  .catch((err) => {
    const errorDiv = document.createElement("div");
    errorDiv.textContent = "에러가 발생했습니다. 나중에 다시 시도해주세요.";
    document.body.appendChild(errorDiv);
  });