[Flutter] Flutter 개념 및 동작 원리

플러터

구글에서 개발한 공개 모바일 SDK 이다. 모바일 앱을 만들기 위한 기존 방식은 안드로이드와 IOS를 별도로 구현하여 배포해야했기에 요구되는 기술 스펙과 비용이 컸으나 플러터를 사용하면 한번의 구현으로 배포가 가능하다. 플러터는 렌터링 엔진, UI 컴포넌트, 테스트 프레임워크, 도구, 라우터 등 앱 제작에 필요한 기능을 모두 제공하므로 개발자는 앱 구현에 집중하여 생산성을 높일 수 있다.

플러터가 Dart 언어를 사용하는 이유

• 다트는 JIT(just-in-time), AOT(ahead-of-time) 컴파일을 모두 지원한다.
  • AOT 컴파일러는 다트 코드를 효율적인 네이티브 코드로 바꾸어 개발자 및 사용자가 모두 빠르게 사용할 수 있다.
  • 다트의 선택형 JIT 컴파일러는 핫 리로드hot reload를 지원해 빠른 개발 속도와 반복iteration을 가능하게 해 생산성을 높여준다.
• 다트는 객체지향 언어이기에 마크업 언어를 사용하지 않고 다트 언어만으로 UI/UX 를 쉽게 구현할 수 있다.
• 기존 자바, C 등의 파생언어들과 유사해 생산성이 좋고 예측이 가능하다. 기존 다른 언어에 익숙할 수록 쉽게 접근이 가능하다.
• 다트의 최초 목적은 웹 개발언어였으며 자바스크립트를 대체하려고 만들었다가 방향을 틀어 컴파일러로 구현되었는데 이는 다트의 모든 기능이 자바스크립트로 표현이 가능하다.
• 모듈을 지원하지 않고 오직 객체지향을 기반으로 한다.

다른 모바일 개발 옵션

네이티브 개발 (안드로이드, iOS)

• 앱을 가장 완벽하게 제어 가능하며 디버깅 도구, 성능을 100% 활용 가능하다.
• 그러나 플랫폼 별로 앱을 구현해야 한다.

자바스크립트 기반 크로스 플랫폼

• web view, react native 와 같은 자바스크립트 기반의 크로스 플랫폼을 사용하는 방법도 있다.
• 네이티브 개발 경험이 없지만 최신 자바스크립트 기술을 어느정도 파악하면 웹개발자도 모바일 앱 개발에 참여할 수 있는 장점이 있다.
• 단점으로는 자바스크립트 다리 Javascrtip birdge을 꼽을 수 있다.

플러터의 장점

자바스크립트 다리가 없다.

• 크로스 플랫폼 기술로 앱을 개발할 때 자바스크립트 다리를 사용하는데 이에 필요한 비용이 상당히 높기에 앱의 최적화및 디버깅이 힘들다.
• 플러터는 자체 렌더링 엔진을 이용하기에 실제 네이티브 코드로 컴파일하여 크롬이 사용하는 렌더링 엔진(Skia)을 사용하기에 실행 시 다트를 변환하지 않는다. 그렇기에 앱의 최적화가 더 유리하다.

컴파일 시간

• 플러터의 전체 컴파일 시간은 30초에서 최대 1분을 넘기지 않는다.
• 핫 리로드를 제공해서 개발 주기를 높혀 높은 생산성을 보장한다.

한번에 여러 플랫폼에 배포가 가능하다.

• IOS와 안드로이드를 플러터와 다트를 사용해 한 번만 구현하면 동시에 배포가 가능하다.
• 다트와 플러터 모두 유닛 테스트 라이브러리를 제공한다.

코드 공유 및 유지보수

• 플러터 기술은 자바스크립트로도 가능하기 때문에 웹과 모바일 앱은 클라이언트 뷰를 제외하고 모든 코드 공유가 가능하다. DI를 사용하면 앵귤러 다트앱과 플러터 앱에 같은 모델과 컨트롤러를 사용할수도 있다.
• IOS와 안드로이드는 필연적으로 모든 코드를 공유한다. 덕분에 팀의 생산성을 극대화 할 수 있다.

플러터 동작 원리

• 넓은 의미로 플러터는 웹의 리액트처럼 리액티브, 선언형, 조합할 수 있는 뷰 계층 라이브러리이다. (플러터는 렌더링 엔진도 포함하므로 실제로는 리액트 + 브라우저)
• 플러터는 위젯이라는 작은 컴포넌트를 조합해 모바일 UI를 만든다.
• 플러터의 대부분의 것은 위젯이며 위젯 뷰를 묘사하는 것은 다트 클래스이다.

• 앱의 모든 UI들(리스트, 제품, 버튼, 이미지)은 위젯으로 구성되어있다.
• 위젯은 상태를 갖을 수 있다.
• 위젯의 상태가 변경되면 프레임워크가 이를 인지하고 새 트리를 기존 트리와 비교한 다음 갱신해야 하는 위젯을 처리하게 된다.
  • ex 수량 위젯의 + 버튼을 누르면 내부 상태가 바뀌면서 갱신해야 하는 위젯(수량을 나타내는 텍스트 위젯)을 갱신한다.