#10 - Dad Jokes

✅ API 활용

이번 프로젝트는 https://icanhazdadjoke.com/api 라는 API를 활용하여 미국식 농담을 화면에 랜덤으로 띄우는 것이다.

✨ CSS

버튼 클릭시

작아졌다가 커지게 하여 버튼이 클릭되었다는 것을 눈에 보이게 스타일링 할 수 있다.

.change:active {
  transform: scale(0.98);
}

---

✨ JavaScript

async/await와 .then()은 둘 다 JavaScript에서 비동기 코드를 처리하는 방식이다.

async / await사용

✔️ 코드

• 동기 코드처럼 보이기 때문에 가독성이 좋다.
  특히 여러 단계일 때 코드 흐름을 더 쉽게 이해할 수 있다.
• 결과를 기다리기 위해 await 키워드 사용
• Promise가 해결될 때까지 기다리며, 해당 코드 줄에서 다른 작업은 실행되지 않는다.
  (코드 흐름을 동기식처럼 만들어줌)

async function generateJoke() {
  const config = {
    headers: {
      Accept: "application/json",
    },
  };

  const res = await fetch("https://icanhazdadjoke.com", config);
  const data = await res.json();

  joke.innerHTML = data.joke;
}

.then 사용

• 콜백 체인을 형성하므로, 복잡한 비동기 처리를 할 때 중첩이 깊어져 복잡하다.
• .then을 함수 호출 뒤에 붙여 결과를 처리한다.
  (이 경우 콜백 함수로 코드를 넣어 처리해야 하므로 콜백 지옥의 가능성이 있다.)
• 비동기적으로 실행되고, .then 뒤에 연결된 콜백은 Promise가 해결될 때 실행 된다. (then = 그 다음)

fetch("https://icanhazdadjoke.com", config)
    .then((res) => res.json())
    .then((data) => {
      joke.innerHTML = data.joke;
  // 여기 안에 원하는 동작을 하는 코드를 넣어 처리해야하므로!!
    });

✔️ 코드

function generateJoke() {
  const config = {
    headers: {
      Accept: "application/json",
    },
  };
   fetch("https://icanhazdadjoke.com", config) // promise 객체를 돌려줌 -> then으로 받기
  		.then((res) => res.json())
  		.then((data) => {
  		joke.innerHTML = data.joke;
  		});
}

	async / await	.then
동작	동기식 처럼 동작	비동기식처럼 동작
에러 처리 방식	try/catch	.catch() - 각 단계에서 에러 잡음
동작 방식	Promise가 해결될 때까지 기다림!	Promise가 해결될 때까지 기다림 - 콜백체인 가능성있음
가독성	가독성 좋음	복잡하면 안좋음

함수 미리 호출

버튼을 눌렀을 때만 함수가 호출되는 이벤트를 작성한다면, 버튼을 누르지 않으면 글자가 내가 정한 예시 글자 그대로 이므로 이런 경우 초기화를 하고 싶을 때 그냥 함수를 미리 호출해서 초기화 하면 된다!!

generateJoke();

changeButton.addEventListener("click", generateJoke);

---

🎯 배운 개념 정리

API 사용

postman 사용법

1. My Workspace에 들어가서 연습할 Collection을 만든다.
   

2. Add a Request 를 눌러 새로운 요청을 추가한 다음 API 링크를 붙여넣기 한다.
   

3. send 버튼을 누르면 결과로 복잡한 HTML 형식의 결과가 뜬다.
   이것을 json 으로 바꿔야 한다!
   

4. Header 에서 Key - Acception & Value - application/json을 추가한 다음 다시 send 버튼을 눌러 전송한다.
   

5. 그러면 간단하게 json 형식의 결과를 반환받을 수 있다.
   

+++ curl 을 이용하는 방법

curl -H "Accept: application/json" https://icanhazdadjoke.com/

이 문장을 URL 입력칸에 넣어주면 알아서 Key와 Value를 넣은 후 보내서 바로json의 값을 반환 받을 수 있다.
(key, value를 따로 적어줄 필요 없음 / URL 안에 포함되어 있음)

API

💡 API 란?
소프트웨어 애플리케이션이 서로 통신하여 데이터, 특징 및 기능을 교환할 수 있도록 하는 일련의 규칙 또는 프로토콜이다.

핵심은 애플리케이션을 서로 연결하여 서로 통신할 수 있다는 점이다.

API를 사용하는 이유

• 개발자가 처음부터 개발하는 대신 다른 애플리케이션의 데이터, 서비스 및 기능을 통합할 수 있어 개발 시간이 단축된다.
• 필요한 정보만 공유하고 다른 세부 정보는 숨길 수 있으므로 시스템 보안에 도움이 된다.

API 작동 순서

예를 들어 내가 쇼핑몰에서 옷을 사는 상황을 가정해보자!
토스를 이용하여 결제를 하려고 하면, 이것은 타사 시스템을 사용하는 상황이다. 이때 API 가 사용되는 것이다.

1. 결제 버튼을 클릭 (요청)
   정보를 검색하기 위한 API 호출이 전송된다.
   API의 URI 를 통해 애플리케이션에서 웹 서버로 처리되며 요청 헤더 및 본문이 포함된기도 한다.

2. API가 제품 웹 페이지로부터 유효한 요청을 받으면
   외부 소프트웨어 또는 웹서버 (지금은 토스)로 호출한다.

3. 서버는 요청된 정보와 함께 API에 응답을 보낸다.

4. API는 데이터를 초기 요청 애플리케이션 (지금은 쇼핑몰)으로 전송한다.

API 인증키

예를 들어 내가 다른 나라로 여행을 가는 항공권을 예약하는 상황이라고 가정해보자.
내가 원하는 날짜에 예약이 되는 지를 알아보려면 항공사의 데이터 베이스를 읽어와야한다.
하지만 모든 사람들이 다 항공사의 데이터 베이스를 읽게 된다면 문제가 생길 수 있으니 허가한 사람에게만 비밀 코드를 알려주는데, 이것을 API 인증키라고 부른다.

open API

외부 사이트와 자유롭게 활용 및 공유되도록 설계된 것이다.
외부 개발자는 이러한 API 내의 기능을 활용하기 위해 애플리케이션을 빌드할 수 있다.

일부 회사는 공개 문서를 제공하지 않아 개발자가 승인을 위해 앱을 제출할 수 있도록 허용 후, 일부 제공하는 경우도 있다.

fetch

fetch API 는 자바스크립트 인터페이스를 제공해 HTTP 파이프라인의 일부에 접근하고 조작한다.
➡️ 요청 & 응답

예전에는 서버 단에서 API를 호출을 했지만 이제는 클라이언트 단에서 직접 API를 호출하는 경우가 많다.

fetch()함수는 원격 API를 간편하게 호출할 수 있도록 브라우저에서 제공하는 함수이다.

fetch 사용법

첫번째 인자에는 URL, 두번째 인자로는 옵션 객체를 받아 promise 타입의 객체를 반환한다.

💡 옵션 객체
HTTP 방식(method), HTTP 요청 헤더 (headers), HTTP 요청 전문 (body)등을 설정해 응답 객체로 부터 status, headers, body 등을 읽어올 수 있다.

• API 호출이 성공한 경우
  응답 (response) 객체를 반환
• API 호출에 실패한 경우
  예외 (error) 객체를 반환

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

💡 Pormise란?
https://www.daleseo.com/js-async-promise/

GET 호출

원격 API에 있는 데이터를 가져올 때 쓰이는 GET 방식의 HTTP 통신
디폴트로 GET 방식으로 작동하고, 요청 전문을 받지 않기 때문에 옵션인자가 필요 없다.

fetch("https://jsonplaceholder.typicode.com/posts/1").then((response) =>
  console.log(response)
);

// 응답 객체
Response {status: 200, ok: true, redirected: false, type: "cors", url: "https://jsonplaceholder.typicode.com/posts/1", …}

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => response.json())
  .then((data) => console.log(data));

// 응답 객체 - json
{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit↵suscipit recusandae consequuntur …strum rerum est autem sunt rem eveniet architecto"
}

POST 호출

https://www.daleseo.com/js-window-fetch/

---

✨ API 없이 진행

처음엔 API가 필요할 줄 모르고 배열을 이용하여 난수 처리를 하고 진행하려고 했었는데, 밑은 그 코드이다. 이 프로젝트는 API가 있어서 그를 사용했지만 없었다면 이 방법으로 진행해도 되었을 것 같당

const jokes = ["A", "B", "C", "D", "E"];
const changeButton = document.querySelector(".change");
const joke = document.querySelector(".joke");

changeButton.addEventListener("click", () => {
  let randIdx = Math.floor(Math.random() * jokes.length);
  joke.innerText = jokes[randIdx];
});