동기 / 비동기 처리에 대한 이해

---

JavaScript 문법 내용을 기록하기 위한 포스트입니다.

---

1. 동기 / 비동기란?

---

• Syncronous(동기) : 요청을 보낸 후, 해당 요청을 기다렸다가 응답을 받은 다음 동작을 실행하는것 즉, 순차적으로 코드가 진행된다.
• Asyncronous(비동기) : 요청을 보낸 후, 응답을 기다리지 않고 다음 코드를 실행한다.
• Javascript 는 다른 언어와 마찬가지로 동기적 처리가 기본이지만, 일부 기능은 비동기로 처리가 가능하도록 기능을 제공하고 있다고 이해하면 될 것같다.

** 일부기능 : 오래걸리는 기능을 주로 비동기로 처리한다. **

• Rest API 요청
• 파일 및 DB 처리
• 타이머 및 암복호화

console.log("1단계");

setTimeout(() => {
  console.log("2단계");
}, 2000);

console.log("3단계");

// 결과
1단계
3단계
2단계

2. 문제점은 무엇일까?

---

• 프론트의 특성상 백엔드와 RESTFUL API 를 통해 데이터를 받아와 화면에 뿌려 주는 역할을 하는데 비동기로 인해 Response 를 받지 않았는데도 다음코드를 실행하여 결과값을 기반으로 하지 않은 값에 대한 코드 로직들이 실행되는 문제가 발생한다.

3. 해결방안(CallBack 함수)

---

• Javascript 는 first-class-function 이다.
  • 함수 자체를 변수에 저장 가능
  • 함수의 인자에 다른 함수를 인수로 전달 가능
  • 함수의 반환 값(return 값)으로 함수를 전달 가능

console.log("1단계");

// 실제로 3번째에 수행되야 할 내용
let callback = () => {
  console.log("3단계");
};

function myFunc(callback) {
  setTimeout(() => {
    console.log("2단계");
    callback();
  });
}
myFunc(callback);