쭈꾸미
코드짜는 쭈꾸미
쭈꾸미
전체 방문자
오늘
어제
  • 분류 전체보기 (122)
    • Journal (54)
      • Today I Learned (44)
      • 후기&회고 (4)
      • 개인 프로젝트 (4)
      • 독서일기 (2)
    • HTML, CSS (5)
    • Javascript (32)
    • Typescript (2)
    • Git, Github (4)
    • Algorithm (1)
    • React, Next.js (14)
    • API, Database (6)
      • API (0)
      • Database (1)
      • GraphQL (2)
      • Rest-API (1)
    • React-Native (1)
    • ETC (2)
    • OS (1)
      • 우분투 Ubuntu (1)

인기 글

티스토리

hELLO · Designed By 정상우.
쭈꾸미
Javascript

[Javascript] async와 await | 동기와 비동기 방식

[Javascript] async와 await | 동기와 비동기 방식
Javascript

[Javascript] async와 await | 동기와 비동기 방식

2022. 1. 17. 14:41

동기와 비동기 방식이란?

서버와 통신하는 방식의 종류이다.

 

동기 (Syncronous: 동시에 일어나는)

- 서버 컴퓨터의 작업이 끝날 때까지 기다리는 통신 방식

- 서버에 여러가지 요청을 보낼 경우, 이전 요청에 대한 응답이 끝나야 다음 요청을 보낼 수 있다.

출처 : 코드캠프 강의 자료

 

 

비동기 (Asynchronous : 동시에 일어나지 않는)

- 서버 컴퓨터의 작업이 끝날 때까지 기다리지 않는 통신 방식

- 서버에 여러가지 요청을 보낼 경우, 이전의 요청에 대한 응답이 끝나지 않아도 다른 요청을 보낼 수 있다.

- 비동기 처리는 Javascript의 중요한 이슈 중 하나이다.

출처 : 코드캠프 강의 자료

 

Javascript의 비동기 처리

비동기 처리 방식으로 작동되는 함수의 경우, 이전에 요청한 작업이 완료되지 않았는데 또 다른 요청을 보내는 바람에 오류가 발생할 수 있다.

const data = axios.get('http://koreanjson.com/posts/1') 
console.log(data)  // Promise

Javascript는 한 줄씩 실행된다.(인터프리터 언어) Line1에서 get 요청이 진행되는 동안 응답이 완료되지 않아도 Line2로 넘어가기 때문에 Line2가 콘솔에 찍히는 시점에는 data값이 존재하지 않는다. 이러한 경우에는 Promise가 반환된다.

Promise는 아직 저장이 끝나지 않았지만 추후에는 data를 불러올 수 있다고 약속한다는 의미이다.

 

왜 이런 사태가?

Javascript는 동기 방식으로 통신하지만, axios를 비롯한 라이브러리들은 대체로 비동기 방식으로 작동하기 때문이다.

 

async와 await

이런 경우 async와 await를 사용하여 비동기 통신을 동기 통신으로 바꾸어 줄 수 있다.

//비동기 통신
function 함수이름(){
    const data = axios.get('http://koreanjson.com/posts/1') 
    console.log(data)  // Promise
}

//동기 통신 
async function 함수이름(){ 
    const data = await axios.get('http://koreanjson.com/posts/1') 
    console.log(data)  // {id:1, title: "..."}
}

 

실습

상단의 코드를 VSCode에 입력하고 라이브서버를 돌려보면 Promise가 찍히는 것을 확인할 수 있다.

여기에 async/await를 추가해주면

기다렸다가 데이터를 정상적으로 받아온다.

이제 긁어온 data 객체 안의 정보를 페이지에 반영할 수 있다.

'Javascript' 카테고리의 다른 글

[Javascript] 실무 반복문 map / filter  (0) 2022.01.18
[Javascript] 호이스팅이란? | Hoisting  (0) 2022.01.17
[Javascript] 템플릿 리터럴 | Template literals  (0) 2022.01.14
[Javascript] 객체의 Key와 Value가 동일한 경우 | Shorthand Property  (0) 2022.01.14
[JavaScript] import 와 export  (0) 2022.01.14
  • 동기와 비동기 방식이란?
  • Javascript의 비동기 처리
  • async와 await
  • 실습
'Javascript' 카테고리의 다른 글
  • [Javascript] 실무 반복문 map / filter
  • [Javascript] 호이스팅이란? | Hoisting
  • [Javascript] 템플릿 리터럴 | Template literals
  • [Javascript] 객체의 Key와 Value가 동일한 경우 | Shorthand Property
쭈꾸미
쭈꾸미
느리지만 확실하게 / 웹 프론트엔드 개발자 TIL : https://jooeun-k.github.io/TIL/

티스토리툴바

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

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