TIL: 2022-09-26

⚙️ 오늘 배운 주제

비동기, Node.js

 

🐹 오늘의 기분

비동기 실습을 했다. 막상 코드로 써보려니까 도저히 무슨 말인지 모르겠어서 멍하니 화면만 들여다보고 있었다. 

근데 오후에는 또 Node.js 모듈을 배우고 그걸 기반으로 비동기 실습을 더 깊게 해서 완전 힘들었다. 에너지가 쫙 빠져서 세션 끝나자마자 20분 잤다. 

지금은 유어클래스 개념 영상에 있던 예제 코드들을 전부 직접 쳐보면서 이해하려 노력 중이다. 저번 주에 봤던 영상인데 왜 처음 보는 것 같은 느낌이지 ㅋㅋㅋ ㅜㅜ 볼수록 생소하다. 주말에 이걸 다시 봤어야 했는데! 

 

🗝 키워드

동기, 비동기, setTimeout, 콜백 지옥, Promise, resolve/reject, .then/.catch, async/await, Promise.all

 

🗣 스스로에게 설명

Node.js로 모듈 불러오기

Node.js is an asynchronous event-driven JavaScript runtime (Node.js 공식 홈페이지)
Node.js는 개발자가 서버 측과 네트워크 응용 프로그램을 만들 수 있도록 지원하는 크로스 플랫폼 JavaScript 런타임 환경입니다. (MDN)

Node.js에는 여러 모듈이 있다. 

모듈은 아는 만큼 사용할 수 있다.

현재 우리 수준에서 사용할 수 있는 모듈은 file system 모듈이다.

모듈은 이렇게 불러올 수 있다.

const fs = require("fs");

file system에 내장된 readFile을 사용하고 싶다면 이렇게 쓰면 된다.

fs.readFile(경로, 옵션, 콜백함수)

공식 문서를 보면 readFile은 callback API에 속한다. (🔗)

여기에 들어가는 콜백함수는 err, data 두 가지 인자를 받아야 한다.

readFile을 실행하면 파일을 비동기적으로 불러온다. (파일을 완전히 불러올 때까지 아래 코드들이 기다리지 않아도 된다는 소리)

 

callback으로 비동기 작업 순차 처리하기

비동기 작업은 현재 작업이 완료될 때까지 다른 작업이 마냥 기다리지 않아도 된다는 장점이 있다. 

하지만 순차적 작업이 필요할 경우에는 비동기 코드로 작성한 작업이 언제 끝날지 예상하기 어려워지기 때문에 원하는 결과와 다른 결과를 내놓을 수도 있다. 

이런 경우를 생각해 비동기 작업의 순차 처리가 필요한 경우에는 callback 함수를 인자로 전달하여 그 다음 작업을 지정해줄 수 있다. 

하지만 콜백함수를 끝없이 전달하게 되면 depth도 깊어지고 가독성도 안 좋아지는 문제가 발생한다. 

이게 콜백 지옥이다.

 

Promise

새로운 Promise 인스턴스 객체를 생성하여 a라는 변수에 저장한다.

let a = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("hello");
    }, 1000);
})

resolve와 reject는 promise에 받는 함수인자로 각각의 역할이 있다. 

resolve = 작업이 잘 실행되었을 때 리턴할 내용

reject = 작업에 실패했을 때 리턴할 내용

 

a를 출력하면 Promise가 출력된다.

그리고 이 Promise는 아직 실행되지 않은 상태이기 때문에 PromiseState는 "pending"으로 출력된다.

 

인스턴스에 사용할 수 있는 메서드에는 대표적으로 .then과 .catch가 있다. 

.then은 a를 실행하는 데에 성공하면 실행할 작업,

.catch는 a를 실행하는 데에 실패하면 실행할 작업이다. 

a.then((successMessage) => {
    console.log(successMessage + "를 출력했습니다!")
});
// hello를 출력했습니다!

a는 잘 실행되었으므로 'hello를 출력했습니다!'가 출력된다. 

그리고 PromiseState는 "fulfilled"로 바뀐다. 

Promise 실행에 실패하면 상태는 "rejected"가 된다.

 

.then을 실행하면 Promise로 함께 리턴된다.

그래서 .then을 계속 이어서 쓸 수 있다. (Promise chain)

이런 체인에서는 마지막에만 .catch를 써주면 에러를 간편하게 다룰 수 있다.

 

보통 callback으로 처리할 때에는 콜백함수마다 에러를 다루는 코드를 넣어주어야 하기에 비효율적이다.

하지만 Promise chain에서는 마지막에만 .catch를 쓰면 되기에 에러 핸들링이 쉽다.

 

Promise 여러 개를 한꺼번에 처리할 때에는 Promise.all을 이용할 수도 있다.

Promise.all은 인자로 처리할 Promise들을 배열로 받는다. 

 

async, await

async, await을 쓰면 비동기 코드를 동기적으로 작성할 수 있어 가독성이 좋아진다. 

함수 앞에 async를 붙인 후 실행할 Promise 앞에 await을 붙이면 된다. 

 

진짜 뭔 소린지 하나도 모르겠었는데 아래 블로그 보고 조금 깨달았다.

글 쓴 분께 절 올리고 싶다.

[Javascript] 비동기, Promise, async, await 확실하게 이해하기 – Under The Pencil

 

❓ 막히는 or 막혔던 부분

전부 다 이해가 안 됐었다.

 

🔍 공부가 더 필요한 부분

함수 바인딩