Kodeco Flutter 면접 질문_Junior Written Questions

 

Flutter Interview Questions and Answers

 

---

1. fat arrow 문법 써보기

아래 코드에서 makeMilkshake()를 fat arrow 문법을 사용해서 milkshake() getter로 바꿔보기

class Recipe {
  int cows;
  int trampolines;

  Recipe(this.cows, this.trampolines);
  
  int makeMilkshake() {
    return cows + trampolines;
  }
}

class Recipe {
  int cows;
  int trampolines;

  Recipe(this.cows, this.trampolines);
  
  int get milkshake() => cows + trampolines;
}

 

fat arrow 문법은 일반적으로 한 줄로 된 함수나 메서드를 정의할 때 사용하며 아래와 같은 문법을 따름

한 줄로 표현할 수 있는 간단한 함수에서 사용됨.

ReturnType functionName(ParameterType parametername) => expression;
String getName(String name) => 'I am ' + name;

 

또한 getter는 read-only을 원할 때 사용하는 키워드라고 생각하면 되는데,

아래처럼 리턴타입과 함수/속성명 사이에 써주면 됨

int get milkshake => cows + trampolines;

 

 

getter와 반대로 setter도 존재하는데 write까지 원할 때는 setter 써주면 됨

class Recipe {
  int _cows;
  int _trampolines;

  Recipe(this._cows, this._trampolines);
  
  int get makeMilkshake => _cows + _trampolines;
  
  set chCows(int value) {
    _cows = value;
  }
  
    set chTram(int value) {
    _trampolines = value;
  }
  
}

void main() {
  var bar = Recipe(2, 3);
  print(bar.makeMilkshake); // 5
  
  bar.chCows = 7;
  bar.chTram = 3;
  
  print(bar.makeMilkshake); //10
}

 

 

---

 

2. 현재 OverFlow가 발생하는 아래 코드를 고치는 방법

코드 ⬇️

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  final personNextToMe =
      'That reminds me about the time when I was ten and our neighbor, her name was Mrs. Mable, and she said...';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(children: [
          Icon(Icons.airline_seat_legroom_reduced),
          Text(personNextToMe),
          Icon(Icons.airline_seat_legroom_reduced),
        ]),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  final personNextToMe =
      'That reminds me about the time when I was ten and our neighbor, her name was Mrs. Mable, and she said...';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(children: [
          Icon(Icons.airline_seat_legroom_reduced),
          Expanded(child: Text(personNextToMe)),
          Icon(Icons.airline_seat_legroom_reduced),
        ]),
      ),
    );
  }
}

 

Text 위젯은 기본 사이즈 (intrincSize)를 쓰려고 하기 때문에 OverFlow가 발생하지만, Expanded Widget으로 감싸게 되면 Row에서 주어진 공간만 사용하게 하기 때문에 OverFlow가 발생하지 않음

 

 

---

 

3. OverFlow가 발생하는 Row 위젯 고치기

코드 ⬇️

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  final personNextToMe =
      'That reminds me about the time when I was ten and our neighbor, her name was Mrs. Mable, and she said...';

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Row(children: [
          Chip(label: Text('I')),
          Chip(label: Text('really')),
          Chip(label: Text('really')),
          Chip(label: Text('really')),
          Chip(label: Text('really')),
          Chip(label: Text('really')),
          Chip(label: Text('really')),
          Chip(label: Text('need')),
          Chip(label: Text('a')),
          Chip(label: Text('job')),
        ]),
      ),
    );
  }
}

 

Row 위젯을 Wrap 위젯으로 바꿔주면 됨

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Wrap(children: [
          Chip(label: Text('I')),
          Chip(label: Text('really')),
          Chip(label: Text('really')),
          Chip(label: Text('really')),
          Chip(label: Text('really')),
          Chip(label: Text('really')),
          Chip(label: Text('really')),
          Chip(label: Text('need')),
          Chip(label: Text('a')),
          Chip(label: Text('job')),
        ]),
      ),
    );
  }
}

 

Row 위젯은 children 위젯을 배치할만한 충분한 공간이 없을 때 overflow 발생하지만 Wrap 위젯은 공간의 제한이 있을 때 기본적으로 children 위젯을 다음 줄로 넘긴다.

 

direction 속성이 horizontal 인지 vertical인지에 따라 Row대신 쓸 수도 Column 대신 쓸수도 있음

 

---

 

4. var, final, const 의 차이 알기

list1은 var로, list2는 final로, list3는 const로 선언되었을 때, 차이점은 무엇인가?

 

var

Flutter에서 var는 변할 수 있는 값, 즉 변수. 그러나 한 번 정해진 자료형은 변할 수가 없음

즉, list1는 List<String>의 자료형을 변경할 수 없음.

그렇기 때문에 list1[1]에 int형인 2을 넣으면 에러가 발생

  var list1 = ['I', '💙', 'Flutter'];
  list1[0] = 'You';
  print(list1); // [You, 💙, Flutter]
  
  list1[1] = 2; 
  //⛔️ Error: A value of type 'int' can't be assigned to a variable of type 'String'

 

 

 

final, const

final과 const는 플러터의 상수임. (값을 변경할 수 없음)

그러나 final은 런타임에 상수가 되는 반면, const는 컴파일 타임에 상수가 되는 차이점이 있음

 

아래 코드에서 한 번 할당된 list2는 상수이기 때문에  ['You', 'Love', 'Me']처럼 새로운 배열을 할당할 수 없음

그러나 Dart에서의 List는 가변적(Mutable)이기 때문에 리스트의 요소 변경은 가능하다고 함.

  final list2 = list1;
  list2[2] = 'Dart'; // Will this line compile? YES
  print(list2); //[I, 💙, Dart]
  
  list2 = ['You', 'Love', 'Me'];
  //⛔️ Error: Can't assign to the final variable 'list2'.

 

 

마지막 줄은 컴파일 되지 않음!

이유는 const 키워드의 경우 컴파일 타임에 상수가 되기 때문에. (컴파일 시점에 이미 상수로 알려진 값이어야 함.)

그러나 var로 선언된 list1은 var라는 키워드 때문에 런타임에 값이 할당됨.

그러므로 const 키워드로 선언된 list3은 var로 선언된 list1을 참조할 수 없게 됨.

  var list1 = ['I', '💙', 'Flutter'];

  const list3 = list1; // Will this line compile? NO
  //⛔️ Error: Not a constant expression.

 

 

---

 

5. private 키워드 설정하기 (접근제한)

아래 코드에서 cheese를 private으로 만드는 방법과 전역 변수(global variables)로 만드는 방법

class Pizza {
  String cheese = 'cheddar';
}

 

Dart에서는 _를 이용하여 private한 변수나 함수를 만들 수 있음

_를 붙여 변수나 함수를 선언하면 같은 파일에 속한 클래스나 함수에서만 private 변수/함수에 접근이 가능

class Pizza {
  String _cheese = 'cheddar';
}

 

 

전역 변수로 만드는 방법은 class 밖에서 선언해주면 됨.

이렇게 되면 그 파일을 import한 어느 곳에서든 사용이 가능해짐

전역 변수는 어디서 변경되고 있는지 추적이 쉽지 않기 때문에 디버깅과 테스트를 어렵게 만들기 때문에 주의해서 사용해야 함.

그럼에도 불구하고, 싱글톤을 생성할 때나 색상, 크기, 스타일, 테마와 같은 공유 상수를 만들 때는 유용하게 사용될 수 있음.

String cheese = 'cheddar';

 

규모가 커진다면, 상태관리 패턴을 고려하는 게 좋음.