[Section 03] JavaScript 동기 비동기

---

< 배운 내용 요약 정리 >

용어	설명
API	소프트웨어나 애플리케이션 다른 소프트웨어, 서비스를 호출 및 사용을 위한 인터페이스
HTTP	웹 브라우저와 서버가 인터넷을 통해 정보를 주고받을 때 사용하는 프로토콜
REST API	API 종류의 하나로 아키텍쳐 스타일을 따름
Fetch API	자바스크립트에서 제공하는 내장 API
async	promise를 편하게 사용하기 위한 sugar syntax
await	비동기 함수를 기다리게 할 때 사용, 꼭 async와 함께 사용

---

< 22. async와 await >

0. API & HTTP & REST API & Fetch API

• APT
  • 소프트웨어나 애플리케이션이 다른 소프트웨어나 서비스를 호출하고 사용할 수
    있도록 해주는 인터페이스
  • API는 HTTP를 통해 동작할 수 있다.
    • 예를 들어 REST API는 HTTP 프로토콜을 기반으로 작동하며,
      클라이언트가 HTTP요청을 통해 API 서버에 데이터를 요청하면
      HTTP응답으로 결과 반환
  • 웹 개발에서 주로 사용되는 API는 REST API, SOAP API, GraphQL 등이 있다
• HTTP
  • 웹 브라우저와 서버가 인터넷을 통해 정보를 주고받을 때 사용하는 프로토콜
  • 웹에서 데이터를 요청하고 응답하는 기본적인 프로토콜
  • 주로 GET, POST, PUT/PATCH, DELETE 매서드 사용
  • HTTPS는 HTTP의 보안 버전으로,
    데이터 전송 시 암호화를 통해 안전하게 정보 교환
• REST API
  • REST 아키텍처 스타일을 따르는 API
  • 웹의 장점을 극대화할 수 있도록 설계된 아키텍처 스타일
  • REST API 구성 요소
    • HTTP 매서드
      • GET : 리소스를 조회할 때 사용
      • POST : 새로운 리소스를 생성할 때 사용
      • PUT : 기존 리소스를 업데이트할 때 사용
      • DELETE : 리소스를 삭제할 때 사용
    • URL 구조
      • 각 리소스는 고유의 URL을 가진다. ex) /users/123
    • 응답 포맷
      • 주로 JSON이나 XML 형식으로 데이터를 주고 받는다.
• Fetch API
  • 자바스크립트에서 제공하는 내장 API
  • 웹 브라우저에서 네트워크 요청을 쉽게 할 수 있도록 도와준다.
  • Promise 기반
    • 비동기 작업을 처리하기 위해 Promise를 반환,
      이를 통해 콜백 함수 대신 .then()과 .catch()를 사용해 비동기 흐름 처리
  • JSON 데이터 처리
    • 서버에서 받는 응답을 .json() 매서드를 사용해 쉽데 JSON데이터로 변환
    • 예시

      const getAPi = () => {
        fetch("https://jsonplaceholder.typicode.com/posts", {
          method: "GET", 
          // 두 번째 옵션이 GET이라면 생략 가능
        })
          .then((response) => {
            if (!response.ok) throw new Error("fetch error");
            return response.json();
          })
          .then((data) => {
            console.log(data);
          })
          .catch(() => {
            console.log("eee");
          });
      };
      getAPi(); // 사이트에서 받아 온 자료의 내용이 모두 출력됨

---

1. JSONPlaceholder 사이트

• 개발자들이 애플리케이션을 테스트하고 연습할 수 있도록
  가상의 RESTful 웹 서비스 API를 제공하는 사이트

JSONPlaceholder - Free Fake REST API

---

2. async

• promise를 편하게 사용하기 위한 sugar syntax
• async 함수에서 return을 명시하지 않으면,
  함수는 기본적으로 Promise.resolve(undefined)를 반환
• 예시

  // ex)
  function fetchNumber() {
    return new Promise((resolve, reject) => {
      resolve(1);
    });
  }
  fetchNumber() //
    .then(console.log)
    .catch(console.error); // 1

• 예시

  // ex) async로 더 간단히 작성 가능
  async function fetchNumber() {
    return 1; // 반환 값이 resolve()
    //   reject를 넣고 싶으면 throw new Error("Error");
  }
  fetchNumber() //
    .then(console.log)
    .catch(console.error);

• 예시

  // ex)
  async function fetchNumber() {
    setTimeout(() => {
      console.log("hi");
    }, 5000);
  }
  fetchNumber() //
    .then(console.log)
    .catch(console.error);

• 예시

  // ex) 화살표 하려면?
  const fetchNumber = async () => {
    return 1;
  };
  fetchNumber() //
    .then(console.log)
    .catch(console.error);

• 예시

  // ex) 비동기를 제어할 수 있는 방법 선택 후 적용
  // setTimeout보다 then이 더 빨리 실행되므로 
  const getSunIcon = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("☀️");
      }, 1000);
    });
  };
  
  const getWeatherIcon = () => {
    const sun = getSunIcon();
    sun.then(console.log); // 구독하게 하기
    // 그냥 console.log(sun)을 하면 Promis함수가 pending 상태로 전환
  };
  getWeatherIcon(); // 해 이모지

---

3. await

• 비동기 함수를 기다리게 할 때 사용
• 꼭 async와 함께 사용
• resolve 또는 어떤 값이 리턴 될 때까지 기다림
• 예시

  // ex )
  const getSunIcon = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("☀️");
      }, 1000);
    }); // 아무 것도 입력하지 않으면 return undefined로 인식
  };
  
  const getWeatherIcon = async () => {
    const sun = await getSunIcon();
    console.log(sun); 
    // sun의 비동기 호출을 기다렸다가 출력
  };
  getWeatherIcon(); // 해 이모지

• 예시

  // ex)
  const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
  const getSunIcon = async () => {
    await delay(1000);
    return "해";
  };
  const getWaveIcon = async () => {
    await delay(1000);
    return "파도";
  };
  const getCloudIcon = async () => {
    await delay(1000);
    return "구름";
  };
  const getWeatherIcon = async () => {
    const sun = await getSunIcon();
    const wave = await getWaveIcon();
    const cloud = await getCloudIcon();
    console.log(sun, wave, cloud); // 해 파도 구름
  };
  getWeatherIcon();

---

< 하루 정리 >

오늘도 여전히 어려운 내용에 머리가 터질 뻔 했다.
근데 지금까지와는 달랐던 점이 있다면, 오전에 머리가 터질 뻔할 때 경아강사님께서
유튜브 영상하나를 추천해주셨고 점심을 먹으면서 영상을 보고 공부를 한 덕분에
오전의 고민은 깔끔하게 사라졌다.
문제는 오후였다... 없어진 고민 그 이상으로 더 큰 고민이 생겼다.
엄청 중요한 개념인 것 같은데 전혀 이해도 못하고 
화면을 봐도 뭘 하고 있는지 알 수가 없었다.
    
그렇게 영혼이 탈탈 털리고 팀 활동 시간에 주어진 문제를 팀원들과 공유하면서 
어떤 점이 잘 못된 것인지 알아가기 시작했다.
물론 문제는 깔끔하게 틀렸고, 용재님께서 자세한 설명을 해주셨다.
설명을 듣던 와중에 강사님처럼 이 내용을 도식화해서 표현하면 
머리에 더 잘 들어오겠다는 생각이 들었고 바로 ppt를 열어 작업하기 시작했다.
    
내 예상보다 훨씬 이해가 잘 됐고 팀원들에게도 도움이 된 것 같아서 뿌듯했다.
이후에 용재님과 강사님의 추가 설명으로 개념을 더 확실하게 이해할 수 있었고
하루동안 우여곡절이 많아 힘들었지만 글을 쓰는 지금 기분은 상당히 좋은 하루였다.