블록체인 엔지니어링 부트캠프 2기 - Week 4👏

Bosees·2021년 11월 29일

부트캠프

목록 보기

4/6

Day 1

DOM API를 재귀함수로 적용해 화면을 만들어보는 시간을 가졌다. 코드를 막상 써려고 하니 뭔가 직관적인 느낌이 들지 않았다. 평소 프로그래밍 스타일에 적용하기에는 무리가 있다고 판단. 그냥 재귀함수를 반복해서 학습한다는 개념에서 해볼 만 했던 시간이었다.

Day 2

비동기 프로그래밍과 관련하여 학습을 진행하였다. 비동기란 어떠한 연산이 순차적으로 작동될 때 기다리지 않고 다음 연산하는 방식을 말한다. 흔히 Node.Js에서 non-blocking I/O를 기본 동작으로 작동된다고 생각을 해봤을 때. 자바스크립트의 싱글스레드를 런타임 환경으로 극복한 멋진 프로그램이라고 생각한다.

Callback

const print = (string) => {
  setTimeout(
    () => {
      console.log(string)
    }, Math.floor(Math.random() * 100) + 1
  )
}

const printAll = () => {
  printString("A")
  printString("B")
  printString("C")
}

printAll();

자바스크립트 내장 비동기 함수 setTimeout() 함수를 사용하여 비동기 함수를 만들어 봤다. 효과적으로 순서를 제어할 방법이 뭐가 있을까??

두 번째 인자로 콜백함수를 전달하면 된다.

const print = (string, callback) => {
  setTimeout(
    () => {
      console.log(string);
      callback();
    }, Math.floor(Math.random() * 100) + 1
  )
}

const printAll = () => {
  printString("A",() => {
  	printString("B", () => {
	  printString("C", () => {})
    })
  })
}

printAll();

하지만 콜백을 계속해서 전달함으로써 가독성이 매우 떨어지는데 이것을 Callback Hell 이라고 한다.

이 가독성을 극복할 방법으로 Promise객채를 이용하면 된다.

Promise

const printString = (string) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(string);
      resolve();
    }, Math.floor(Math.random() * 100) + 1)
  })
}

const printAll = () => {
  printString("A")
  .then(() => {
    return printString("B")
  })
  .then(() => {
    return printString("C");
  })
}

printAll();

Promise 객채는 세 가지 상태로 표현할 수 있다.

pending(대기): 이행하거나 거부되지 않은 초기 상태
fulfiled(애행): 연산이 성공적으로 완료됨.
rejected(거부): 연산이 실패함.

.then으로 리턴받은 결과를 다시 활용하여 연결한걸 Promise Chaining이라고 한다.

하지만 이 역시 가독성이 매우 좋다고는 할 수 없다. 이걸 극복하기 위해 자바스크립트는 또다시 새로운 문법은 만들어 냈다.

Async & Await

이 문법은 슈가 코드라고 들 한다. 즉 개발자가 보기 편한 형태라고 볼 수 있다. 하지만 내부적으로 돌아가는 로직은 Promise와 같다.

function one() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {resolve("one")}, 100)
  })
}
function two() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {resolve("two")}, 100)
  })
}
function three() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {resolve("three")}, 100)
  })
}

const result = async () => {
  const one = await one();
  const two = await two();
  const three = await three();

  console.log(one);
  console.log(two);
  console.log(three);
}

result();

말도 안 되게 가독성이 좋아졌다. 또한 병렬적으로 비동기 함수를 리턴 값을 받아 오기 때문에 성능 또한 좋아졌다고 볼 수 있다.