자바스크립트에서 동기와 비동기가 차이 기초적인 Promise 사용법

자바스크립트는 싱글 스레드로 동작하는 언어로 한번 할 때 하나의 작업만 처리되는  언어입니다

async, await, promise 등 정리하기 전에 동기와 비동기에 대한 개념을 어느 정도 정리하고자 작성하였습니다

1. 동기와 비동기 이해하기

-동기(Synchronous)

동기는 한 작업이 끝나야 다음 작업으로 실행되는 방식으로 코드가 위에서 아래로 순서대로 흐른다.

작업이 끝날 때까지 다음 코드가 실행불가 하며 네트워크통신, 파일처리 같은 지연되는 작업에는 취약한 방식이다

(중간에 오래 걸리는 작업이 있으면 그 뒤로는 멈춰짐)

console.log("start");
for (let i = 1; i <= 50; i++) {
  console.log("loop:", i);
}
console.log("end");

위에 예제코드를 보면 처음 start가 출력되고 for문을 50까지 다 돌아야 end가 출력된다 

이런 흐름을 동기식이라고 한다

-비동기

비동기는 기다리지 않고 다음 코드로 넘어가는 방식이다

위에서 말했듯이 자바스크립트는 싱글스레드로 동작하기 때문에 시간이 오래 걸리는 작업이 생기면 위에 동기에서 작성한 예제처럼 처리하고 내려가야 되지만 멀티스레드인 브라우저와 node.js를 통해 비동기처럼 자바스크립트를 사용할 수 있습니다

비동기 프로그래밍이 될 수 있게 await, async, promise 등의 문법을 사용합니다

console.log("1");

setTimeout(() => { //비동기함수 (비동기 처리)
  console.log("2");
}, 3000);

console.log("3");

위에 예제 코드에서 setTimeout을 사용해 3초 뒤에 2를 실행하라고 돼있으며

동기식으로 코드를 보면 console.log로 1 출력 그다음 setTimeout의 3 초기 다렸다가 2 출력한 뒤 3 출력될 것 같지만

setTimeout은 비동기함수로 js는 setTimeout을 기다리지 않고 그다음 줄에 있는 console.log("3")을 출력합니다

그래서 순서는 1 -> 3 ->2 순서로 출력하게 됩니다

2. 비동기 처리할 때 콜백함수 사용

정리하자면 동기는 순차실행되는 거고 비동기는 기다리지 않고 다음 작업을 진행합니다

과거에는 비동기처리를 하려면 콜백함수를 사용했지만 콜백지옥이 발생되는 상황 때문에 지금은 Promise와 async/await가 등장해 비동기를 더 보기 좋게 만들었다.

getUser(function(user) {
  getPosts(user.id, function(posts) {
    getComments(posts[0].id, function(comments) {
      saveLog(comments, function(result) {
        sendEmail(result, function(res) {
          console.log("완료");
        });
      });
    });
  });
});

위에 예제코드가 콜백지옥이다..콜백 지옥(callback hell)은 비동기 작업이 콜백 안에서 계속 중첩되어 코드가 깊게 파고드는 상황을 말한다.

 

3 기본적인 Promise 의미

Promise는 비동기 작업의 결과를 표현하는 객체로 두 가지 값을 갔는다

-state(상태) 종류

• pending  => 비동기 작업이 아직 끝나지 않은 상태
• fulfilled =>  성공적으로 끝난 상태
• rejected =>  실패한 상태

-result(결과 값)

• fulfilled일 때: resolve()가 전달한 값
• rejected일 때: reject()가 전달한 값
• pending일 때: 없음 (아직 비어 있음)

콘솔창에 Promise를 출력하면 위에 이미지같이 나온다

이미지에는 fulfilled상태로 정상적으로 끝나 resolve로 전달된 실제값이 { name: "kim" }이 된다

 

4.Promise의 resolve / reject는?

위에서 resolve로 전달된 값이라는 말을 했었는데 

• resolve : Promise 비동기 작업의 성공
• reject : Promise  비동기 작업의 실패

Promise의 대한 성공과 실패를 뜻한다

function work(isSuccess) {
  return new Promise((resolve, reject) => {
    if (isSuccess) {
      setTimeout(() => resolve("성공입니다"), 2000);
    } else {
      setTimeout(() => reject("실패입니다"), 2000);
    }
  });
}

const p1 = work(true);   // 성공
const p2 = work(false);  // 실패

console.log("초기 p1:", p1);
console.log("초기 p2:", p2);

setTimeout(() => {
  console.log("2초 뒤 p1:", p1);
  console.log("2초 뒤 p2:", p2);
}, 2500);

초기 p1: Promise { <pending> }
초기 p2: Promise { <pending> }

2초 뒤 p1: Promise { <fulfilled>: "성공입니다" }
2초 뒤 p2: Promise { <rejected>: "실패입니다" }

1. work 함수는 Promise를 반환하며 내부에서 resolve 또는 reject를 호출할 때만 setTimeout을 사용하도록 하였다.
2. p1, p2를 통해 함수호출을 하여 반환받았을 때 아직 작업이 끝나지 않아<pending> 상태이다   
3. 2초가 지나면 resolve와 reject를 사용하여 성공 실패를 반환된다.(아래처럼 상태 변화) 
   • resolve가 실행되면 fulfilled
   • reject가 실행되면 rejected
4. 3. 에서 2초가 지나면  resolve와 reject가 반환되는 거다 보니 setTimeout을 사용하여 2.5초 뒤 console.log를 찍는다(시간을 맞춰서 resolve , reject를 확실히 받기 위해)
5. resolve가 실행되면 fulfilled , reject가 실행되면 rejected로 나오고 work함수에서 작성한 resolve('성공입니다') , reject('실패입니다')의  매개변숫값이 같이 나오게 됩니다
   
   

-원래 Promise는 then, catch, finally와 많이 쓰며 다음 글에서 이어서 작성하겠음.