PROGRAMMING/Web

07 비동기

2022. 8. 17. 21:17
목차
  1. 1 Callback
  2. 1) Callback 흐름 제어 유형
  3. 2) setTimeout()
  4. 3) setInterval()
  5. 2 Promise
  6. 1) Promise 상태의 종류
  7. 3 Async & Await
  8. 1) Await
  9. 4 실습 

1 Callback

  • 다른 함수에 인수로 전달된 함수
  • 외부 함수 내부에서 호출되어 일종의 루틴이나 작업을 완료
  • 비동기 작업이 완료된 후 코드 실행을 계속하기 위해 자주 사용됨(비동기 콜백)
 
 

1) Callback 흐름 제어 유형

  1. 동기식
    • 호출부에서 실행 결과가 리턴될 때 까지 기다려야 하는 함수
  2. 비동기식
    • 호출부에서 실행 결과를 가다리지 않아도 되는 함수
    • 싱글 쓰레드 환경에서 실행되는 언어에서 광범위하게 사용
    • 순차적 처리가 보장되지 않기 때문에 아래에 위치한 코드가 위에 위치한 코드보다 먼저 실행될 수 있음
    • 동기 함수에 비해서 좀 덜 직관적으로 느껴짐

2) setTimeout()

  • 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우에 사용하는 함수
setTimeout(() => console.log("2초 후에 실행됨"), 2000);
//"2초 후에 실행됨" 출력

3) setInterval()

  • 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용
setInterval(() => console.log(new Date()), 2000);
// 콘솔에 현재 시간을 2초마다 출력

 

2 Promise

  • 비동기 작업이 끝난 후 결과를 알려주는 용도로 사용되는 객체
  • 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환
 
 

1) Promise 상태의 종류

  • 대기(pending) : 이행하지도, 거부하지도 않은 초기 상태
  • 이행(fulfilled) : 연산이 성공적으로 완료됨
  • 거부(rejected) : 연산이 실패함

 

3 Async & Await

async function name([param[, param[, ... param]]]) {
    statements
}
  • name : 함수의 이름
  • param : 함수에게 전달되기 위한 인자의 이름
  • statements : 함수 본문을 구성하는 내용
  • 반환값 : Promise (async 함수에 의해 반환 된 값으로 해결되거나 async함수 내에서 발생하는 캐치되지 않는 예외로 거부되는 값)
 
 

1) Await

  • Async 함수 내에 포함될 수 있는 식
  • 함수의 실행을 일시 중단하고 전달된 Promise의 해결( fulfill, reject)을 기다린 다음 async 함수의 실행을 다시 시작하고 완료후 값을 반환함
  • 목적 : 여러 promise의 동작을 동기스럽게 사용할 수 있게 하고, 어떠한 동작을 여러 promise의 그룹에서 간단하게 동작하게 하는 것
  • 반환값
    • fulfill→ Promise에서 fulfill된 값
    • reject → 값 버림

 

4 실습 

//------------------------------------------------
// 데이터 통신에서의 활용

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;

// id가 posts 배열에 있는지 확인하여 참일 경우 post에 담기, 실패했을 경우 error 메세지 출력
const getPost = (id, onSuccess, onError) => {
   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(result.length > 0) {
       onSuccess(result);
     } else { 
       onError("찾는 포스트 없다");
     }
  }, 4000)
}

//콜백지옥 : 가독성이 떨어짐 - Promise, async
getPost(postNum, (postId) => { console.log('Post', postId);
    getComments (postId,
      (result) => { console.log('Comments:' , result) },
      (message) => { console.log(message);}
    )
  },
  (message) => { console.log(message); }
)

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 = 1;


// * 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 (result.length > 0) {
        resolve(result);
      } else {
        reject("찾는 포스트에 코멘트가 없다");
      }
    }, 4000);
  } );
};


// .then 성공 , .catch 실페 결과 반환
// getPost(postNum)
// .then(postId => {
//   console.log('Post : ', postId)
//   return getComments(postId)
// })
// .then(result => console.log('Comments :', result))
// .catch(message => console.log(message));

// retern을 삭제하면 Comments가 선언되지 않았다고 뜸
// 제대로 실행되면 resolve 아니면 reject
// 두 줄 이상이면 return을 써줘야함


//-------------------------------------------------------
// 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();
  1. 1 Callback
  2. 1) Callback 흐름 제어 유형
  3. 2) setTimeout()
  4. 3) setInterval()
  5. 2 Promise
  6. 1) Promise 상태의 종류
  7. 3 Async & Await
  8. 1) Await
  9. 4 실습 
'PROGRAMMING/Web' 카테고리의 다른 글
  • 08_1 POST & GET 정리
  • 08 데이터 통신
  • 06_1 Local Storege 실습
  • 06 Local Storage
yuujoeng
yuujoeng
IT and Information Security
yuujoeng
알감자는 공부중
yuujoeng
전체
오늘
어제
  • 🎁 (201)
    • SECURITY (80)
      • 관리보안 (27)
      • System (10)
      • System | Wargame (30)
      • Android (9)
      • Reversing (3)
      • AWS (1)
    • BLOCKCHAIN (45)
      • BlockChain (22)
      • Ethereum (23)
    • PROGRAMMING (30)
      • Web (16)
      • Android (6)
      • Spring (8)
    • IT (0)
      • Article (40)
      • RaspberryPi (5)

블로그 메뉴

  • HOME
  • TIKKLE

인기 글

hELLO · Designed By 정상우.
yuujoeng
07 비동기
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.