What’s new in Dart 3.3

안녕하세요? Flutter Seoul의 HDD입니다.
2월 16일에 Flutter, Dart 마이너 업데이트와 함께 Flutter 2024 로드맵이 공개되었습니다.

Flutter Roadmap의 경우 Flutter Seoul의 nine님께서 번역해주신 내용이 있으므로 관심있으시다면 링크를 통해 보셔도 좋을 것 같습니다.

그럼 Dart 3.3 을 함께 읽어보시죠!

원문 링크: https://medium.com/dartlang/dart-3-3-325bf2bf6c13

성능과 크로스 플랫폼 개발의 판도를 바꿀 Dart 3.3이 출시되었습니다!

성능 최적화와 네이티브 코드와의 사용방식에 혁명을 일으키는 Extension Types 으로 앱을 강화할 준비를 하세요. 또한 개선된 JavaScript interop 모델은 강력한 타입 안정성과 웹 플랫폼의 강력한 기능을 개발자 친화적인 방법을 도입했습니다.

이것들은 모두 WebAssembly 지원을 위한 기반을 마련합니다. 당신의 Dart Apps에 Google AI 넣는 것도 물론입니다!
이 모든 것이 Dart 3.3에 포함되어 있습니다. 자세히 살펴봅시다!

Extension Types 소개

Extension types 는 type에 대한 zero-cost wrapper를 도입합니다. 호스트 플랫폼과 상호 운영할 때 특히 성능에 민감한 코드를 최적화하기 위해 이를 사용합니다. Extension types은 일반적인 래퍼 할당의 오버헤드를 제거하면서 특정한 멤버를 가진 사용자 정의 타입의 편리함을 제공합니다.

extension type Wrapper(int i) {
  void showValue() {
    print('my value is $i');
  }
}

void main() {
  final wrapper = Wrapper(42);
  wrapper.showValue(); // Prints 'my value is 42'
}

위의 예제에서는 Wrapper 를 extension type으로 정의했지만 일반적인 Dart 언어의 타입처럼 사용합니다.

이를 인스턴스화 하고 함수를 호출할 수 있습니다. 중요한 차이점은 Dart 언어에서 이것을 int로 컴파일 한다는 점입니다. extension types 을 사용하면 일반적인 Wrapper 타입을 할당하는 간접(indirection) 비용 없이 고유한 멤버를 가진 타입을 편리하게 생성할 수 있습니다. 따라서 extension members 기능(Dart 2.7 부터 사용가능)을 사용하면 기존 유형에 함수와 프로퍼티들을 추가할 수 있지만 extension types 기능은 이를 수행할 수 있을 뿐만 아니라, 기본 표현을 숨기는 새로운 API도 정의할 수 있습니다.

이는 호스트 플랫폼과의 상호 운용성에 특히 유용합니다. 네이티브 타입은 래퍼 생성 비용 없이 직접 사용가능하며 관련 Indirection을 만들지 않고도 네이티브 유형을 직접 사용할 수 있으며, 깔끔한 프로덕션 Dart API를 계속 제공할 수 있습니다.

extension types 문서에서 더 자세히 알아보세요.

진화하는 JavaScript Interop

Dart 3.3에는 JavaScript 라이브러리 및 웹과의 상호 운용을 위한 새로운 모델이 도입되었습니다. 이 모델은 JavaScript와 상호 작용하기 위한 새로운 API 세트인 dart:js_interop 라이브러리로 시작됩니다.

이제 Dart 개발자는 JavaScript와 상호작용하기 위한 유형화된 API에 액세스할 수 있습니다. 이 API는 정적 검증을 통해 두 언어 간의 경계를 명확히 정의합니다. 따라서 컴파일 시간 전에 전체 클래스의 문제를 제거할 수 있습니다.

JavaScript 코드에 액세스하기 위한 새로운 API 이외에도 Dart에 extension types를 사용하여 Dart에서 JavaScript 유형을 표현하는 새로운 모델이 포함되어 있습니다.

import 'dart:js_interop';

/// Represents the `console` browser API.
extension type MyConsole(JSObject _) implements JSObject {
  external void log(JSAny? value);
  external void debug(JSAny? value);
  external void info(JSAny? value);
  external void warn(JSAny? value);
}

extension types 에 기반한 이 구문은 extension members 보다 더 많은 표현과 건전성(soundness)를 허용합니다. 따라서 Dart에서 JavaScript API를 간편하게 활용할 수 있습니다.

JS interop 대한 새 문서에서 자세히 알아보세요.

브라우저 라이브러리 개선

버전 1.0 부터, Dart SDK는 포괄적인 브라우저 라이브러리 세트가 포함되어 있습니다. 여기에는 core dart:html 라이브러리와 함께 SVG, WebGL 등의 라이브러리가 포함됩니다. 개선된 JavaScript 인터롭 모델은 이러한 라이브러리를 재구상할 수 있는 기회를 제공했습니다.

앞으로의 브라우저 라이브러리 지원은 package:web에 초점을 맞출 예정입니다. 이는 버전 관리를 간소화하고, 업데이트를 가속화하며, MDN 리소스와 일치시킵니다. 이러한 일련의 개선은 다음 단계로 이어지는데, 바로 Dart를 WebAssembly로 컴파일하는 것입니다.

지금 바로 시작하여 웹어셈블리의 미래를 실현하세요.

Dart 3.3을 통해 패키지 및 애플리케이션 작성자는 WebAssembly로 컴파일된 웹 애플리케이션을 위한 기반을 마련할 수 있습니다. Flutter Web의 WebAssembly 지원은 아직 실험 단계이지만, 개발팀은 구현을 안정화하기 위해 열심히 노력하고 있습니다.

WebAssembly를 사용하여 웹에서 Flutter 애플리케이션을 실행하려면 애플리케이션의 모든 코드와 모든 종속성을 새로운 JavaScript Interop 메커니즘과 package:web을 사용하도록 마이그레이션해야 합니다. 레거시 JavaScript 및 브라우저 라이브러리는 변경되지 않고 그대로 유지되며 JavaScript 코드로 컴파일할 수 있도록 지원됩니다. 그러나 WebAssembly로 컴파일하려면 마이그레이션이 필요합니다.

패키지 및 애플리케이션 작성자가 Wasm을 포함하는 데 도움이 되는 마이그레이션 가이드를 만들었습니다. 안정적인 릴리스에 Wasm을 포함할 때까지 가장 많이 사용되는 패키지가 Wasm을 지원하기를 바랍니다.

한 가지 더: Google AI Dart SDK 소개

Google에서 Google AI Dart SDK를 베타 버전으로 출시했습니다. Dart 또는 Flutter 앱에 생성형 AI 기능을 구축할 수 있습니다. 이 앱들은 Google의 최신 AI 모델인 Gemini를 사용합니다. package:google_generative_ai를 살펴보세요.

이 블로그 게시물에서 Google AI Dart SDK로 빌드하는 방법을 알아보거나 바로 quickstart로 이동하세요.

혹시나 잘못 번역된 문장이 있다면 말씀부탁드리겠습니다.

읽어주셔서 감사합니다.