패스트캠퍼스 환급챌린지 16일차 미션(2월 16일): 15개 프로젝트로 실무까지 끝내는 Dart & Flutter 앱 개발 강의 후기

오늘은 복습 겸 Flutter 프로젝트에 패키지를 추가하는 방법, 라이센스를 확인하고 활용하는 방법에 대해 알아보자.

일단 Flutter에서 패키지를 추가하는 방법은 크게 두 가지가 있다.

1. 터미널에서 명령어로 추가

flutter pub add {package name}

위 명령어로 패키지를 추가하면 최신 버전이면서 프로젝트 의존성과 호환되는 최적의 버전을 알아서 찾고 설치해준다.

 

2. pubspec.yaml에 명시적으로 추가

dependencies, 또는 devDependencies에 명시적으로 해당 패키지의 이름과 버전을 설정하고 설치해줄 수 있다.

이 때 caret syntax를 보통 쓰게 되는데, 현업에서 패키지의 버전을 명시하고 업데이트 범위를 제한하는것은 의도치 않은 충돌을 막아줄 수 있으므로 의미를 꼭 알아두자.

^1.0.2면 1.0.2 버전 이상, 2.0.0 버전 미만의 버전으로 해당 패키지의 버전을 관리하겠다는 의미이다. 보통 메이저 버전 업데이트 시 많은 것들이 사라지고 추가되기 때문에 제일 앞 숫자에 caret 기호를 표시한다.

 

흔들기 카운트 앱에서는 디바이스의 흔들기 동작을 감지해야하기 때문에 이와 관련된 shake 라는 패키지를 설치해주었다.

나는 이렇게 터미널에서 설치하는 방식을 사용했다.

 

다음으로 패키지 라이센스에 대해 알아보자.

사실 pub의 패키지 라이센스라고 해서 뭔가 특별한건 없다. npm, GitHub에서 보던 라이센스와 완전히 동일하다.

복습 차원에서 상업적 이용, 수정과 배포가 가능한 라이센스의 목록을 아래 나열해보았다.

- MIT License

- Apache License 2.0

- BSD License

- GNU GPL License

- Creative Commons

- Mozilla Public License 2.0

- Beerware License

 

여기서 GNU GPL License와 Mozilla Public License 2.0의 경우, 소스 코드 공개의 의무가 있어서 만약 이 라이센스가 명시된 패키지를 프로젝트에서 활용하는 경우 프로젝트의 소스 코드를 전체 공개할 의무가 생기게 된다.

만약 이를 어기면 무시무시한 법적 공방 끝에 벌금을 물 수도 있다고 하니, 내가 사용하는 패키지의 라이선스는 항상 확인하고 사용하도록 하자.

 

마지막으로 이 shake 패키지를 실제 프로젝트에 적용해보자. 여느 라이브러리(패키지)가 그렇듯 README 또는 Docs 페이지에 사용법이 잘 나와있다.

저 ShakeDetector의 인스턴스를 생성하고 onPhoneShake()에 카운트를 증가시키는 로직을 작성하면 될 것으로 예상된다.

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  @override
  void initState() {
    ShakeDetector detector = ShakeDetector.autoStart(onPhoneShake: () {
      _incrementCounter();
    });
    super.initState();
  }

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

 

그럼 흔들기는 어떻게 테스트 할 수 있을까?

AVD 화면 상단에 기타 메뉴를 클릭하고 Extended Controls 화면에 진입한 뒤, Virtual sensors 섹션에 진입하면 이렇게 Move라는 테스트를 할 수 있게 된다.

X, Y, Z 방향으로 기기를 움직일 수 있다.

근데 좀 격하게 흔들어야 카운트가 증가했다. 이 흔들기 민감도를 관리하는 값을 줄여줄 필요가 있을 것 같다.

이건 패키지의 소스코드를 한번 까봐야(?)한다.

  /// This constructor automatically calls [startListening] and starts detection and callbacks.
  ShakeDetector.autoStart({
    required this.onPhoneShake,
    this.shakeThresholdGravity = 2.7,
    this.shakeSlopTimeMS = 500,
    this.shakeCountResetTime = 3000,
    this.minimumShakeCount = 1,
  }) {
    startListening();
  }

우리가 사용했던 autoStart 정적 메서드의 코드 원형인데, shakeThresholdGravity라고 하는 프로퍼티가 민감도와 관련이 있어보인다. 이걸 낮춰주자.

  void initState() {
    ShakeDetector detector = ShakeDetector.autoStart(onPhoneShake: () {
      _incrementCounter();
    },
      shakeThresholdGravity: 1.2 // 2.7 -> 1.2로 감소
    );
    super.initState();
  }

 

그러면 아래와 같이 이전보다는 꽤나 수월하게 카운트가 되는 것을 볼 수 있다.

 

이걸 응용하면 이제 캐시워크? 만보기 같은 돈버는 앱을 만들 수 있는 것이다~

 

끝!

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/48sS29N