[TS] Promise와 async/await 구문

📣  비동기 콜백 함수

📍 동기와 비동기 API

➰ 노드제이에스는 파일 시스템과 관련된 기능을 모아둔 fs패키지를 제공한다.

➰ 같은 기능을 동기와 비동기 버전으로 나누어 제공한다.

➰ 이름에 Sync가 붙은 것이 동기 버전이다.

import {readFileSync, readFile} from 'fs'

// 동기 방식으로 읽는 예
const buffer: Buffer = readFileSync('./package.json')
console.log(buffer.toString())

// 비동기 방식으로 읽는 예
readFile('./package.json', (error: Error, buffer: Buffer) => {
	console.log(buffer.toString())
}

// Promise와 async/await 구문을 사용한 예
const readFilePromise = (filename: string): Promise<string> =>
    new Promise<string>((resolve, reject) => {
        readFile(filename, ((error: Error, buffer: Buffer) => {
            if(error) reject(error)
            else resolve(buffer.toString())
        })
    });
    
(async () => {
    const content = await readFilePromise('./package.json')
    console.log(content)
})()

➰ API 함수는 일반 함수와 달리 하드디스크에 저장된 파일을 읽는 등 실행 시 물리적인 시간이 소요된다.

➰ 동기 방식 API : 파일 내용을 모두 읽을 때까지 프로그램의 동작을 잠시 멈추는 방식

➰ 비동기 방식 API : 동작을 멈추지 않는 대신 결과를 콜백 함수로 얻게 하는 방식

➰ 비동기 API의 콜백 함수를 '비동기 콜백 함수' 라고 하며, 이는 일반 함수와 달리 API의 물리적인 동작 결과를 수신하는 목적으로만 사용한다.

 

📍 readFIleSync와 readFile API

➰ 노드제이에스에서 파일 읽기는 readFileSync라는 API를 사용한다.

➰ readFileSync는 파일을 읽어서 Buffer라는 타입으로 전달해준다.

➰ Buffer는 노드제이에스가 제공하는 클래스로서 바이너리 데이터를 저장하는 기능을 수행한다.

➰ Buffer의 데이터를 문자열로 만들 때는 Buffer의 toString 메서드를 사용한다.

 

1️⃣ readFileSync : 동기 버전

readFileSync(path: string): Buffer

import {readFileSync} from 'fs'

const buffer: Buffer = readFileSync('./package.json')
// 파일을 다 읽어올 때까지 코드는 일시적으로 멈춘다.
const content: string = buffer.toString()
console.log(content)
// package.json 파일의 텍스트 내용

 

2️⃣ readFIle : 비동기 버전

➰ 예외가 발생하면 이 예외를 콜백 함수의 첫 번째 매개변수에 전달한다.

readFile(파일 경로, 콜백 함수: (error: Error, buffer: Buffer) => void)

import {readFile} from 'fs'

readFile('./package.json', (err: Error, buffer: Buffer) => {
    if(err) throw err	// 오류 발생 시 처리 코드
    else {
        const content: string = buffer.toString()
        console.log(content)
        // package.json 파일 내용
    }
})
// 코드는 멈추지 않고 계속 실행

➰ package.json 파일을 읽는 결과는 readFile() 함수의 두 번째 매개변수인 콜백 함수로 전달된다.

 

📍 단일 스레드와 비동기 API

➰ 자바스크립트는 단일 스레드로 동작하므로, 될 수 있으면 동기 API를 사용하지 말아야 한다.

➰ 타입스크립트 또한 ES5 자바스크립트로 변환되어 실행되므로 마찬가지이다.

➕ 단일스레드?

➰ 스레드 : CPU가 프로그램을 동작시키는 최소 단위

➰ 자바스크립트 코드는 항상 한 개의 작업 스레드에서 실행된다.

➰ 타입스크립트에서 동기 API가 실행되면, 동기 API가 실행된 코드를 일시적으로 멈춘 다음, 다른 스레드에서 실제 작업을 실행해 결과를 얻으면 그때서야 비로소 멈췄던 동기 API를 실행하면서 결괏값을 반환한다.

➰ 이런 동작 방식은 코드를 작성하기 쉽게 해주지만, 프로그램의 반응성을 떨어뜨린다.

 

📍 콜백 지옥

➰ 비동기 API를 사용하면 콜백 함수에서 다시 또 다른 비동기 API를 호출하는 코드를 만들 때가 있다.

➰ 이런 복잡한 형태로 얽힌 콜백 구조를 콜백 지옥이라고 한다.

➰ 이런 코드를 좀 더 다루기 쉬운 코드로 만들기 위해 'Promise' 가 등장했다.

---

📣  Promise 이해하기

✔️ 자바스크립트에서 프로미스는 Promise라는 이름의 클래스이다.

➰ Promise 클래스를 사용하기 위해서는 new 연산자로 프로미스 객체를 만들어야 한다.

➰ 이때, 콜백 함수를 제공해야 한다.

const promise = new Promise(콜백 함수)

➰ Promise의 콜백 함수는 resolve와 reject라는 두 개의 매개변수를 갖는다.

(resolve, reject) => {}

➰ 타입스크립트에서 Promise는 제네릭 클래스 형태로 사용한다.

const numPromise: Promise<number> = new Promise<number>(콜백 함수)

new Promise<T>((
    resolve: (sucessValue: T) => void,
    reject: (any) => void)
) => {
	//...
}

 

📍 resolve와 reject 함수

// readFile을 호출하는 내용을 프로미스로 구현한 예
import {readFile} from 'fs'

export const readFilePromise = (filename: string): Promise<string> => 
    new Promise<string>((
        resolve: (value: string) => void,
        reject: (error: Error) => void) => {
            readFile(filename, (err: Error, buffer: Buffer) => {
                if(err) reject(err)
                else resolve(buffer.toString())
            })
        })

➰ 에러가 발생할 때는 reject(err) 함수를 호출하고, 정상적으로 실행되었을 때는 파일 내용이 담긴 buffer를 이용해 resolve(buffer) 함수를 호출한다.

 

// 위에서 구현한 readFilePromise 함수를 사용하는 예
import {readFilePromise} from './readFilePromise'

readFilePromise('./package.json')
    .then((content: string) => {
        console.log(content) // package.json 파일을 읽은 내용
        return readFilePromise('./tsconfig.json')
    })
    .then((content: string) => {
        console.log(content) // tsconfig.json 파일을 읽은 내용
        // catch 쪽 콜백함수에 오류 메시지 전달
        return readFilePromise('.')
    })
    .catch((err: Error) => console.log('error:', err.message))
    .finally(() => console.log('프로그램 종료'))

➰ resolve 함수를 호출한 값은 then 메서드의 콜백함수 쪽에 전달되고, reject 함수를 호출한 값은 catch메서드의 콜백 함수 쪽에 전달된다.

➰ 마지막에 '프로그램 종료'라는 출력이 나오면 이는 finally 메서드가 호출되었다는 것을 의미한다.

➰ Promise 객체의 메서드 체인 코드에서 finally는 항상 마지막에 호출된다.

 

📍 Promise.resolve 메서드

➰ Promise 클래스는 resolve라는 클래스 메서드를 제공한다.

➰ 앞서 Promise 객체를 생성할 때 호출한 resolve 함수를 클래스 메서드로 구현한 것이다.

➰ Promise.resolve(값) 형태로 호출하면 항상 이 '값'은 then 메서드에서 얻을 수 있다.

Promise.resolve(1)
    .then(value => console.log(value)) // 1

 

📍 Promise.reject 메서드

➰ Promise.reject(Error 타입 객체)를 호출하면 이 'Error 타입 객체'는 항상 catch 메서드의 콜백함수에서 얻을 수 있다.

Promise.reject(new Error('에러 발생'))
    .catch((err: Error) => console.log('error:', err.message))

 

📍 then-체인

Promise.resolve(1)
    .then((value: number) => {
        console.log(value) // 1
        return Promise.resolve(true)
   })
   .then((value: boolean) => {
       console.log(value) // true
       return [1, 2, 3]
   })
   .then...

➰ Promise의 then 인스턴스 메서드를 호출할 때 사용한 콜백 함수는 값을 반환할 수 있따.

➰ 이 then에서 반환된 값은 또 다른 then 메서드를 호출해 값을 수신할 수 있다.

➰ then 메서드는 반환된 값이 Promise 타입이면 이를 resolve한 값을 반환하고, 만약 reject 당한 값일 때는 catch 메서드에서 이 값을 얻을 수 있다.

 

📍 Promise.all 메서드

all(프로미스 객체 배열: Promise[]): Promise<해소된 값들의 배열(혹은 any)>

➰ Promise 객체들을 배열 형태로 받아, 모든 객체를 대상으로 resolve된 값들의 배열로 만들어준다.

➰ 이 내용으로 구성된 또 다른 Promise 객체를 반환하므로, resolve된 값들의 배열은 then 메서드를 호출해서 얻어야 한다.

➰ 배열에 담긴 Promise 객체 중 하나라도 reject 되면 더 기다리지 않고 해당 거절 값을 담은 Promise.reject 객체를 반환한다.

 

📍 Promise.race 메서드

race(프로미스 객체 배열: Promise[]): Promise<가장 먼저 해소된 객체의 값 타입(혹은 Error)>

➰ 배열에 담긴 프로미스 객체 중 하나라도 resolve 되면 이 값을 담은 Promise.resolve 객체를 반환한다.

➰ 거절 값이 가장 먼저 발생하면 Promise.reject 객체를 반환한다. (프로미스 객체 배열의 맨 처음이 reject일 경우)

---

📣  async와 await 구문

📍 await 키워드

➰ 피연산자의 값을 반환해 준다.

➰ 만일 피연산자가 Promise 객체이면 then 메서드를 호출해 얻은 값을 반환해 준다.

let value = await Promise 객체 혹은 값

 

📍 async 함수 수정자

➰ await 키워드는 항상 async라는 이름의 함수 수정자가 있는 함수 몸통에서만 사용할 수 있다.

// 화살표 함수
export const test1 = async() => {
    let value = await 1
    console.log(value) // 1
    value = await Promise.resolve(1)
    console.log(value) // 1
}

// function 함수 
export async function test2(){
    let value = await 'hello'
    console.log(value) // hello
    value = await Promise.resolve('hello')
    console.log(value) // hello
}

 

test1()
test2()

// 1
// hello
// 1
// hello

➰  두 함수가 마치 동시에 실행된 것처럼 보인다.

 

📍 async 함수의 두 가지 성질

✔️ 일반 함수처럼 사용할 수 있다.

✔️ Promise 객체로 사용할 수 있다.

 

➰ 위 코드는 async 함수를 일반 함수처럼 사용한 예이다.

➰ 밑 코드는 async 함수를 Promise 객체로 사용한 예이다.

test1()
    .then(() => test2())
    
// 1
// 1
// hello
// hello

➰ test1() 함수 호출이 resolve된 다음에 비로소 test2() 함수를 호출하므로 실행 결과가 차례대로 나온다.

 

📍 async 함수가 반환하는 값의 의미

➰ async 함수는 값을 반환할 수 있으며, 이때 반환값은 Promise 형태로 변환되므로 다음처럼 then 메서드를 호출해 async 함수의 반환값을 얻어야 한다.

const asyncReturn = async() => {
    return [1, 2, 3]
}

asyncReturn() 
    .then(value => console.log(value)) // [1, 2, 3]

 

📍 async 함수의 예외 처리

const asyncException = async() => {
    throw new Error('error')
}

asyncException() // 예외 발생

➰ async 함수에서 예외가 발생하면 프로그램이 비정상적으로 종료된다.

➰ 이를 막기 위해서는 asyncException을 단순히 함수 호출 방식이 아닌 asyncException()이 반환하는 프로미스 객체의 catch 메서드를 호출하는 형태로 작성해야 한다.

const asyncException = async() => {
    throw new Error('error')
}
asyncException()
    .catch(err => console.log('error:', err.message))	//error: error

 

➰ await 구문도 마찬가지

const awaitReject = async() => {
    await Promise.reject(new Error('error'))
}

awaitReject()
    .catch(err => console.log('error:', err.message)) // error: error

➰ await 구문에서 Promise.reject 값이 발생했을 때, 프로그램이 비정상적으로 종료되는 것을 막으려면 catch 구문을 사용해야 한다.

 

📍 async 함수와 Promise.all

import {readFilePromise} from './readFIlePromise'

const readFilesAll = async(filenames: string[]) => {
    return await Promise.all(
        filenames.map(filename => readFilePromise(filename))
    )
}

readFilesAll(['./package.json', './tsconfig.json'])
    .then(([packageJson, tsconfigJson]: string[]) => {
        console.log('<package.json>: ', packageJson)
        console.log('>tsconfig.json>: ', tsconfigJson)
    })
    .catch(err => console.log('error:', err.message))

➰ readFilesAll 함수는 매개변수 filenames에 담긴 string[] 타입 배열에 map 메서드를 적용해서 Promise[] 타입 객체로 만든다.

➰ 그 다음, 이를 다시 Promise.all 메서드를 사용해서 단일 Promise 객체로 만든다.

➰ 이 결과로 만들어진 객체에 await 구문을 적용해 resolve된 결과를 반환한다.

➰ readFilesAll 함수를 Promise 객체로 취급해서 then과 catch 메서드를 then- 체인 형태로 연결한다 (에러가 발생해도 비정상적인 종료가 일어나지 않는다)