프론트엔드 개발자의 TIL #016

TIL #016

191124 일

 

---

오늘 배운 점

<Flutter>

1. Isolates, Event Loops

• dart의 async 개념에 대한 기초적인 지식부터 다시 짚고 넘어가고 싶어 Flutter 공식채널의 in Focus 시리즈를 따라가 보기로 했다.
• Isolate은 asynchronous programming(비동기 프로그래밍)을 가능하게 하는 토대로,  모든 Dart 코드가 실행되는 곳으로, 단일 스레드가 event loop를 실행하는 메모리 덩어리같은 것이다. 다중 스레드로 같은 메모리를 공유하는 C++같은 언어와 달리 Dart는 각 스레드가 Isolate와 메모리를 따로 가지고 이벤트만 실행하고있다. 
• 많은 앱이 main isolate에서 모든 코드를 실행하는 편인데, 필요하면 isolate를 추가하여 일을 분산시킬 수 있다. 그렇게 되면 main isolate이 좀 더 손쉽게 위젯트리를 빌드할 수 있게 된다. 새로운 isolate는 고유 event loop를 가지고, main isolate이 더 상위에 있을지라도 독립적으로 작동하여 접근할 수 없다. 유일하게 여러 isolate을 함께 작동시킬 수 있는 방법은 서로 메시지를 주고받게 하는 것이다. 

//Dart에서 isolate를 생성
Isolate.spawn(
	function,
    {'data': 'data'},
);

//Flutter의 계산 함수
compute(
	(param) {
    	/*code to run*/
    },
    {'data': 'data'},
);

• 앱에서는 크고 작은 이벤트들이 발생하는데, 어떤 이벤트가 어떤 순서로 발생할지 예측할 수 없다. 따라서 단일 스레드가 중단되지 않고 이를 처리하기 위해 한 번에 하나씩 처리하는 Event loop를 사용한다. 큐에서 가장 오래된 이벤트를 처리하고, 다 처리되면 다음 이벤트를 처리하고.. 큐에 대기하는 이벤트가 없을 때까지 이를 반복한다. 
• 예를 들어 사용자가 어떤 버튼을 탭하는 이벤트가 발생하면 시스템 렌더링 과정에서 '이 버튼과 매칭된다'는 것을 알려주고, Flutter가 onPressed 함수를 실행하게 된다. 함수를 다 실행하면 이벤트 처리가 끝나서 폐기된다. Dart 입장에서는 onPressed가 사용자의 탭을 기다리는 거나, future 네트워크 데이터를 기다리는 거나 큐에서 처리되길 기다리는 이벤트로 인식한다.

RaisedButton(//1. initial build
	child: Text('Click'),
    onPressed: () {//2. tap event
    	final myFuture = http.get(url);
        myFuture.then((response) {
        	if (response.statusCode == 200) {//3. network response event
            	print('Success!');
            }
        });
    },
),

2. 쇼핑몰 기능을 본격적으로 구현하기에 앞서 새롭게 백엔드 협업을 시작했다. 예전보다 더 빠르게 http get을 성공했다. 쇼핑몰 기능은 생각보다 빠르게 완성할 수 있을 것으로 기대해본다 :)

---

내일 배울 점

<Flutter>

1. 쇼핑몰 백엔드 협업 - http post, 리스트 받아오기 등

2. 플러터 비동기 처리의 기본인 Future 기초로 돌아가기 공부

---

- Flutter 공식 채널에서 설명하는 아저씨는 정말 딕션이 좋고 쉽게 설명해주신다.. 이것이 구글 직원의 표본인가