[JavaScript] 동기와 비동기의 이해 & 비동기 처리

코딩을 하면서 이해하기 어려운 관문이 몇가지 존재 하는 것 같다. (개인적인 생각)

 

그 관문들 중 하나가 바로 이 동기(Synchronous)와 비동기(Asynchronous)의 개념과 방식에 대해 이해하는 부분인 것 같다.

 

동기와 비동기

 

위 그림을 참고하면 이해하기 편하다.

 

 

 

동기 방식 (Synchronous)

 

동기방식은 순서에 맞게 진행되는 방식이다. 한가지 작업이 진행되고 있을 때 다른 작업은 순서를 기다리게 된다. 일반적인 코드의 흐름 방식이고 과정익 직관적이며 이해하기 쉽다. 요청에 대한 응답이 끝나면 그 결과를 가지고 온다.

 

 

 

비동기 방식(Asynchronous)

 

비동기 방식은 병렬적으로 진행된다. 여러 작업이 시간의 흐름에 상관 없이 동시에 진행될 수 있다. 과정이 조금 복잡할 수 있고 요청에 대한 응답이 끝나기 전에 다른 작업을 진행할 수 있기 때문에 시간적인 효율은 동기방식보다 좋다.

 

 

그럼 코드를 하나 보자.

예를들어 웹사이트를 보여주는 코드라고 생각해보면 웹사이트 상단부, 메인, 하단부를 보여주는 코드가 순차적으로 진행되고 아무런 문제가 없다. 

 

//사이트 상단부
console.log('웹사이트 상단부입니다.');

//사이트 메인
console.log('웹사이트 메인입니다.');

//사이트 하단부
console.log('웹사이트 하단부입니다.');

//웹사이트 상단부입니다.
//웹사이트 메인입니다.
//웹사이트 하단부입니다.

 

 

 

 

그런데 만약 웹사이트 메인에서 여러가지 요청 자료가 있고 이를 처리하는 시간이 꽤나 오래 걸린다고 생각해보자.

그렇다면 아래 코드에서는 웹사이트 하단은 웹사이트의 메인에서 작업이 끝나는 몇초의 시간을 기다린 후 나타나게 될 것이다.

 

//사이트 상단부
console.log('웹사이트 상단부입니다.');

//사이트 메인
console.log('웹사이트 메인 시작!');
for (let i=0; i<10000000000; i++){
	//뭔가 작업중...
};
console.log('웹사이트 메인 끝!');

//사이트 하단부
console.log('웹사이트 하단부입니다.');

//웹사이트 상단부입니다.
//웹사이트 메인 시작!

//몇초의 시간이 흐름

//웹사이트 메인 끝!
//웹사이트 하단부입니다.

 

 

 

이는 우리가 의도한 바가 아닐 것이다.

이와같이 동작하는 방식이 동기 방식이라고 생각하면 된다. 그럼 위와 같은 상황을 어떻게 해결하면 될까?

대표적으로 비동기적인 처리를 해 줄수 있는 함수중에 setTimeout 함수가 있다. 이 함수를 적용해서 한번 비동기 처리를 해 보자.

 

//사이트 메인 생성 함수
function 사이트메인(){
	setTimeout(()=>{
        for (let i=0; i<10000000000; i++){
            //뭔가 작업중...
        };
		console.log('웹사이트 메인 끝!');
    },0);
};


//사이트 상단부
console.log('웹사이트 상단부입니다.');

//사이트 메인
console.log('웹사이트 메인 시작!');
사이트메인();

//사이트 하단부
console.log('웹사이트 하단부입니다.');

//웹사이트 상단부입니다.
//웹사이트 메인 시작!
//웹사이트 하단부입니다.

//몇초의 시간이 흐름

//웹사이트 메인 끝!

 

위와 같이 사이트 상단이 나타나고, 메인이 시작되고, 하단부가 나타난후 일정시간 작업이 진행되고나서 메인이 나타나게 될 것이다.

이와같이 setTimeout을 사용하면 이 함수는 백그라운드에서 작동을 하기 때문에 기존의 코드 흐름을 방해하지 않고 작동을 하게 해준다.

원래 setTimeout 함수는 두번째 인자로 들어간 시간만큼 지난 이후 안의 내용을 실행해주는 함수이지만 0을 넣으면 바로 실행해준다.

 

 

여러가지 상황의 코드들은 이와같이 비동기 처리로 진행이 된다.

 

 

1. AJAX 요청

웹사이트의 클라이언트 쪽과 서버쪽에서 서로 데이터를 주고 받는 과정은 이와같이 비동기적으로 처리가 된다. 아까 예시와 같이 사이트 메인에 넣어줄 데이터를 서버쪽에서 가지고 와야 할 때 비동기로 처리가 된다.

 

 

2. 예약 작업 스케쥴

위와 같이 setTimeout 함수를 사용하거나 하는 부분을 말한다. 일정시간 이후 작업이 실행되거나 할 때 setTimeout과같은 함수를 사용해서 비동기 처리를 한다.

 

 

3. 파일 읽기 / 쓰기

서버쪽에서 파일을 읽고 쓰는 과정도 비동기로 처리가 된다.

 

 

코드를 작성할때 내용이 복잡하고 까다롭더라도 동기와 비동기에 대한 이해를 확실히 하고 흐름을 이해하면서 작성하면 보다 깔끔하고 성능 좋은 코드를 만들어 낼 수 있을 것이다.