[UMC]비동기

Web 7주차 워크북

UMC notion

📝 실습 체크리스트

• [ ]

🔥 트러블 슈팅(실패한 경험도 성장을 위한 경험!)

• 트러블 슈팅 양식
  [ 문제 원인 ]
  [ 해결 방안 ]
  [ 참고 자료 ]

핵심 키워드 🎯

• 동기 vs 비동기
  동기 = synchronous : 순서대로 일을 처리하는 방식
  비동기 = asynchronous : 순서대로 일을 처리하지 않고 빨리 처리할 수 있는 것들을 먼저 처리하는 방식

• callback

  • 파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수
  • 사용 원칙
    익명의 함수 사용 : 함수의 내부에서 실행되기 때문에 이름을 붙이지 않아도 된다.
    함수의 이름(만) 넘기기 : () 를 붙일 필요가 없다.
    ex) function add(num, callback) {}

  const posts = [
    { post_id: 1, post_title: "첫번째 글" },
    { post_id: 2, post_title: "두번째 글" },
    { post_id: 3, post_title: "세번째 글" },
  ];
  
  const comments = [
    { post_id: 1, comment_id: 1, comment: "첫번째 글 첫번째 코멘트" },
    { post_id: 2, comment_id: 1, comment: "두번째 글 첫번째 코멘트" },
    { post_id: 2, comment_id: 2, comment: "두번째 글 두번째 코멘트" },
    { post_id: 2, comment_id: 3, comment: "두번째 글 세번째 코멘트" },
    { post_id: 3, comment_id: 1, comment: "세번째 글 첫번째 코멘트" },
    { post_id: 3, comment_id: 2, comment: "세번째 글 두번째 코멘트" },
  ];
  
  const postNum = 2;
  
  const getPost = (id, onSuccess, onError) => {
    //onSuccess() -> X
    setTimeout(() => {
      const post = posts.find((post) => post.post_id === id);
      if (post) {
        onSuccess(post.post_id); //콜백함수(함수 내부에서 실행하는 함수)
      } else {
        onError("찾는 포스트 없다"); //콜백함수
      }
    }, 3000);
  };
  
  const getComments = (post_id, onSuccess, onError) => {
    setTimeout(() => {
      const result = comments.filter((comment) => comment.post_id === post_id);
      if (post) {
        onSuccess(result);
      } else {
        onError("찾는 포스트에 코멘트가 없다");
      }
    }, 4000);
  };
  
  getPost(
    postNum,
    (postId) => {
      console.log("Post:", postId);
      getComments(
        postId,
        (result) => {
          console.log("Comments:", result);
        },
        (message) => {
          console.log(message);
        }
      );
    },
    (message) => {
      console.log(message);
    }
  );
  // 콜백 지옥(콜백을 중첩해서 계속 사용)
  

• Promise
  pending(진행중), fulfilled(성공적으로 끝낸 상태), rejected(실패로 끝난 상태)
  new Promise(resolve, reject)

  const getPost = (id) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const post = posts.find((post) => post.post_id === id);
        if (post) {
          resolve(post.post_id);
        } else {
          reject("찾는 포스트 없다");
        }
      }, 3000);
    });
  };
  
  const getComments = (post_id) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const result = comments.filter(
          (comment) => comment.post_id === post_id
        );
        if (post) {
          resolve(post.post_id);
        } else {
          reject("찾는 포스트에 코멘트가 없다");
        }
      }, 4000);
    });
  };
  
  getPost(postNum)
    .then((postId) => {
      console.log("Post:", postId); //resolve가 실행됐을 때(성공)
      return getComments(postId);
    })
    .then((result) => console.log("Comments:", result))
    .catch(console.log(message)); //reject가 실행됐을 때(실패)
  

• async, await

  async function getResult() {
    const postId_result = await getPost(postNum); //호출된 값을 기다린 후에 변수에 넣음
    const comments_result = await getComments(postId_result);
    console.log("Post:", postId_result, "Comments:", comments_result);
  }
  getResult();
  

7주차 수업 후기 📢

• 7주차 수업을 듣고 서로 느낀 점을 이야기해주세요!
• 핵심 키워드에 대해 완벽하게 이해했는지? 혹시 이해가 안 되는 부분은 뭐였는지? 서로 이야기해주세요!

!주의사항

1. 과제 피드백 기반 진행입니다 - 한명씩 본인의 과제를 발표하는 시간 그리고 해온 과제에 대한 피드백을 하는 시간 (ex:전 이렇게 생각해서 이런 부분 다르게 해왔는데 저것도 괜찮은 것 같아요!)이 무조건 기반이 되어야 합니다!
2. 부가적으로 워크북에서 제공되는 키워드 혹은 강의에서 들은 디테일 적인 부분에서 더 토의해봐도 좋을 것 같습니다

논의해보면 좋은 것들 🔥

• 왜 Callback 함수를 안쓰고 promise와 async, await를 사용하는지 토론해보기
• Promise와 async, await를 어느 기능에서 활용하면 좋을지 토의해보기