[Flutter] 동기와 비동기 개론

개요

---

동기와 비동기, 프로그래밍을 공부하다보면 항상 등장하는 개념이다.

중요한 개념이고 꼭 알아야한다고 하지만 이게 왜 중요한 개념인지 잘 이해하지 못하고 넘어간 적이 많다.▼

외국인이 하는 개그에 따라 웃는 느낌

 

 

하지만 동기, 비동기라는 것은 사실 엄청나게 거창한 것은 아니고 우리의 상식 선에서 충분히 생각해 볼 수 있는 개념이다.

컴퓨터 공학과 학생이라면 아마 CS수업 중에서 이미 이와 비슷한 이야기를 듣기도 했을 것이다.

컴퓨터 전반에서 사용되고 있는 개념이면서 이해하고 보면 아주 당연한 이야기이기에 쉽게 이해할 수 있을 것이다.

 

동기(Synchronous)

---

동기란?

동기는 영어로 Synchronous이고, 다르게 번역하면 동시에라는 의미이다.

그렇다면 무엇을 동시에 수행하는 것이길래 `동기`라고 부르는 것일까?

그 답은 요청과 결과가 동시에 이루어지는 것이다.

즉, 동기는 클라이언트가 요청을 했을 때 결과도 같이 나와야한다는 것이다.

어떤 말인지 헷갈릴 수 있는데 간단한 예시를 들어보면 아래와 같다.

내가 애플스토어에 직접 찾아가서 맥북을 보여달라고 요구했다면, 애플스토어 매니저는 내 요구를 그 자리에서 즉각적으로 들어줘야한다는 것이다.

맥북을 보여주세요! 라고 했다면 그 자리에서 맥북을 꺼내서 보여줘야한다는 것이다.

시간이 얼마나 걸려도 상관이 없다.

내 요청이 들어갔고, 내 요청에 시간이 얼마나 걸리든 딴 짓하지 않고 요청을 바로 들어주는 것이다.▼

캘리포니아까지 갔다가 오는 시간만큼 기다려야함.

 

 

동기의 수행 그래프

동기의 수행을 그래프로 보면 아래와 같은데, 이 그래프 때문에 혼동하는 사람도 종종 생긴다.

그래프를 보면 요청과 요청의 결과가 순차적으로 일어나기 때문에 이건 비동기가 아닌가? 하기도 하는데 요청과 결과의 큰 쌍으로 봤을 때의 동기는 이 그래프가 맞다.▼

동기 그래프

 

 

즉, 동기란

동기는 앞의 일(요청에 대한 수행)이 끝나기를 기다리고 그 뒤의 일을 수행하는 것, 즉 직렬적으로 수행하는 것을 말한다.

 

 

비동기(Asynchronous)

---

비동기란?

비동기는 동기와 반대의 의미로 비동시 라는 의미다.

즉, 요청과 결과가 동시에 일어나지 않는다는 말이다.

 

무엇을 동시에 수행하지 않냐고 하면, 앞에서 말한 요청과 그 요청에 대한 수행이 동시에 일어나지 않는다는 것이다.

아까의 예시를 그대로 사용해보겠다.

내가 애플스토어에 직접 찾아가서 맥북을 보여달라고 요구했다면, 애플스토어 매니저는 내 요구를 일단 받아놓고 수행을 해준다.

하지만 애플 스토어 매니저가 맥북을 바로 찾아줄 거 같지 않아보이고, 실제로 바로 찾아줄 생각도 없어보인다.

그래서 나는 애플 스토어 매니저가 보여줄 맥북을 하염없이 기다리는게 아니라 그 동안 다른 일을 하는 것이다.▼

캘리포니아까지 갔다오는 시간동안 다른 걸 할 수 있다.

 

 

 

비동기의 수행 그래프

마치 PipeLining을 하듯 일을 수행하게 된다는 것이다.▼

비동기 그래프

 

 

즉, 비동기란

비동기는 앞의 일(요청에 대한 수행)이 끝나기를 기다리지 않고, 그 뒤의 일을 수행하는 것, 즉 병렬적으로 수행하는 것을 말한다.

 

 

비동기의 문제점과 해결법

---

문제점

설명만 들어봤을 때는 충분한 자원이 있다면 동기보다 비동기가 훨씬 우월한 구동방식이다.

둘을 비교했을 때 동기는 마치 '컵라면 7개라서 21분을 기다린거야?' 같이 바보같이 보여지기 쉽상이다.▼

맞아, 이 바보야 7 x 3은 21이잖아!!!!

 

 

하지만 비동기라고 문제가 없는것은 아니다.

비동기에서는 동기와 다르게 좀 더 복잡한 문제가 발생한다.

아래의 그림은 우리가 일반적으로 원하는 클라이언트와 서버와의 통신 흐름이다.▼

일반적인 클라이언트와 서버의 통신 흐름

 

 

동기의 경우, 위의 흐름대로 진행이 된다.

요청 전송을 하고, 서버가 보낸 데이터를 받기 전까지는 받은 데이터를 사용하지 않는다.

순차적으로 진행되기 때문에 데이터를 받는 과정을 넘길 수 없다.▼

 

 

하지만 비동기의 경우 이야기가 조금 달라진다.

비동기는 순차적으로 실행이 아니라 병렬적으로 실행이 가능하기 때문에 요청의 전송과 데이터의 사용이 거의 동시에 일어나게 된다.▼

 

 

그렇게 되면 클라이언트는 데이터를 받기도 전에 데이터를 사용하려고 하기 때문에 치명적인 오류가 발생한다.

Q. 제 비동기 코드에서는 될 때가 있는데? 그리고 이론적으로 되는거 아닌지?
A. 서버가 요청을 처리하고 데이터를 보내는 속도가 엄청나게 빠르다면 코드가 잘 돌아갈 수도 있다. 하지만 서버가 조금이라도 멀어지면서 물리적 거리가 발생하게 되면 CPU가 명령어를 수행하는 속도가 훨씬 빨라지므로 오류가 발생하게 된다.

 

 

동기 방식으로 HTTP 요청을 보내면 요청에 대한 결과를 바로 받고 결과를 보여줄 수 있다.

이 경우에는 정상적인 동작이지만, 비동기방식으로 HTTP 요청을 보내면 요청에 대한 결과를 바로 받는다는 보장이 없어지고, 실제로도 결과를 바로 못받는 경우가 생기면서 데이터를 제대로 보여주지 못하는 문제가 발생하게 된다.

 

해결법

그렇다면 이런 문제를 어떻게 해결할까?

이런저런 방법이 있겠지만 가장 쉬운 방식은 (필자는 아직 이거밖에 모른다) 비동기로 돌아가는 코드를 동기로 돌아가게 바꾸는 것이다.

Flutter(Dart)에서는 비동기로 동작하는 함수가 있는 큰 함수에 async를 붙이고, 비동기로 동작하는 함수 앞에 await을 붙여주면 된다.▼

Future<String> getName() async {
    String name = await HTTP요청;
    return name;
}

 

 

 

Future<>
시간이 걸리는 함수들이 값을 반환할 때 앞에 붙인다.
이 함수들은 값을 바로 반환하지 않고 나중에 값을 주기 때문에 명시해줘야한다.

이 함수를 사용할 때는 await을 붙이면 Future을 없애고 값을 받아올 수 있다.▼

String testName = await getName();

 

 

마치며

---

동기와 비동기에 대해서 알아보았다.

Flutter개발을 할 때 이 개념에 대해 모른다면 개발이 진행되지 않을 정도로 중요한 개념이다.

스마트폰에서 네트워킹을 필연적으로 하는 이상 이 개념에 대해서는 더 깊고 자세하게 알 필요가 있다고 생각한다.