[Dart] 자바스크립트 개발자의 다트 학습 - Part 2

Dart와 JavaScript는 많은 개념을 공유한다. Dart 역시 이벤트 루프에서 실행되고, 비동기 프로그래밍을 위한 Future라는 개념이 존재한다. Future는 자바스크립트의 Promise와 비슷하다. Dart는 정적 타입 언어이기 때문에 타입스크립트를 사용한 경험이 있다면 Dart를 더 쉽게 배울 수 있다.

 

Dart와 JavaScript의 다른 점과 비슷한 점을 Learning Dart as a JavaScript developer 페이지에 자세히 설명돼 있어서 정리해봤다.

 

💡 아래는 Part 1에서 이어지는 Part 2 내용.

 

 

Asynchrony

---

자바스크립트와 마찬가지로 Dart 가상머신(VM)은 단일 이벤트 루프를 사용하여 코드를 실행한다. 모든 코드는 동기적으로 실행되지만, 비동기 도구를 통해 실행 순서를 제어할 수 있다.

 

Futures

자바스크립트에 Promise가 있다면 Dart엔 Future가 있다. 작동 방식 역시 비슷하다.

// JS
const httpResponseBody = func();
 
httpResponseBody.then((value) => {
  console.log(`Promise resolved to a value: ${value}`);
});

// Dart
Future<String> httpResponseBody = func();
 
httpResponseBody.then((String value) {
  print('Future resolved to a value: $value');
});

 

Futures는 프로미스처럼 실패할 수 있고 catchError 메서드를 통해 오류를 처리할 수 있다.

// JS
httpResponseBody
  .then(...)
  .catch(err => {
    console.log(
      "Promise encountered an error before resolving."
    );
  });

// Dart
httpResponseBody
  .then(...)
  .catchError((err) {
    print(
      'Future encountered an error before resolving.'
    );
  });

 

Promise.resolve() 처럼 즉시 완료되는 Future를 생성할 수도 있다.

String str = 'String Value';
Future<String> strFuture = Future<String>.value(str);
strFuture.then(print); // String Value

 

Async/Await

Dart도 Async/Await 구문을 지원하며 자바스크립트처럼 async 키워드를 사용한 함수는 Future를 반환한다. 예를들어 String을 반환하는 함수에 async를 추가했다면 Future<String>을 반환한다.

// Promise<string> 반환
async function fetchString() {
  return "String Value";
}
 
fetchString().then((str) => {
  console.log(str); // String Value
});

// Future<String> 반환
Future<String> fetchString() async {
  return 'String Value';
}
 
fetchString().then((String str) {
  print(str); // String Value
});

 

then() 대신 await 키워드를 이용해서 Future 값을 얻을 수 있다. 자바스크립트와 마찬가지로 await 키워드는 async 함수 내에서만 사용할 수 있다.

// await는 async 컨텍스트에서만 사용할 수 있다.
Future<void> asyncFunction() async {
  var str = await fetchString();
  print(str); // 'String Value'
}

 

Streams

• Dart에선 rxjs 라이브러리에서 제공하는 Observable과 유사한 스트림을 제공한다.
• 스트림은 기본적으로 Future와 유사하지만 시간에 따라 여러 값을 전달하는 이벤트 버스(event bus)처럼 동작한다. 스트림은 수신이 가능하고, 완료 혹은 실패 상태에 도달할 수 있다.

 

Listening

스트림이 값을 전송할 때마다 해당 스트림의 listen 메서드가 호출된다.

Stream<int> stream = ...
stream.listen((int value) {
  print('A value has been emitted: $value');
});

 

listen 메서드는 오류 처리 혹은 완료를 위한 선택적 콜백을 포함한다.

stream.listen(
  // onData: 스트림이 새로운 데이터를 전송할 때 호출
  (int value) {
    // 데이터 처리 로직
  },
  // onError: 스트림에서 오류가 발생했을 때 호출
  onError: (err) {
    print('Stream encountered an error! $err');
  },
  // onDone: 스트림이 완료됐을 때 호출
  onDone: () {
    print('Stream completed!');
  },
);

 

listen 메서드는 StreamSubscription 인스턴스를 반환하고, 이 인스턴스를 통해 스트림 수신을 중지할 수 있다.

StreamSubscription subscription = stream.listen(...);
subscription.cancel();

 

비동기 컨텍스트(async 함수) 안에서 스트림과 for-in 루프를 결합할 수도 있다.

Future<int> sumStream(Stream<int> stream) async {
  var sum = 0;
  await for (final value in stream) {
    sum += value;
  }
  return sum;
}

 

try-catch 문으로 스트림 수신 에러를 캐치할 수 있다.

try {
  await for (final value in stream) { ... }
} catch (err) {
  print('Stream encountered an error! $err');
}

 

Creating streams

Stream 클래스는 스트림을 생성하는 다양한 방법을 제공한다.

 

Stream.fromFuture를 사용하여 Future를 기반으로 스트림을 생성할 수 있다.

Stream.fromIterable을 사용하여 Iterable 컬렉션을 스트림으로 변환할 수 있다.

Stream.periodic을 사용하여 일정 간격으로 값을 전송하는 스트림을 생성할 수 있다.

 

StreamController를 사용하여 스트림을 생성하고, 리스너가 추가될 때마다 특정 동작을 수행하도록 할 수 있다.

var listeners = 0; // 리스너 개수를 추적하는 변수
StreamController<int>? controller; // 컨트롤러 선언
 
controller = StreamController<int>(
  // 새로운 리스너가 스트림을 구독할 때마다 메서드 호출
  onListen: () {
    // listeners 값을 증가시키고 해당 값을 리스너에게 전송
    controller!.add(++listeners);
    // 5번째 리스너 이후에는 스트림을 닫음
    if (listeners > 5) controller.close();
  }
);
 
// 스트림 컨트롤러에서 스트림 가져오기
var stream = controller.stream;
 
// 스트림 구독
stream.listen((int value) {
  print('$value'); // 1
});

 

함수에 sync* 키워드를 붙이면 동기식 제너레이터가 되며 이 함수는 이터러브을 반환한다. 함수에 async* 를 붙이면 비동기 제너레이터가 되고 이 함수는 스트림을 반환한다. 비동기 제너레이터에서 yield는 주어진 값을 스트림에 전달한다.

Stream<int> asyncNaturalsTo(int n) async* {
  var k = 0;
  while (k < n) {
    yield k++;
  }
}
 
Stream<int> stream1 = asyncNaturalsTo(5);
stream1.listen(print); // 0, 1, 2, 3, 4
 
Stream<int> stream2 = asyncNaturalsTo(5);
// stream은 forEach 메서드도 제공한다
// yield 될 때마다 forEach의 콜백이 실행된다
stream2.forEach(print); // 0, 1, 2, 3, 4

 

비동기 제너레이터에서 yield*를 사용하면 다른 비동기 제너레이터의 모든 값을 현재 스트림에 순차적으로 yield 할 수 있다.

 

 

Classes

---

Dart와 자바스크립트의 클래스는 유사해보이지만 자바스크립트의 클래스는 기술적으로 프로토타입을 감싸는 래퍼(Wrapper)에 가깝다. 반면, Dart의 클래스는 언어의 표준 기능이다.

 

"this" context

• Dart의 this는 함수를 바인딩 할 수 없고, 실행 컨텍스트에 의존하지 않는다.
• Dart의 this는 클래스에서만 사용되며, 항상 현재 인스턴스를 참조한다.

 

Constructors

Standard constructor

Dart의 표준 클래스 생성자는 전체 클래스 이름을 사용한다. 생성자의 모든 매개변수에 타입을 명시적으로 지정하는 것이 좋다. 클래스의 인스턴스를 생성할 땐 new 키워드를 붙이지 않아도 된다.

class Point {
  // 클래스 필드 (인스턴스 속성 정의)
  final double x;
  final double y;
 
  // 표준 생성자 ": this.x = x, this.y = y" 부분은 초기화 리스트
  Point(double x, double y) : this.x = x, this.y = y;
}
 
// Point 인스턴스 생성
Point p = Point(3, 5);

 

Initializer lists

초기화 리스트는 생성자가 매개변수로 받은 값을 클래스 필드에 할당하는 작업이다. 초기화 리스트는 생성자 매개변수와 본문 사이에 삽입한다. 콜론 : 뒤에 쉼표로 구분하여 여러 초기화를 나열할 수 있다. 초기화 매개변수를 사용하여 초기화를 더 간단하게 작성할 수 있다(문법적 설탕).

// 초기화 매개변수를 사용하지 않았을 때
Point(double x, double y): this.x = x, this.y = y {}
 
// 초기화 매개변수를 사용했을 때
Point(this.x, this.y) {...}

 

생성자에서 위치 지정 혹은 이름 지정 매개변수를 모두 사용할 수 있다.

class Point {
  ...
  // 선택적 위치 지정 매개변수를 사용하는 생성자
  Point(this.x, [this.y = 5]);
  // 이름 지정 매개변수를 사용하는 생성자
  Point({ required this.y, this.x = 5 });
  // 위치 지정, 이름 지정 매개변수를 모두 사용하는 생성자
  Point(int x, int y, { boolean multiply }) {
    ...
  }
  ...
}

 

Named constructors

Dart에선 자바스크립트와 달리 생성자를 여러개 정의할 수 있다. Dart에선 1개의 이름 없는(unnamed) 생성자와, 여러개의 이름 있는(named) 생성자를 정의할 수 있다. 이름 있는 생성자는 클래스 이름 뒤에 . 온점과 원하는 이름을 붙여서 정의한다.

class Person {
  String name;
  int age;
 
  // 이름 없는 생성자
  Person(this.name, this.age);
 
  // onlyName 이름 있는 생성자
  Person.onlyName(this.name, [this.age = 0]);
 
  // defaultPerson 이름 있는 생성자
  Person.defaultPerson([this.name = "John", this.age = 30]);
}
 
void main() {
  final p1 = Person("Zoe", 30);
  final p2 = Person.onlyName("Jane");
  final p3 = Person.defaultPerson();
}

 

Const constructor

생성자 앞에 const 키워드를 붙이면 해당 클래스의 모든 인스턴스 변수는 final 이어야 한다. 즉, 인스턴스가 한 번 초기화되면 속성을 변경할 수 없다.

class Point {
  final int x;
  final int y;
 
  const Point(this.x, this.y);
}
 
void main() {
  Point point = Point(1, 2);
  point.x = 3; // Error! final 변수는 변경 불가
}

 

Constructor redirection

생성자 매개변수 뒤에 콜론(:)과 this 키워드를 사용하면 같은 클래스의 다른 생성자를 호출할 수 있다. 이를 생성자 위임(또는 생성자 체이닝)이라고 부른다.

class Point {
  double x, y;
 
  // 메인 생성자
  Point(this.x, this.y);
 
  // 메인 생성자를 호출하는 서브 생성자
  Point.alongXAxis(double x) : this(x, 0);
}

 

생성자 위임을 사용하면 코드 중복을 줄이고 생성자 로직을 더 효율적으로 관리할 수 있다.

 

Factory constructors

팩토리 생성자는 기존 인스턴스를 반환하거나 하위 타입의 인스턴스를 생성할 수 있는 특별한 생성자다. 일반 생성자와 달리 항상 새로운 인스턴스를 생성하지 않아도 된다(인스턴스 재사용).

class Color {
  final String name;
  final int code;
 
  // 클래스 내부에서만 사용할 수 있는 비공개(private) 생성자
  Color._internal(this.name, this.code);
 
  // 미리 정의된 색상들을 저장하는 정적(static) 맵
  static final Map<String, Color> _cache = {
    'red': Color._internal('red', 0xFF0000),
    'green': Color._internal('green', 0x00FF00),
    'blue': Color._internal('blue', 0x0000FF),
  };
 
  // 팩토리(factory) 생성자
  factory Color(String name) {
    // 캐시에 있으면 해당 인스턴스 반환, 없으면 기본 색상(검정)으로 새 인스턴스 생성
    return _cache[name] ?? Color._internal(name, 0x000000);
  }
}
 
void main() {
  var red1 = Color('red');
  var red2 = Color('red');
  var custom = Color('custom');
 
  print(identical(red1, red2)); // true (같은 인스턴스)
  print(red1.code); // 16711680 (0xFF0000)
  print(custom.code); // 0 (0x000000)
}

 

캐싱, 싱글톤, 조건부 객체 생성 등 다양한 상황에서 팩토리 생성자를 활용할 수 있다.

 

Methods

Dart, JavaScript에서 메서드는 객체에 동작을 제공하는 함수다.

class Example {
  // 메서드
  doSomething() {
    // ...구현
  }
}

class Example {
  // 메서드
  void doSomething() {
    // ...구현
  }
}

 

Extending classes

Dart에선 자바스크립트와 유사한 방식으로 클래스를 확장할 수 있다. 부모 클래스의 메서드를 재정의(오버라이드) 할 땐 @override 어노테이션을 사용한다.

class Animal {
  int eyes;
 
  Animal(this.eyes);
 
  makeNoise() {
    print('???');
  }
}
 
class Cat extends Animal {
  // 부모 클래스 생성자에 2를 전달하여 호출 (생성자 위임)
  Cat() : super(2);
 
  // makeNoise 메서드 오버라이드
  @override
  makeNoise() {
    print('Meow');
  }
}
 
void main() {
  final cat = Cat();
  print(cat.eyes); // 2
  cat.makeNoise(); // Meow
}

 

메서드를 오버라이드 했어도 super 키워드를 사용해서 상위 메서드를 호출할 수 있다.

class Cat extends Animal {
  // 부모 클래스 생성자에 2를 전달하여 호출 (생성자 위임)
  Cat() : super(2);
 
  // makeNoise 메서드 오버라이드
  @override
  makeNoise() {
    print('Meow');
    super.makeNoise();
  }
}
 
void main() {
  final cat = Cat();
  cat.makeNoise(); // Meow, ???
}

 

Classes as interfaces

Dart에선 별도의 interface 키워드가 없고, 클래스 정의 자체가 인터페이스 역할을 수행한다. 다른 클래스의 인터페이스를 구현할 땐 implements 키워드를 사용한다. 예를들어 클래스 B가 implements A를 선언하면, 클래스 B는 클래스 A의 모든 공개(public) 메서드와 속성을 구현해야 한다. extends 확장과 달리 메서드와 필드 구현은 새 클래스에 공유되지 않는다.

class Consumer {
  consume() {
    print('Eating food...');
  }
}
 
class Cat implements Consumer {
  @override
  consume() {
    print('Eating mice...');
  }
}
 
void main() {
  Consumer consumer = Cat();
  consumer.consume(); // Eating mice...
}

 

인터페이스로 사용되는 클래스의 생성자는 이를 구현하는 클래스에 상속되지 않는다. 따라서 super 메서드를 사용하여 인터페이스의 메서드를 호출할 수 없다.

class Cat implements Consumer {
  @override
  consume() {
    print('Eating mice...');
    super.consume(); 
    // Invalid. The superclass `Object` has no `consume` method.
  }
}

 

여러 인터페이스를 동시에 구현할 수도 있다. 이를 다중 인터페이스 구현이라고 부른다.

class MyClass implements Interface1, Interface2, Interface3 {
  // 여러 인터페이스의 메서드와 속성 모두 구현
}

 

Abstract classes and methods

클래스의 확장(상속), 인터페이스 구현은 가능하지만 인스턴스 생성을 허용하지 않으려면 해당 클래스를 abstract로 표기한다. 추상 클래스는 일반적으로 하나 이상의 추상 메서드(구현이 없는 메서드)를 포함하고, 이 메서드들은 하위 클래스에서 반드시 구현돼야 한다. 메서드 본문 없이 선언만 있다면 추상 메서드로 간주된다.

abstract class Consumer {
  consume();
}
 
// 전체 클래스 확장
class Dog extends Consumer {
  consume() {
    print('Eating cookies...');
  }
}
 
// 인터페이스만 구현
class Cat implements Consumer {
  consume() {
    print('Eating mice...');
  }
}

 

추상 클래스는 일반 메서드도 포함할 수 있다.

abstract class Shape {
  // 추상 메서드
  double area();
 
  // 일반 메서드
  void printName() {
    print("This is a shape");
  }
}
 
class Circle extends Shape {
  double radius;
 
  Circle(this.radius);
 
  @override
  double area() {
    return 3.14 * radius * radius;
  }
}
 
void main() {
  var circle = Circle(5);
  circle.printName(); // This is a shape
}

 

Mixins

믹스인은 클래스 간에 기능을 공유할 때 사용하는 개념으로, 특정 클래스의 일부인 것처럼 필드와 메서드를 활용할 수 있도록 해준다. 이를 통해 한 클래스에서 여러 믹스인을 결합하여 사용할 수 있다.

 

믹스인은 클래스를 상속하거나 공통 조상을 공유하지 않더라도 동일한 기능을 여러 클래스에서 공유할 수 있는 유연한 방법을 제공한다. Dart에서 믹스인은 with 키워드를 사용하여 적용한다. 여러 믹스인을 사용할 경우 쉼표(,)로 구분하여 나열할 수 있다.

 

자바스크립트엔 Dart의 with 같은 키워드가 없기 때문에 Object.assign을 사용하여 기존 객체에 다른 객체의 속성을 병합하는 방식으로 구현해야 한다.

// Animal 클래스 정의
class Animal {}
 
// 기능(Mixins) 정의
class Flyer {
  fly = () => console.log("Flaps wings");
}
class Walker {
  walk = () => console.log("Walks on legs");
}
 
// Animal 클래스를 상속받는 클래스 정의
class Bat extends Animal {}
class Goose extends Animal {}
class Dog extends Animal {}
 
// 클래스 인스턴스에 올바른 기능을 혼합하여 생성
const bat = Object.assign(
  new Bat(), // Bat 인스턴스를 생성하고
  new Flyer() // Flyer 기능 혼합
);
 
const goose = Object.assign(
  new Goose(), // Goose 인스턴스를 생성하고
  new Flyer(), // Flyer 기능 혼합
  new Walker() // Walker 기능 혼합
);
 
const dog = Object.assign(
  new Dog(), // Dog 인스턴스를 생성하고
  new Walker() // Walker 기능 혼합
);
 
// 올바른 메서드 호출
bat.fly(); 
goose.fly(); 
goose.walk();
dog.walk(); 
 
// 잘못된 메서드 호출
bat.walk(); // bat 인스턴스에는 walk 메서드 없음
dog.fly();  // dog 인스턴스에는 fly 메서드 없음

// Animal 추상 클래스 정의
abstract class Animal {}
 
// 기능(Mixins) 정의
class Flyer {
  fly() => print('Flaps wings');
}
 
class Walker {
  walk() => print('Walks on legs');
}
 
// Bat 클래스 정의 - Flyer 믹스인 사용
class Bat extends Animal with Flyer {}
 
// Goose 클래스 정의 - Flyer와 Walker 믹스인 모두 사용
class Goose extends Animal with Flyer, Walker {}
 
// Dog 클래스 정의 - Walker 믹스인 사용
class Dog extends Animal with Walker {}
 
void main() {
  // 올바른 메서드 호출
  Bat().fly();
  Goose().fly();
  Goose().walk();
  Dog().walk();
 
  // 잘못된 메서드 호출
  Bat().walk(); // Walker 믹스인을 사용하지 않아서 walk 메서드 없음
  Dog().fly();  // Flyer 믹스인을 사용하지 않아서 fly 메서드 없음
}

 

믹스인이 일반 클래스로 사용되는 것을 방지하려면 class 대신 mixin 키워드를 사용한다. mixin 클래스는 인스턴스를 생성할 수 없다.

mixin Walker {
  walk() => print('Walks legs');
}
 
// Walker는 클래스가 아니기 때문에 상속 불가
class Bat extends Walker {}

 

여러 믹스인을 사용하면 서로 겹치는 메서드나 필드를 가질 수 있다. 이땐 ❶자체 클래스, ❷믹스인(오른쪽에서 왼쪽으로) ❸부모 클래스 순서로 구현을 탐색한다.

abstract class Animal {}
 
mixin Consumer {
  eat() => print('Consumer Eating...');
}
 
mixin Flyer {
  eat() => print('Flyer Eating...');
 
  fly() => print('Flying...');
}
 
// Bird(자체 클래스) -> (Flyer -> Consumer) -> Animal(부모 클래스) 순서로 검사
class Bird extends Animal with Consumer, Flyer {
  chirp() => print('Chirping...');
}
 
void main() {
  Bird bird = Bird();
  bird.eat(); // Flyer Eating...
  bird.chirp(); // Chirping...
  bird.fly(); // Flying...
}

 

Extension

확장 메서드는 기존 클래스나 인터페이스에 새로운 메서드를 추가할 수 있는 기능이다. 이를 통해 클래스의 원래 구현을 변경하지 않고도 기능을 확장할 수 있다. 다른 라이브러리, Dart SDK 등의 클래스를 확장할 때 유용하게 쓰인다.

// 확장 이름(NumberParsing)은 임의로 지정할 수 있다.
extension NumberParsing on String {
  // String 타입에 parseInt 확장 메서드 정의
  int parseInt() {
    // 여기서 this는 확장 메서드를 호출한 String 값
    return int.parse(this);
  }
}
 
void main() {
  print('123'.parseInt()); // 123
}

 

확장 메서드는 정적 타입에 의존한다. dynamic 타입 변수에선 확장 메서드를 사용할 수 없다.

// ...확장 메서드 생략
 
void main() {
  dynamic num = '2';
  print(num.parseInt()); // NoSuchMethodError 런타임 오류
}

 

확장 메서드가 다른 파일에 정의되어 있다면 현재 파일에서 import 해야만 사용할 수 있다.

// 확장 메서드가 정의되어 있는 파일 import
import 'string_apis.dart';
// 확장 메서드 사용
var age = '42'.parseInt();

 

Getters and setters

Dart의 Getter/Setter는 기본적으로 자바스크립트와 동일하게 작동한다.

// JavaScript
class Person {
  _age = 0;
 
  get age() {
    return this._age;
  }
 
  set age(value) {
    if (value < 0) {
      throw new Error("Age cannot be negative.");
    }
    this._age = value;
  }
}
 
var person = new Person();
person.age = 10;
console.log(person.age); // 10

// Dart
class Person {
  // 언더스코어(_)로 시작하는 이름은 private 필드가 됨
  // private 필드는 선언된 라이브러리(파일) 외부에선 접근 불가
  int _age = 0;
 
	// (파라미터를 생략한 축약형) int get age => _age;
  int get age {
    return _age;
  }
 
  set age(int value) {
    if (value < 0) {
      throw ArgumentError('Age cannot be negative.');
    }
    _age = value;
  }
}
 
void main() {
  Person person = Person();
  person.age = 10;
  print(person.age); // 10
}

 

참고로 Dart에서 클래스 멤버에 접근할 땐 this를 생략할 수 있다.

 

Public and private members

자바스크립트와 Dart 모두 접근 제어를 위한 키워드(public, private, protected 등)가 없다. 모든 클래스 멤버는 기본적으로 public 이다. 자바스크립트의 private 멤버 정의는 해시(#)를 사용하고, Dart에선 언더스코어(_)를 사용한다.

// JavaScript
class Animal {
  eyes; // Public field
  #paws; // Private field
 
  // Private method
  #printEyes() {
    print(this.eyes);
  }
 
  // Public method
  printPaws() {
    print(this.#paws);
  }
}

// Dart
class Animal {
  int eyes; // Public field
  int _paws; // Private field
 
  // Private method
  void _printEyes() {
    print(this.eyes);
  }
 
  // Public method
  void printPaws() {
    print(this._paws);
  }
}

 

자바스크립트의 private 필드는 클래스 외부에서 접근할 수 없고, Dart의 private 필드는 파일 스코프 기반으로, 다른 파일(라이브러리)에서 접근할 수 없다. 라이브러리의 접근 범위를 여러 파일로 확장하려면 part 지시문을 추가한다.

 

Late variables

클래스 필드를 나중에 초기화 해야할 때 late 키워드를 사용한다. 이 키워드를 사용하면 필드를 선언할 때 값을 즉시 할당하지 않고 필요한 시점에 초기화할 수 있다. late 키워드를 사용하면 해당 필드는 non-nullable이 된다. 즉, 필드를 초기화하기 전까지는 접근할 수 없고, 초기화 후에는 null이 될 수 없다.

 

nullable 필드는 null 값을 가질 수 있기 때문에 초기화하지 않아도 null로 접근할 수 있다. 반면, late 키워드를 사용한 non-nullable 키워드는 null이 될 수없고 초기화하지 않은 상태에서 접근하면 런타임 오류가 발생한다.

class Example {
  late String name; // late 키워드를 사용하여 나중에 초기화
 
  void initializeName(String newName) {
    name = newName; // 필요할 때 초기화
  }
}
 
void main() {
  var example = Example();
  example.initializeName('Dart'); // name 초기화
  print(example.name); // Dart
}

 

아래처럼 순환 참조로 초기화를 늦춰야 하는 경우에 late 키워드를 활용할 수 있다.

class PetOwner {
  final String name; // 주인 이름 (수정 불가)
  late final Pet _pet; // 나중에 초기화되는 pet 객체
 
  // Pet 객체는 PetOwner 객체를 생성자 파라미터로 받기 때문에
  // PetOwner 객체를 먼저 생성한 다음 Pet 객체를 초기화 해야함
  PetOwner(this.name, String petName) {
    _pet = Pet(petName, this);
  }
 
  // Pet 객체에 접근하기 위한 Getter
  Pet get pet => _pet;
}
 
class Pet {
  final String name; // Pet 이름
  final PetOwner owner; // Pet 주인
 
  // 생성자에서 PetOwner를 받아 초기화
  Pet(this.name, this.owner);
}
 
void main() {
  PetOwner owner = PetOwner('Bob', 'Fluffy');
  print(owner.pet.name); // Fluffy
}

 

컴파일러가 변수의 초기화 여부를 판단할 수 없는 상황에선 지역 변수에 late 키워드를 사용한다. Dart에선 변수를 사용하기 전에 반드시 초기화해야 한다. 하지만 특정 조건에 따라 변수가 초기화되는 상황에선 컴파일러가 초기화 여부를 판단하지 못할 수 있다.

 

이때 late 키워드를 사용하면 변수를 나중에 초기화하겠다고 명시함으로써 초기화 체크를 런타임까지 지연시킬 수 있다. 아래 예시에서 capture 인자의 true 여부를 컴파일 시점엔 알 수 없으므로, captures 변수를 late로 선언하여 런타임에서만 초기화 체크를 수행하게 한다.

doSomething(int n, bool capture) {
  late List<Foo> captures;
  if (capture) captures = [];
  for (var i = 0; i < n; i++) {
    var foo = something(i);
    if (capture) captures.add(foo);
  }
}

 

 

Generics

---

자바스크립트는 제네릭을 제공하지 않지만, Dart는 타입 안정성을 개선하고 코드 중복을 줄이기 위한 목적으로 제네릭을 제공한다(타입스크립트의 제네릭과 유사한 기능 수행).

 

Generic methods

제네릭 타입 파라미터를 정의하려면 메서드 이름 뒤에 <T> 형태로 명시한다. 정의한 제네릭 타입은 메서드의 반환 타입이나 매개변수로 사용할 수 있다.

// Key/Value 모두 Object? 타입을 가지는 Map
Map<Object?, Object?> _cache = {};
 
// 반환 타입, 매개변수가 모두 T 제네릭 타입을 가지는 함수
// 가장 앞 부분은 반환 타입
T cache<T>(T value) => (_cache[value] ??= value) as T;

 

쉼표(,)로 구분하여 여러 제네릭 타입을 정의할 수 있다.

// 다중 제네릭 정의
T transform<T, Q>(T param1, Q param2) { ... }
 
// 명시적으로 정의된 타입으로 메서드 호출
transform<int, String>(5, 'string value');
 
// 타입을 추론할 수 있을 땐 생략할 수 있다
transform(5, 'string value');

 

Generic classes

제네릭을 클래스에 적용하여 특정 타입에 맞춘 클래스를 재사용할 수 있다.

class Cache<T> {
  final Map<String, T> _cache = {};
 
  // _cache[key] 값이 없을수도 있기 때문에 T는 nullable 이어야 한다.
  T? getByKey(String key) => _cache[key];
 
  void setByKey(String key, T value) => _cache[key] = value;
}
 
void main() {
  final stringCache = Cache<String>();
  stringCache.setByKey('Foo', 'Bar'); // string value는 제네릭과 매칭되므로 Valid
  // stringCache.setByKey('Baz', 5); // int 타입과 제네릭이 매칭되지 않아서 Invalid (주석 처리)
}

 

만약 제네릭 타입을 명시하지 않으면 런타임 타입이 Cache<dynamic>이 되고, setByKey 메서드의 두 번째 인자(T)는 모든 타입을 받을 수 있게 된다.

 

Restricting generics

제네릭을 사용할 때 extends 키워드를 사용해서 특정 타입으로 제한할 수 있다. 예를들어 T extends num은 T가 num 타입이거나 num의 서브타입이어야 한다.

class NumberManager<T extends num> {}
 
void main() {
  // int, double는 모두 num이 서브타입이므로 OK
  var managerInt = NumberManager<int>();
  var managerDouble = NumberManager<double>();
  // var managerString = NumberManager<String>(); // Invalid (주석 처리)
}

 

Generics in literals

Map, Set, List 리터럴은 타입 인자(arguments)를 받을 수 있다. Dart가 타입을 추론하지 못하거나 잘못 추론할 때 이 기능을 활용할 수 있다.

// 자동 타입 추론
var objList = [5, 2.0]; // List<num>
// 명시적 타입 정의
var objList = <Object>[5, 2.0]; // List<Object>
// 명시적 타입 정의
var objSet = <Object>{5, 2.0}; // Set<Object>

 

Map 리터럴에선 키와 값에 대한 타입을 명시적으로 지정할 수 있다.

// 자동 타입 추론
var map = {'foo': 'bar'}; // Type: Map<String, String>
// 명시적 타입 정의
var map = <String, Object>{'foo': 'bar'}; // Type: Map<String, Object>

 

 

Doc comments

---

싱글 라인 주석 : // ...

// 원의 넓이 계산
double area = 3.14 * 4 * 4;

 

멀티 라인 주석 : /* ... */

/*
 * 리스트의 모든 요소 출력
 * 리스트는 1, 2, 3으로 구성
 */
var lst = [1, 2, 3];

 

문서화 주석 : /// ... 또는 /** ... */

/// 주어진 숫자가 짝수인지 여부 확인
bool isEven(int number) {
  return number % 2 == 0;
}

 

문서화 주석은 dart doc 도구를 통해 문서화 페이지를 생성할 수 있다. 주로 API 문서화를 위해 사용한다. /// 주석을 여러 줄에 걸쳐 사용하면 멀티 라인 주석과 동일한 효과를 낼 수 있다. /// 스타일의 주석이 더 간결하고 읽기 쉽기 때문에 Dart 팀에서 더 선호한다고 한다.

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요