[Flutter] Flutter 인터뷰 질문

글 원문:
Top Flutter Interview Questions (2022) - InterviewBit

번역까지는 아니지만 Flutter 개발자라면 한번씩 기억해둬야 할 내용이 있어 정리해서 올렸습니다.
문제가될 시 삭제하겠습니다. [email protected]으로 연락 부탁드립니다.

1. Flutter 사용 시 장점

• 코드 개발 시간 감소: Hot Reload 기능을 이용하여 빠르게 개발할 수 있고, C/C++ 라이브러리를 사용하여 컴파일 되기 때문에 기계 코드에 더 가깝게 퍼포먼스를 낼 수 있다. Flutter 는 다양한 위젯을 제공하고, 사용자가 정의할 수 있는 범위가 넓어 다른 프레임워크보다 시간을 절약할 수 있다.
• 플랫폼간 개발 가능: Flutter를 이용하면 여러 플랫폼에서 동작하는 코드를 작성하고, 관리하고, 실행할 수 있다. 플랫폼에 의존적인 코드 또한 PlatformMethod를 이용하여 사용할 수 있다.
• 라이브 핫 리로드: 앱 상태를 잃지 않고, 유지된 상태에서 변경된 파일이 새로 고침되기 때문에 앱 개발 시 수월하게 진행할 수 있다.
• 네이티브 앱 성능과 유사: 코드 중간 표현이나 해석에 의존하지 않고, 기계 코드에 직접 내장되어 성능 문제를 제거합니다. Flutter를 이용하면 릴리즈된 응용 프로그램을 얻을 수 있다.
• 최소한의 코드: Flutter앱은 JIT/(Just In Time: 프로그램 실행 도중 컴파일을 실행)/AOT(Ahead Of Time: 프로그램의 실행 시점 이전에 컴파일) 컴파일을 사용하여 더 빠른 시작 시간과 더 빠른 성능및 부드러운 기능을 위해 Dart코드를 이용하여 빌드됩니다. JIT 기능을 사용하면 개발 속도를 높이고 UI를 새로고침할 수 있다.
  • JIT 컴파일 방식은 빠른속도로 진행할 수 있지만, 실행 속도가 느림
  • AOT 컴파일 방식은 느리지만, 실행 속도가 빠름
  • Dart는 개발시에는 JIT을 사용하고, 앱 출시에는 AOT가 사용되어 각 컴파일 방식의 장점을 취함

2. Flutter의 아키텍처

Flutter Architecture 공부

3.Flutter 주요 기능

• 유연성과 확장성: 사용하기 쉽고, 통합하기 쉬운 프레임 워크는 향상된 유연성, 확장성 및 통합 기능을 제공
• Hot Reload: 변경사항을 즉시 확인할 수 있다.
• Native 성능/플랫폼 Flutter 라이브러리: Flutter 앱은 Android/iOS에 맞게 정의된 위젯을 제공합니다. 위젯을 사용하면 스크롤, 탐색, 아이콘 및 글꼴과 같은 플랫폼의 모든 기능을 이용할 수 있다.
• 바로 새용할 수 있는 위젯: 개발자는 프레임 워크를 사용할 때 더 빨리 개발할 수 있다. 심지어 애니메이션 까지도!

4. Flutter의 한계/제한

• 라이브러리 제한: Flutter는 비교적 새로운 것이브로 타사 라이브러리 수가 적을 수 있다.
  2022 06월 현재: 개인적으로 개발할 때는 크게 느끼지 못했지만 Native와 연동되는 라이브러리 같은 경우에는 많이 나와있고, 사용하기 쉽도록 잘 되어있다. 하지만 UI쪽은 많이 부족한것이 사실인것 같다. 기본적으로 위젯만 사용하는 앱을 개발하면 큰 무리가 없지만 커스텀이 필요한 UI같은 경우에는 직접 개발하거나 다른것으로 대체하고 있다.
• 릴리즈 크기가 더 크다: 당연히 Native보다 클 수 밖에 없는데 간단한 어플리케이션도 디버그 빌드 시 40MB가 넘어가는 경우가 있다. 특히 Tensor 같은 큰 라이브러리를 사용할 경우 어마무시 하다..
• 제한된 복잡성: Flutter의 3D 모델링, Unity 통합 및 게임 엔진의 경우 부족한것이 많고, 광고 플랫폼 또한 지원하지 않는다. ( 이 부분은 최근 개선되었다. )
• 지원 부족: 아직 널리 사용되지 않았다. ( 이 부분 또한 많이 개선되었고, 대 부분의 문제는 Flutter/Dart 빠른 배포로 해결이 되고있다. )

5. Flutter의 빌드 모드

• Debug: 실제 장치와 에뮬레이터에서 앱을 디버깅할 수 있다.
• Profile: 앱의 성능을 분석하기 위한 일부 디버깅 기능이 유지되는 정도의 모드, 에뮬레이터와 시뮬레이터에서는 수행할 수 없다.
  ※ 처음봐서 뭔가 했는데. 릴리즈 모드와 유사하지만 디버깅이 가능하다고 기억해 두자.
• Release: 앱을 배포할 때 앱의 크기를 축소하고, 최적화 하는 데 사용된다. 더 빠른 시작, 빠른 실행 및 더 작은 크기가 주요 기능이다.

6. Flutter 위젯

• Flutter는 위젯으로 시작하고, 위젯을 끝난다. 위젯을 이용하여 앱이 현재 구성으로 어떻게 표시되는지 확인할 수 있다. Flutter 위젯 변경 시 이전 위젯과 새 위젯의 차이에 따라 다시 작성되며 앱의 UI와 동기화 됩니다.

7. Flutter 위젯 종류

• Stateless
  상태 없음/ 아무것도 하지 않는 위젯을 생성합니다. 정적이고, 변경 될 수있는 값을 가지고 있지 않습니다.
• Stateful
  무엇이든 하는 위젯은 상태 저장 위젯입니다. 동적이고, 변경사항을 모니터링합니다.

8. Dart에 대해서

• Dart의 레이아웃이 선언적이고, 프로그래밍 적이기 때문에 쉽게 읽고 시각화 할 수 있다.
• 클래스, 인터페이스와 같은 프로그래밍 개념을 지원합니다.
• 배열같은 경우 Dart에서 직접 지원하지는 않지만, Collection을 지원합니다. List, Set, Map
• 성능 향상을 위해 JIT/AOT 컴파일러를 모두 지원하고 있다.
• 객체 지향 프로그래밍 입니다.

9. 앱 상태에 대해서

앱의 여러 섹션에서 앱 상태를 공유하고, 동일한 방식으로 사용자 섹션을 유지 관리할 수 있다.
Provider와 관련된 설명, 상태를 공통적으로 관리하거나 공유되어야할 때 위젯 상단에서 Provider를 통해 상태와 데이터를 공유

• 로그인 정보
• 사용자 기본 설정
• 전자 상거래 장바구니
• 소셜 네트워킹 알림 등

10. runApp() 과 main()의 차이점

• main() 프로그램 시작 점, Flutter는 main 함수없이 동작할 수 없다.
• runApp() 화면에 렌더링 될 위젯 트리의 루트, 화면에 연결될 위젯을 반환할 수 있다.

/// 프로그램 시작점
void main() {
	/// Flutter 앱 렌더링 시작
	/// MyApp 이라는 StatefulWidget을 반환하여 시작한다.
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

11. 패키지와 플러그인 차이

• 플러그인: 네이티브 코드를 사용
• 패키지: Dart 프로그래밍 언어로 작성된 코드 구성 요소

두 가지 사이의 구분은 프로젝트 생성 시 차이가 난다. 사실 개발자가 신경쓰지 않으면 차이를 모를 수 있다.

12. Flutter IDE

이 부분은 개발자가 편한걸 사용하면 된다. Flutter command line이 편리하게 되어있어 바로 빌드&테스트를 수행할 수 있기 때문.

개인적으로는 외부에서 개발을 해야할 때 Visual Studio Code를 원격으로 연결하여 작업하고, Command 로 빌드 해서 배포해본적이 있다. flutter build —release

보통 개발할 때는 IntelliJ를 사용하고 있다.

13. Flutter 에서 key는 무엇인가?

위젯, 요소 및 노드의 식별자로 이용됨, GlobalKeys및 Localkeys는 Key의 하위 클래스로, 위젯 트리 내에서는 상태를 보존하는 역할을 수행. 키를 이용하면 동일하게 정의된 상태를 갖는 위젯 컬렉션을 재구성하고 수정할 수 있다.

14. Container 클래스란?

Margin, Border, Padding, Child를 모두 가지고 있는 위젯. 색상, 모양 또는 크기를 가지는 위젯이 있다면 Container를 사용할 수 있다.

Top Flutter Interview Questions (2022) - InterviewBit

15. Flutter 와 ReactNative

크로스 플랫폼 중 가장 널리 사용되는 프레임 워크들입니다. 유사한 점이 많다

• ReactNative: React를 사용한 JavaScript 기반 응용 프로그램. FaceBook이 2015년부터 지원및 오프소스로 제공
• Flutter: Dart로 작성, Google이 지원

만약 둘 중에 선택을 하게 되면 Native를 개발하던 사용자는 Flutter가 비교적 적응하기 쉬울것이고, Web FrontEnd 개발자는 ReactNative가 훨씬 적응하기 쉬울것이라고 개인적으로 생각하고 있다.

16. mainAxisAlignment/crossAxisAlignemt

Column / Row 위젯을 사용할 때 사용하는데 main은 현재 사용중인 위젯의 방향 Column = 수직, Row = 수평 을 나타내고, cross는 반대 방향을 나타낸다. 때문에 동일한 상태변수를 이용하게 되면 Column, Row는 main/cross 혹은 cross/main으로 설정해야 한다.

Top Flutter Interview Questions (2022) - InterviewBit

17. Flutter는 오픈소스인가?

오픈소스 입니다.

18. Flutter 앱에서 일반적으로 개발시간이 왜 오래 걸리는가

사실 크게 느린것 같지는 않은데… 응용 프로그램 빌드 시 Flutter가 장치별 APK/IPA 파일을 만들기 위해서 오래 걸린다. Xcode/Gradle을 통해서 빌드하기 때문인데

개발 노트북을 M1으로 바꾸고 사실 크게 느끼지 못하고있다…

19. Flutter Inspector

Native 안드로이드와 같이 XML을 사용하면 IDE에서 앱의 청사진을 볼 수 있는데. Flutter에도 비슷하게 Flutter Inspector를 제공하고 있다. 청사진과 속성을 시각화할 수 있는데 레이아웃 문제를 진단하고, 현재 레이아웃 상태를 이해할 수 있다.

개인적으로는 디버깅 로그나 실제 기기를 이용해서 작업하고 있어서 크게 사용하지는 않는데. Memory 사용량 체크시 유용하게 사용하고 있다.

20. Flutter Ticker에 대해서

Flutter의 화면 새로고침 빈도를 사용(60FPS), 부드러운 애니메이션을 이용하기 위해 애니메이션 컨트롤러를 만들 때 Ticker를 사용하기도 한다.

티커 클래스 - 스케줄러 라이브러리 - 다트 API (flutter.dev)

21. 디버그 모드에서만 코드를 실행하는 방법

Dart Foundation을 사용한다.

import 'package:flutter/foundation.dart' as Foundation;

if (Foundation.kReleaseMode){     // is Release Mode??
   print('prod');
} else {
   print('dev');
}

22. Flutter Mixin

Mixin을 사용하면 여러 클래스 계충 구조를 재사용 가능하게 만들 수 있다. with 키워드를 이용하여 여러개를 지정할 수 있다.

[Dart] Mixin이란? (feat. 여러 클래스 상속받기)

도움을 줄 수 있는 글. 감사합니다!

23. Stream

비동기 방식의 데이터 시퀀스 제공, 여러 수신 객체를 둘 수 있으며 파이프라인에 배치되면 모두 동일한 값이 받게된다.

단일 구독 스트림

이벤트의 순서가 누락없이 정확하게 전달되어야할 때 사용된다. 그 예로 파일 읽기가 있을 수 있다. 이 스트림은 한 번만 들을 수 있다.

방송 스트림

두개 이상의 리스너가 등록될 수 있고, 구독 취소 후 다시 청취할 수 있다.

외부 데이터 전달 시 잘못된 값이 있으면 Stream에서 해당 데이터를 받아 처리하거나 사용자에게 알릴 수 있다. 개발 진행 전 미리 설계 단계에서 생각하고 있으면 이후 작업하기 편하다. 특히 에러 코드가 여러개 있는 API 사용시에는 더욱

Dart 언어 Stream 알아보기(Dart 비동기 프로그래밍)

도움을 줄 수 있는 글. 감사합니다!

24. Flutter SDK

Flutter SDK를 사용하면 개발자가 단일 코드베이스를 사용하여 모바일, 웹 및 데스크톱용 어플리케이션을 빌드할 수 있다.

Flutter SDK에 포함되어있는 기능

• Dart SDK
• Rendering Engine, Widget, Test를 위한 API
• Native 코드를 위한 컴파일 도구(iOS/Android)
• 반응형 UI
• MethodChannel을 이용한 외부 라이브러리 연결
• Windows, Linux, Mac 테스트를 실행하는 헤드리스 테스트 러너
• DevTools를 사용하여 앱을 테스트, 디버그 및 프로파일링
• Flutter Command Line을 통한 개발,빌드,테스트및 컴파일을 수행할 수 있음

25. Flutter HotReload & HotRestart

모든 Dart Application에는 초기 실행에는 상당한 시간이 필요한데. 이를 위해 Flutter에서는 핫 리로드와 핫 리스타트 기능을 지원하고 있다.

Hot Reload

이 기능을 수행하는데 1초도 필요없다. 이 기능을 사용하면 쉽고 빠르게 변경하고, 버그를 수정할 수 있으며 UI를 수정하고, 기능을 추가할 수 있다.

이 기능을 이용하면 새로운 코드가 신속하게 컴파일되어 DVM으로 보내지고, DVM는 업데이트가 완료되자 마자 UI를 업데이트한다.

좋은점은 상태가 유지된다는것.

Hot Restart

앱 상태가 파괴되고, 다시 실행되지만. 전체 재시작보다는 빠르게 동작합니다.

26. BuildContext에 대하여

BuildContexts는 위젯 트리에서 위젯을 식별하거나 찾는데 사용된다. 각 위젯에서는 BuildContext가 하나씩 존재하는데 이를 이용하여 상위 위젯(부모 위젯까지만 접근할 수 있다)과 데이터에 접근할 수 있다.

27. Flutter Test 유형

단위 테스트

단위 테스트를 사용하여 클래스 또는 메서드를 테스트할 수 있다.

위젯 테스트

위젯 테스트를 사용하여 단일 위젯을 테스트할 수 있다. 위젯의 예상 UI표시및 이벤트를 적절하게 응답하는지 확인할 수 있다.

통합 테스트

앱의 중요한 흐름을 테스트할 수 있다. 모든 위젯과 서비스가 예상대로 함께 작동하는지 확인하는 것이 중요하다.

28. 상태 관리

모바일이든 웹이든 상태는 중요하다. 상태 관리를 사용하여 UI Control이 중앙 집중화되어 응용 프로그램 전체의 데이터 흐름을 처리할 수 있다.

임시 상태

Lcoal State라고 불리며 특정 위젯 내부의 상태를 의미합니다. StatefulWidget을 지원됨

앱 상태

여러 부분에서 공유하기 위한 상태

29. pubspec.yaml

Flutter 프로젝트를 만들 때 포함되며 프로젝트 트리의 맨 위에 있는 파일. 프로젝트에 필요한 패키지 및 해당 버전, 글꼴 등과 같은 종속성에 대한 정보가 들어있다. YAML으로 작성되어 사람이 읽을 수 있도록 되어있다.

• 프로젝트 이름, 버전, 설명
• 프로젝트 내의 dependencies 설정
• 프로젝트 리소스(이미지, 오디오 등)

Python의 requirements.txt Node의 package.json 등과 비슷함.

30. 트윈(Tween) 애니메이션

Flutter에서 다양한 애니메이션을 사용할 수 있는데 그중 Tween에 대한 설명

애니메이션의 처음부터 끝까지 일련의 값을 통하여 진행된다.

Tween class - animation library - Dart API

_animation = _controller.drive(
  Tween<Offset>(
    begin: const Offset(100.0, 50.0),
    end: const Offset(200.0, 300.0),
  ),
);

31. Flutter await

async 메서드가 완료될 때까지 await은 프로세스 흐름을 중단합니다. await 는 일반적으로 이 함수가 완료 될 때까지 기다렸다가 반환 값을 얻을 수 있다는것을 의마하고, 비동기에서만 사용됩니다.

32. Container와 SizedBox

Flutter 앱을 개발하다보면 많이 사용하게 된다.

Container

위젯의 크기, 패딩, 색상을 입혀서 사용할 수 있고, 모양및 제약 조건도 포함되어있어 스타일링이 필요한 경우 사용된다.

SizedBox

위젯의 색상이나 장식등을 설정할수 없다. 자식 위젯 크기를 지정할 때 특정 크기를 갖도록 설정해 준다.

IntelliJ에서 개발하고 있으면 Container를 사용하고, decoration을 지정하지 않으면 SizedBox로 바꾸라고, Tip이 발생한다.

---

쓰면 쓸수록 끌리는 Flutter인데 요즘 시장에서도 많이 찾고 있다. 스타트업등에서 빠르게 개발해야할 때 사용되면 좋을 것 같고, 하드웨서 성능을 끌어다 쓰는 앱이 아니면 사실 Flutter로 어지간한거는 커버가 가능하다고 생각하고 있다.

특히 MVP 제품을 만들 때 개발자 입장에서 보면 아주 고마운 녀석이다.