Performance Tracker

udemy에서 알고리즘 공부를 하는데 Big(o)에 대해 공부하였다.

강사님이 javascript로 만든것을 보여주었다. https://rithmschool.github.io/function-timer-demo/

Big O Introduction

정말로 for문의 사용에 따라 실행속도가 O(1)과 O(n)이였다.

실행 속도를 시각적으로 표현한것이 근사해보여서 flutter로 만들어보고싶어졌다.

 

결과:

 

 

기간: 2022/8/20~27(8일)

 

사용 라이브러리:

provider: ^6.0.3
fl_chart: ^0.55.1

github: https://github.com/kangsudal/performance_tracker/tree/main/lib

GitHub - kangsudal/performance_tracker

기간: 2022/8/20~27

 

 

model/subject.dart는 코드 String값과 진짜 실행 함수를 넣어놨다.

class Subject {
  String str_addUpToFirst = '''
    int addUpToFirst(n) {
      var total = 0;
      for (var i = 0; i <= n; i++) {
        total += i;
      }
      return total;
    }
    ''';

  String str_addUpToSecond = '''
    int addUpToSecond(n) {
      return n * (n + 1) / 2;
    }
  ''';

  int addUpToFirst(int n) {
    var total = 0;
    for (var i = 0; i <= n; i++) {
      total += i;
    }
    return total;
  }

  dynamic addUpToSecond(int n) {
    return n * (n + 1) / 2;
  }
}

여기 함수를 부르는곳은 widgets/top.dart이다.

Consumer<MyProviderModel>(
  builder: (_, myProviderModel, __) => ElevatedButton(
    onPressed: () {
      if (controller.text.isEmpty) {
        controller.text = '0';
      }
      myProviderModel.fetchN(int.parse(controller.text));

      switch (context.read<MyProviderModel>().index) {
        case 0:
          //하얀색 Container 속 텍스트 변화
          Stopwatch stopwatch = new Stopwatch()..start();
          subject.addUpToFirst(myProviderModel.n);
          myProviderModel.fetchDuration(stopwatch.elapsed);
          myProviderModel.updateAddUpToFirstResultList();
          break;
        case 1:
          //하얀색 Container 속 텍스트 변화
          Stopwatch stopwatch = new Stopwatch()..start();
          subject.addUpToSecond(myProviderModel.n);
          myProviderModel.fetchDuration(stopwatch.elapsed);
          myProviderModel.updateAddUpToSecondResultList();
          break;
        default:
          break;
      }
    },
    child: Text('Plot!'),
  ),
),

Stopwatch()..start()와 stopwatch.elapsed를 이용하여 시간을 재었다.

잰 시간은 provider에 저장했고, fl_chart를 이용해 값을 시각화하였다.

정확히는 잰 시간을 List<FlSpot>에 추가하여 나타냈다.

LineChart(
  LineChartData(
    lineBarsData: [
      LineChartBarData(
          color: Colors.yellow,
          spots: (context
              .watch<MyProviderModel>()
              .addUpToFirstResultList)),
      LineChartBarData(
          spots: (context
              .watch<MyProviderModel>()
              .addUpToSecondResultList)),
    ],
    titlesData: FlTitlesData(
      show: true,
      rightTitles: AxisTitles(
        sideTitles: SideTitles(
          showTitles: false,
        ),
      ),
      leftTitles: AxisTitles(
        sideTitles: SideTitles(
          showTitles: true,
          getTitlesWidget: leftTitleWidgets,
        ),
      ),
    ),
  ),
),

 

fl_chart에서 LinearChart의 기초적 사용법에 도움을 받은 링크:

https://www.youtube.com/watch?v=eCCFQm83D6M&lc=UgwWt9r0bSB2YI6liiR4AaABAg 

어려웠던점:

seconds로 y-axis를 표현하니까 0~0만 나왔다.

https://stackoverflow.com/questions/73500474/the-argument-type-sidetitles-cant-be-assigned-to-the-parameter-type-axistitl

The argument type 'SideTitles' can't be assigned to the parameter type 'AxisTitles?'

seconds로 y-axis를 표현하니까 0~0만 나왔다.

그래서 microseconds로 직접 나타내니 괜찮아졌다. 값이 너무 작아서 그랬던거같다.

 

 

결론:

dynamic addUpToSecond(int n) {
  return n * (n + 1) / 2;
}

는

int addUpToFirst(int n) {
  var total = 0;
  for (var i = 0; i <= n; i++) {
    total += i;
  }
  return total;
}

보다 확실히 빠르다

 

performance tracker 영상.zip

8.08MB