[Flutter] 사진 업로드시 필요한 비동기처리, Future.wait(), GCS 이미지 업로드, 동시성 프로그래밍, 병렬처리 등

문제

사진 업로드시 원본사진과 썸네일 사진을 GCS에 업로드하는데, 이 때 한 게시물에서 올리는 사진 갯수가 많아짐에 따라 사용자는 아무 것도 할 수 없게 된다. 그래서 우선 아래와 같은 처리를 했다.

 

1. 등록 후 화면을 게시물 작성 화면을 벗어나 게시물 목록에서 다른 작업을 하거나 게시물을 읽어도 다른 스레드에서 사진이 업로드 되도록 하였다.
2. 사용자가 등록하는 사진이 10장이라면, GCS에는 썸네일 10장, 원본 파일 10장으로 총 20장이 올라간다. 이때 썸네일은 용량 축소를 위해 사진 크기와 품질을 떨어트려준다.
3. 사진이 10장이라면 10장이 업로드가 동기적으로 실행된다. 하지만 10장의 업로드를 병렬처리 한다면 시간을 축소할 수 있다.

 

Dart의 비동기 처리

Dart의 비동기 프로그래밍에서는 async 및 await 키워드를 사용하여 코드를 실행할 수 있다. 이렇게 하면 여러 작업이 동시에 실행되는 것처럼 보이지만, 실제로는 이벤트 루프를 사용하여 한 번에 하나의 작업만 처리된다. 이벤트 루프는 작업을 실행할 때마다 작업을 완료할 때까지 기다리지 않고 다음 작업으로 이동한다. 이로 인해 코드는 동시에 실행되는 것처럼 보이지만, 실제로는 하나의 작업이 완료되고 나면 다른 작업이 수행된다.

 

하지만 병렬 처리에서는 여러 작업이 동시에 실행되므로, 동시에 실행되는 것처럼 보이는 것이 아니라 실제로 여러 작업이 동시에 수행된다. 이는 여러 스레드를 사용하여 동시에 작업을 처리하는 것과 비슷한 개념이다.

 

그럼 Future.wait() 이란?

Dart에서 여러 비동기 작업을 동시에 실행할 수 있도록 지원한다. Future.wait()는 여러 Future 객체를 인수로 받아서, 이들이 모두 완료될 때까지 기다리는 역할을 한다.

 

Future.wait()를 사용하면, 각각의 비동기 작업이 별도의 이벤트 루프에서 동시에 실행되어, 여러 작업을 동시에 처리할 수 있는 것이다. 이로 인해 전체 작업 시간이 단축된다. 하지만 Dart의 병렬 처리는 실제 스레드를 사용하는 것과는 약간 다르다. Dart는 단일 스레드에서 실행되며 이벤트 루프를 사용하여 비동기 작업을 처리한다. 이렇게 하면 여러 작업이 동시에 실행되는 것처럼 보이지만, 실제로는 이벤트 루프를 통해 비동기 처리가 이루어진다.

 

Future.wait()를 사용하면 여러 작업을 병렬로 처리할 수 있지만, 이는 실제로 다중 스레딩이 아닌 이벤트 루프를 사용한 비동기 처리를 의미한다는 것이다.

 

여기서 잠깐 보고 넘어갈 것 - 동시성 프로그래밍과 병렬처리의 개념

병렬 처리(parallel processing)와 동시성 프로그래밍(concurrent programming)은 서로 관련되어 있지만, 정확히 같은 의미는 아니다. 두 개념을 비교해 보자.

1. 동시성 프로그래밍(Concurrent programming): 동시성 프로그래밍은 프로그램의 구조를 설계하는 방식으로, 여러 작업이 독립적으로 실행되거나 상호 작용하는 것처럼 보이게 한다. 동시성은 작업이 서로 인터리브(interleaved)되어 실행되는 것처럼 보이게 하여 여러 작업을 동시에 처리할 수 있다. 이러한 방식으로, 작업들이 동시에 실행되는 것처럼 보이지만 실제로는 한 번에 하나씩 처리될 수도 있다.(예: 단일 코어 프로세서에서의 실행).
2. 병렬 처리(Parallel processing): 병렬 처리는 프로그램이 여러 작업을 동시에 실행하도록 하는 방식이다. 이는 멀티코어 프로세서 또는 별도의 프로세서에서 동시에 작업을 수행함으로써 가능하다. 병렬 처리는 여러 작업이 실제로 동시에 수행되어 처리 시간을 줄일 수 있다.

결론적으로 동시성 프로그래밍은 여러 작업을 독립적으로 실행되거나 상호 작용하는 것처럼 보이게 하는 프로그래밍 방식이며, 병렬 처리는 여러 작업을 실제로 동시에 실행하는 방식이다. 병렬 처리는 동시성 프로그래밍의 한 형태로 볼 수 있지만, 반드시 동일한 것은 아니다. 동시성은 병렬 처리를 구현할 수 있는 프로그래밍 기술이며, 병렬 처리는 이러한 동시성 기술을 활용하여 작업을 실제로 동시에 실행하는 것이다.

 

그럼 Future.wait()으로 다시 돌아와보자. 너는 동시성 프로그래밍이니 병렬처리니?

Dart의 Future.wait()는 동시성 프로그래밍에 속한다. Future.wait()는 여러 개의 비동기 작업(Future)이 완료될 때까지 기다리고, 모든 작업이 완료되면 결과를 반환하는 기능을 제공한다. 이를 통해 여러 비동기 작업을 동시에 실행하는 것처럼 보이게 하는 것이다.

 

그러나 Future.wait() 자체는 병렬 처리를 구현하지 않는다. Dart는 기본적으로 단일 스레드 프레임워크이기 때문이다. 그러나 Dart의 비동기 프로그래밍 모델은 멀티스레드 환경에서의 병렬 처리와 유사한 성능 향상을 제공할 수 있다. 이는 Dart가 이벤트 루프와 비동기 작업을 이용하여 다양한 작업을 효율적으로 관리할 수 있기 때문이다.

 

 

결론

이미지 업로드와 같이 네트워킹 할 시 사용자 경험과 앱의 성능을 향상시키기 위해 Future.wait()을 사용해보자. 나또한 이를 사용하여 기존 코드를 리팩토링 하였고 GCS 업로드 및 API와의 통신 속도가 비교도 안되게 빨라졌다.

 

 

더 좋은 의견이 있다면 말씀 부탁드립니다.