[ES6][JS] Javascript 동기/비동기 처리(setTimeout) 1탄

◆목표

동기/비동기 정의
비동기 처리 사용되는 곳
비동기 처리 사용법(SetTimeout)
비동기 처리의 문제점 및 해결방안

 

---

1. 동기 / 비동기 처리의 정의

- 동기적 처리

   요청을 보낸 후, 해당 요청의 응답이 올 때까지 다른 작업을 하지 못하는 방식

   즉, 코드 한줄 실행이 완료되어야지만 다음 줄 실행이 가능하다는 뜻

 

- 비동기적 처리

  요청을 보낸 후, 해당 요청의 응답과 상관없이 다른 작업을 하는 방식

  즉, 코드 한줄 실행 후 결과와 상관없이 다음 줄 실행한다는 뜻

 

2. 비동기 처리 사용되는 곳

- 보통 오래걸리는 기능들은 비동기적 방식으로 처리함

• Rest API 요청
• 파일/데이터베이스 처리
• 타이머, 암호화/복호 화등

3. 비동기 처리 사용법(setTimeout)

1) setTimeOut()

     - 사용법: setTimeout( ms만큼 기다린 후 호출할 함수, ms(시간))

 

<input>

console.log(1);
setTimeout(() => {
  console.log(2);
}, 3000);
console.log(3);

<output>

1
3
2

4. 비동기 처리의 문제점 및 해결방안(Callback function)

1) 문제점

Rest API를 호출해서 DB에서 받은 값에 +1 연산을 처리해야 하는 경우,  DB에서 값을 받기도 전에 +1을 먼저 처리하는 문제점이 발생 

 

<1 출력 후 2가 출력되게끔 하고 싶은데 2가 출력되고 1이 출력됨>

function fun1() {
  setTimeout(() => {
    console.log("1");
  }, 1000);
}
function fun2() {
  console.log("2");
}

fun1();
fun2();

 

2) 해결방안

CallBack Function(콜백 함수)를 활용해 DB에서 값을 받아야지만 연산을 처리 할수있도록 설정한다

function fun1(callback) {
  setTimeout(() => {
    console.log("1");
    callback();
  }, 1000);
}
function fun2() {
  console.log("2");
}

fun1(fun2);

3) 콜백함수 사용 시 불편한 점

콜백 지옥을 초래할 수 있음(콜백 함수가 많이 생겨 코드의 가시성을 잃게 됨)

function fun1(callback) {
  setTimeout(() => {
    console.log("1");
    setTimeout(() => {
      console.log("2");
      setTimeout(() => {
        console.log("3");
        callback();
      }, 1000);
    }, 1000);
  }, 1000);
}
function fun2() {
  console.log("4");
}

fun1(fun2);