23.03.07(Flutter 에 관하여)

MH S·2023년 3월 7일

Flutter

목록 보기
3/17

1. Lint (린트)

린트 는 코드의 오류나 버그가 있는지 확인하고, 정해진 규칙을 잘 지키고 있는지에 대한 것들을 개발하면서 확인 및 점검을 하기 위해 사용하는 도구, 툴입니다. 린트(Lint)는 다른 이름으로 린터(Linter)라고도 불리운다고 합니다


린트 예시

void main() {
  print('Linter Test');
  runApp(MyApp());
}

위와 같이 우리는 종종 print를 사용하여 디버깅을 할 때가 있습니다. 하지만, 이 코드는 개발할 때만 사용되므로, 배포할 때는 필요없습니다. 물론, Git를 사용하여 소스 코드를 관리할 때에도, 이 소스는 필요없습니다.

이제 Linter를 사용하여 이런 코드를 개발자에게 알려주어 코드 스타일을 통일해 보겠습니다. 현재는 다음과 같이 아무런 문제 없이 print를 사용할 수 있습니다.

Flutter에서 Linter를 사용하기 위해 특별히 패키지를 설치할 필요가 없습니다. 단지, analysis_options.yaml 파일을 생성하면 바로 Linter를 사용할 수 있습니다. Flutter 프로젝트의 루트 폴더(pubspec.yaml 파일이 있는 폴더)에 analysis_options.yaml 생성하고 다음과 같이 수정합니다.

linter:
  rules:
    - avoid_print

Dart linter에서 확인한 룰을 analysis_options.yaml 파일에 설정하였습니다. 이렇게 파일을 수정하면, 이전과는 다르게 다음과 같이 Linter가 동작하는 것을 확인할 수 있습니다.

마우스를 올려보면 다음과 같이 Linter의 상세 내용도 확인할 수 있습니다.


2. pubspec.yaml 이란?

플러터 프로젝트를 새로 만들면 pubspec.yaml 파일을 볼 수 있습니다. Node.js의 package.json과 같은 패키지 의존성 관리 및 프로젝트 정의 등의 역할을 갖습니다.

pubspec 관련 출처 주소
https://changjoopark.medium.com/%ED%94%8C%EB%9F%AC%ED%84%B0-flutter-%EC%9D%98-pubspec-yaml-ffa40b26296a

pubspec.yaml 의 기본 정보입니다. 영어로 되어있는 주석을 한글로 번역했습니다.

name: <APP_NAME>
description: A new Flutter project.

# 다음은 앱 버전 및 빌드 번호를 정의합니다.
# 버전은 점으로 구분된 세개의 숫자입니다. (예: 1.2.43) 
# 그 다음 빌드 번호가 `+` 뒤에 표시됩니다. (옵션입니다.)
# 버전과 빌드 번호는 각각 --build-name과 --build-number를 지정하여 오버라이딩할 수 있습니다.
# semver.org에서 버전관리에 대해 자세히 읽어보세요.
version: 1.0.0+1

environment:
  sdk: '>=2.0.0-dev.68.0 <3.0.0'

dependencies:
  flutter:
    sdk: flutter

  # 다음은 앱에 Cupertino 아이콘 폰트를 추가합니다.
  # iOS 스타일 아이콘으로 CupertinoIcons 클래스를 이용해서 사용하세요.
  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter

# 이 파일의 일반적인 Dart에 관한 내용은 다음 페이지를 참고하세요.
# https://www.dartlang.org/tools/pub/pubspec

# 아래 내용은 플러터에만 해당합니다.
flutter:
  # 다음 라인은 머티리얼 아이콘 폰트가 앱에 포함됨을 의미하며 
  # 머티리얼 아이콘의 Icons 클래스를 사용할 수 있습니다.
  uses-material-design: true
  # 앱에 에셋을 추가하려면 다음과 같이 에셋 섹션을 추가하세요.
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg
  # 이미지 에셋은 하나 이상의 해상도별 종류를 참조할 수 있습니다.
  # https://flutter.io/assets-and-images/#resolution-aware.
  # 패키지 의존성에 에셋을 추가하는 방법에 대한 자세한 내용은 아래 주소를 확인하세요.
  # https://flutter.io/assets-and-images/#from-packages
  # 앱에 사용자정의 폰트를 추가하려면 이 "flutter" 섹션에 폰트 섹션을 추가하세요.
  # 이 목록의 각 항목에는 폰트 패밀리 이름이 있는 "family" 키와 폰트의 에셋 및 
  # 기타 설명을 포함하는 "fonts" 키가 있어야합니다. 예를 들어,
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # 패키지 의존성의 폰트에 대한 자세한 내용은 아래 링크를 참조하세요.
  # https://flutter.io/custom-fonts/#from-packages

Pubspec 상세

pubspec.yaml 파일은 확장자와 같이 YAML 규격으로 되어있습니다. 지원하는 필드의 종류는 다음과 같습니다.

  • name : 패키지의 이름. underscore _ 를 사용하세요.(필수)
  • version : 패키지의 버전을 의미합니다. (생략할 경우 0.0.0)
  • description : 패키지의 설명을 적습니다. Pub에서 어떻게 출력되는지 볼 수 있습니다.
  • author 또는 authors : 해당 패키지를 만든 사람을 표기합니다. 이름 <이메일> 형식으로 작성합니다.
  • homepage : 패키지의 홈페이지가 있는 경우 적습니다.
  • documentation : 문서가 있는 경우 적습니다.
  • dependencies : 패키지가 사용하는 의존성 목록입니다.
  • dev_dependencies : 패키지가 사용하는 개발용 의존성 목록입니다.
  • dependency_overrides : 임시로 의존성을 오버라이드 해야하는 경우 적습니다.
  • environment : Dart 2 프로젝트의 경우 적습니다.
  • executables : 실행가능한 패키지인 경우 스크립트를 적습니다.
  • publish_to : 기본 값은 https://pub.dartlang.org 입니다. none 이면 배포하지 않습니다.

Pub

플러터는 Pub이라는 패키지 매니저를 제공합니다. 같은 Pub 패키지매니저이지만 Dart는 기본적으로 pub 명령어를 그대로 사용하고, 플러터는 flutter package 명령어를 사용합니다.

pub 명령어의 종류입니다.

  • pub cache : 추가한 의존성에 대한 캐시와 관련된 작업을 합니다.
  • pub deps : 의존성 그래프를 트리구조로 보여줍니다.
  • pub downgrade : 특정 패키지의 버전을 낮춥니다.
  • pub get : pubspec.yaml 에 있는 내용을 다운로드합니다.
  • pub global : 패키지를 전역으로 사용할 수 있도록 변경합니다.
  • pub publish : 패키지를 배포합니다.
  • pub run : 스크립트를 실행합니다.
  • pub upgrade : 패키지의 버전을 최신 버전으로 올립니다.
  • pub uploader : 패키지 업로더 정보를 수정(추가/제거)합니다.

플러터 프로젝트를 진행하는 도중 pub 명령어를 직접 사용할 일이 많지는 않습니다. 각 IDE에서 pubspec.yaml 에서 의존성 정보를 수정하면 백그라운드에서 새로 의존성을 다운받는 작업을 자동으로 해줍니다.


외부 의존성 추가 방법

dependencies 에서 사용할 패키지 추가 방법은 세가지 입니다.

  • path : 파일시스템인 경우 path 를 적어줍니다. 여기서는 plugin1이 패키지 이름입니다.
dependencies:
  plugin1:
    path: ../plugin1
  • git : Git 저장소를 이용하는 경우 url에 저장소 주소를 적어줍니다
dependencies: 
  plugin1:
    url: git://github.com/flutter/plugin1.git
  • git + path : Git 저장소의 특정 경로를 이용하는 경우 path까지 지정합니다.
dependencies: 
  plugin1:
    url: git://github.com/flutter/packages.git
    path: packages/package1

Dart Packages 는 npmjs.com 같은 패키지 저장소입니다. 플러터 또는 웹 혹은 모든 Dart 프로젝트에서 사용할 수 있는 패키지들을 볼 수 있습니다.

플러터 예제로 사용하는 english_words 패키지를 설치하는 방법을 알아봅니다.

dependencies 속성에 english_words: ^3.1.3와 같이 추가합니다.

dependencies:
	english_words: ^3.1.3

플러터 프로젝트에서는 flutter packages get 다트 프로젝트에서는 pub get 을 이용해 의존성을 설치합니다. 물론 VSCode 등을 사용하면 자동으로 설치합니다.

실제 프로젝트에서 사용하려면 import 키워드를 사용합니다.

english_words를 이용하려면,

import 'package:english_words/english_words.dart';

를 사용하려는 Dart 코드에 적어주세요.


Hot Reload 란?

기본적으로 업데이트된 소스 파일들이 Dart Virtual Machine에 주입되면 Flutter는 변경된 사항들을 기반으로 widget tree를 재구성함으로써 변경 사항들이 빠르게 결과물에 적용되는 것을 볼 수 있습니다.

Hot Restart, Full Restart와의 차이점

  • Hot Reload : 앱의 State는 유지하되 Widget Tree만 재구성하고 main() 및 initState()는 다시 호출되지 않습니다.
  • Hot Restart : 앱을 새로 시작하며 기존의 State를 잃게 됩니다.
  • Full Restart : 기존 iOS, Android 빌드와 같이 전체 Swift, Kotlin 등을 모두 다시 컴파일 및 다시 실행합니다.
profile
MH S
이전 포스트

23.03.07(Flutter)

다음 포스트

23.03.13(Flutter)

0개의 댓글