(2)비동기_자바스크립트_비동기,동기의 작동 순서, 비동기 함수들 여럿 예시들

● 이론1_비동기, 동기 콜백 순서

○ 아래의 코드상황을 보자

- 코드 :

console.log('1');

setTimeout(() => console.log('2'), 0); //바로 콜백함수를 호출하라는 뜻

console.log('3');
console.log('4');
console.log('5');
console.log('6');
console.log('7');
console.log('8');
console.log('9');
console.log('10');

- 출력 결과 :

1
3
4
5
6
7
8
9
10
2

- 이러한 출력 결과가 나온 이유 :

내가 생각하기엔, 콜백은 함수 아래의 동기 함수들이 먼저 동작을 한 후, 비동기 함수인 콜백함수를 처리하는 것이 원칙인가봄 

- 결론 :

▶ 코드 순서 : 콜백함수 , 동기 함수 들

▶ 수행 순서 : 동기 함수들 수행이 끝난 후, 무조건 비동기 함수들이 수행

● 이론2_비동기들끼리의 코드 순서 :

○ 아래의 코드상황을 보자

- 코드 :

console.log('1');

setTimeout(() => console.log('2'), 1001);

setTimeout(() => console.log('3'), 1000);

console.log('4');

- 출력 결과 :

- 이러한 출력 결과가 나온 이유 :

비동기들 끼리는 시간이 겹치게 된다면, 코드 순서에 초점을 두고 있는 거 같다.

● 이론3_비동기함수 동작 순서 :

setTimeout(callback,delay);

- 순서1_ setTimeout() 실행 //즉, delay만큼 타이머 시작

- 순서2_ setTimeout() 타이머 동안, 다른 동기함수들 처리

- 순서3_ delay가 끝나면, callback함수 실행

● 이론4_비동기함수 종류 :

○ 종류1 : setInterval(callback , delay) //delay초마다 callback호출,실행을 반복

=> 즉, setTimeout + while = setInterval

console.log('Start');

// setInterval(callback, interval): interval 단위는 밀리초입니다.
setInterval(() => console.log('2초가 지났습니다'), 2000);

console.log('End');

Start
End
2초가 지났습니다
2초가 지났습니다
2초가 지났습니다
2초가 지났습니다
...

○ 종류2 : 변수 <= setInterval(callback,delay) + setTimeout(clearInterval(변수),delay);  

=> 무한 출력X, 얼마 시간 까지만 반복

console.log('Start');

//2초마다 '시발련아'
const intervalID = setInterval(()=>{
	console.log('시발련아');
},2000);

setTimeout(()=>clearIntrtval(intervalID),7000);//7초후의 '시발련아'의 setInterval() 종료

console.log('End');

○ 종류3 : addEventListener || removeEventListener //알지?

○ 종류4 : React의 useEffect() //Reac

function PostList() {//PostList 컴포넌트
  // ...

  useEffect(() => console.log('render finished!'), []); 
  //컴포넌트가 ReactDom에서 PostList컴포넌트의 render가 끝나면, 콜백 함수 'render finished!'가 출력되도록 하는 것

  return (
    <div className="post-list">
      <div className="post-item">...</div>
      <div className="post-item">...</div>
      <div className="post-item">...</div>
      ...
    </div>
  );
}

○ 종류5 : Express get()메소드 : 

서버란 어떤 리퀘스트가 들어오면 리스폰스를 돌려주는 프로그램을 뜻합니다.

서버는 DOM의 버튼 예시와 비슷하게 리퀘스트가 언제 들어올지를 모르기 때문에 리퀘스트에 대한 처리는 비동기 형태로 합니다.

Ex_

app.get('/hello', (req, res) => {
//'/hello' 주소로 Get 리퀘스트가 들어오면 ,
// 두번째 Argument인 (req,res)=>{} 의 callback메소드 호출, 실행 

//'Success!' 라는 내용을 responce를 보내준다네
  res.send('Success!');
});

// ...