코드스테이츠(Asynchronous & Promise - 1)

Asynchronous이 뭘까요

Asynchronous는 비동기입니다. 비동기가 뭐냐하면 어떤 일을 처리할때 다른 일도 같이 처리 할 수 있는 멀티태스킹을 가능하게 한다는 뜻이라고 합니다 단어의 해석은 쉽지만 코드로 옮기면 완전 새로운 신세계가 열리죠... 옮기는건 더 밑에 정리를 하고 일단 더 깊게 파헤치자면 비동기 자체로 보면 순서를 정해서 더 효율적으로 코드들을 실행을 하고싶을때? Promise와 callback을 사용한다고 알고있습니다.ㅎㅎㅎ

callback은 뭐죠

callback..내가 친구에게 전화를 했는데 친구가 일하는 중이여서 '끝나고 전화해, 밥이나 먹자' 라고했는데 여기서 끝나고 전화해 다하고 무얼무얼 해 라고 이해를 했습니다. 예를 들어 함수를 만들어서 그 함수의 파라메터에 다른 함수를 인자로 받아서 실행하면 callback 느낌?이 되는것같아요. 근대 이걸 계속하면

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

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

이처럼 말로만 듣던 콜백지옥이 나옵니다. 3번이라서 그래도 아직은 예쁘게 정갈된 모양이지만 더 길어지면 가독성이 떨어지고 지저분해보입니다 그래서 사용하는 것이 Promise 입니다

Promise는 약속이죠

Promise를 사용하기 전 중요한게 2가지 있다고 합니다
-1. 상태 : doing! 하는중인지, 문제없이 성공하여 결과를 가져왔는지, 에러가 떴는지
-2. 구분 : 정보를 제공하는 자와, 정보를 제공받는 자가 구분이 되어야 합니다.

2번은 아직 감을 못잡았습니다....

Promise는 New Promise()로 쓰이는데 class이기때문이다 그리고 resolve와 rejected를 파라메터로 받습니다
resolve란 성공한 결과를 어떻게 하는지 rejected는 에러가 어떻게 났는지 이런 느낌입니다만.. 그리고 중요한건 사용되는 메소드가 3가지가 있습니다 바로 then, catch, finally 하나씩 설명해드리자면 설명하기도 뭐하지만 then은 성공했을때 then의 값으로 전달되는 메소드이며, catch는 에러가 발생했을때 어떻게 할지 명시되는 메소드입니다 finally는 결과에 상관없이 코드의 끝을 명시하는 메소드라고 이해해서 먹었습니다.

async await

const printString = (string) => {
    return new Promise((resolve, reject) => {
      setTimeout( //일정 시간 뒤에 실행한다.
        () => {
         console.log(string)
         resolve()
        }, 
        Math.floor(Math.random() * 100) + 1
      )
    })
  }
  const printAll = async () => {
  const a = await printString('A')
  const b = await pringString('B')
  const c = await printString('C')
  printAll();
  }

await에서 주의할점은 일반 함수에서 사용하면 에러가 납니다. 그리고 또 한가지 알아두면 좋을점이 왜 await을 써야하나 입니다 그 해답은 바로 calback, promise의 단점을 보완하여 가독성이 좋은 코드를 작성할 수 있기 때문입니다.