자바스크립트의 비동기 방식(콜백, promise, async await) -FE study3

1. 동기, 비동기 개념

• 동기(synchronous) 방식 : 코드의 연산이 하나의 프로세스로 동시에 진행됨.
  즉, 코드 연산 한줄 한줄이 프로세스 과정 중 하나이며, 순차적으로 코드가 읽히므로, 다음 작업을 위해서는 그 전 작업이 완료되야함.
  장점 : 연산이 직관적이고 간단함.
• 비동기(asynchronous) 방식 : 코드의 연산이 동시에 진행되는 것이 아니라, 각각의 별개의 프로세스를 가짐.
  즉, 코드 진행방식이 동시에 진행되지 않기 때문에, 작업 하나하나가 다른 목적을 지니며 전 작업이 완료되지 않아도 다음 작업이 실행됨.
  장점 : 작업을 기다리는 시간에 다른 작업을 할 수 있으므로, 자원을 효율적으로 사용할 수 있음.

2. 자바스크립트의 비동기방식

자바스크립트 언어는 비동기방식으로 진행됨.

비동기 방식으로 진행되기 때문에 data를 요청하고 응답하는 과정에서 요청한 데이터가 오기전에 응답을 먼저해버려서 data를 잘 가져오지 못하는 문제가 발생할 수 있다.

3. 콜백 함수

자바스크립트 언어의 비동기 처리방식 1

콜백 (callback) : 다른 코드의 인수로서 넘겨주는 실행 가능한 코드

비동기적인 자바스크립트의 코드 방식에 콜백함수를 넣어줌으로써, 비동기적인 방식을 순차적으로 실행할 수 있도록 함.

문제점 : 연산이 복잡해질 경우, 코드가 가독성이 떨어지게 됨.

4. Promise

자바스크립트 언어의 비동기 처리방식 2

Promise 방식 : 코드를 리턴하는 함수를 Promise 객체 안에 넣고 리턴하는 부분에 then()메소드를 넣어 결과값이 리턴되어야지만 다음 작업을 실행하게 함.

리턴값은 Promise 객체 형태로 나와 then()메소드 체이닝이 가능하다.

fetch() 함수는 url을 인자로 받고 Promise 객체를 반환한다.

5. async await

자바스크립트 언어의 비동기 처리방식 3

프로미스를 문제점( then() 메소드 체이닝의 연쇄호출 등 )보완하고 코드의 가독성을 높여줌.

async function functionName {
  await methodName()
}

장점 : 코드가 짧아지고 가독성이 높아짐(비동기방식의 코드를 동기적형태로 한눈에 파악가능)