DONGURAN

OS : MAC

Terminal명령어 정리

-i: 대소문자를 구분하지 않습니다.
-n: 검색된 행의 번호를 출력합니다.
-c: 검색된 행의 개수를 출력합니다.
-v: 패턴과 일치하지 않는 행을 출력합니다.
-E: 확장된 정규 표현식을 사용합니다.
-e: 여러 개의 패턴을 지정합니다.

새로운 MAC에 다시 Flutter SDK경로를 설치하면서 글로 정리해보려고 합니다.

flutter pub get
flutter pub upgrade
flutter clean
...
..
.

다양한 'flutter ~ '로 시작되는 명령어가 있습니다.

해당 명령을 사용하기 위해서는 Flutter SDK를 설치해주어야 하고, 설치한 이후 CLI(커맨드창, 쉘창, 명령어창.. 검은창)에서 사용하기 위해 경로를 설정해주어야 합니다. 

Download Flutter SDK execute File

https://docs.flutter.dev/

위의 링크를 통해 플러터 공식 사이트에 접속합니다.

좌측(사이드바)의 'Set up Flutter'를 클릭해주세요.

현재 Mac환경으로 진행 중 이니 'mac OS'를 클릭해주세요.

다음으로 어떤 OS의 앱을 만들 것인지 선택하는 항목이 나오는데요.

처음 포켓몬 고르듯이 어려워 마시고 'iOS'를 선택해주세요.

추후 모든 OS에서 빌드가 가능합니다.

쭉~ 스크롤해서 내려가다보면 'Install the Flutter SDK'가 보이실 겁니다.

본인의 Mac환경에 맞게 설치해주시면 됩니다.

만약에 왼쪽인지 오른쪽인지 도저히 모르겠다면, 좌측 상단 사과 표시를 클릭하시고,

'이 Mac에 관하여'를 클릭하세요.

그리고 '칩' 정보를 보면 M으로 시작하면 Apple Silicon

그 외에는 좌측의 Intel Processor를 선택해서 다운로드 해주세요.

뒤에 '.zip'이라고 되어있는데요. 그것은 파일이 현재 압축된 상태를 뜻합니다.

압축되어 있으면 사용을 할 수 없기 때문에 압축된 파일을 풀어주도록 합니다.

다운로드 받은 파일을 열어주시면 자동으로 압축이 해제됩니다.

압축을 해제하면 'flutter'라는 폴더와 함께 여러 파일이 리스트에 보여지게 됩니다.

압축해제가 잘되었습니다.

이제부터가 어려울 수 있습니다. 집중해주세요.

Spotlight검색을 하셔서 'Terminal'을 입력하여 터미널 창을 실행해주세요.

(화면이 흰색, 회색, 검은색이든 상관 없답니다. 문제가 생긴 것이 아니니 안심하세요^^)

지금부터 작성되는 글은 계속 터미널 화면에 명령어를 치면 되겠습니다.

'export'라고 입력하면, 현재 Mac에 설정된 환경을 볼 수 있습니다.

user@user-Mac ~ % export

우리는 '.zshenv'라는 파일을 만들어야 합니다. 그리고 'export'로 확인했을때 보였던 'PATH=~~'로 이루어진 내용을 '.zshenv'파일안으로 이동시켜야 합니다. 

학교에서 선생님이 칠판에 여러 문장을 적었지만, 시험에 나온다고 노트에 필기하라고 하는 것을 따로 말씀해주듯이 우리는 칠판(export)안에 있는 내용 중에 시험에 나오는 내용(PATH=~ ~ )를 본인의 노트(.zshenv)에 적는다고 생각하시면 됩니다.

그리고 옮길 때 아까전에 설치했던 Flutter SDK를 압축해제하고 생겼던 폴더로 잠시 이동해주세요.

정말 어렵게 느껴질 수 있지만 알고나면 별 것 아니랍니다. 조금만 더 힘내주세요.

flutter폴더 내부 'bin'폴더의 경로를 확인해주세요.

자, 그럼 이제 다시 터미널 창으로 돌아와서 명령어를 입력하겠습니다.

user@user-Mac ~ % echo PATH=$HOME/donguran/tool/flutter/bin:$PATH > ~/.zshenv

(해석)

PATH를 설정해주는데 $PATH는 기존 PATH입니다. 그 앞에 Flutter SDK의 bin폴더를 추가해주고 마지막 '>'로 우측 파일로 해당 문장을 입력한다는 것 입니다. .zshenv파일이 만약에 없다면 새로 생성되면 해당 문장이 입력됩니다.

그리고 다시 Visual Studio 또는 Android Studio로 돌아와서 (만약에 켜져있었다면 껐다 키기)

flutter ~ 명령어를 실행하면 정상적으로 실행되는 것을 확인할 수 있습니다.

궁금한 점을 댓글 달아주시면 빠른 시간 내로 답변드리도록 하겠습니다.

감사합니다.

@DONGURAN

Xcode도 어느덧 2주일 가량 함께하니 익숙해지기 시작한다...

오히려 요새 Android Studio가 Gemini를 탑재하면서 IDE자체가 무겁고 메모리를 많이 잡아먹게 되어 Hot-reload 또는 Plugin갱신이 잘 안되는 듯 하다...

무튼, Xcode에서 디버깅(debugging)을 하는 방법을 나열하려 한다.

디버깅모드라고 따로 Execute하는 것이 아닌 현재 디버그 모드 돌릴 것인지 아닌지 플래그 형태이다.

Debug - Deactivate Breakpoints.

단축키 : Cmd + Y

중단점 모두 해제 (Disable All Breakpoints): Cmd + Shift + Y

지정한 Breakpoint들에서 걸리게 할 것인지 여부를 설정한다.

Breakpoint를 설정

단축키 : Cmd + \

좌측에 파란 북마크가 보이게 된다. (Activate상태)

만약에 디버깅 모드가 아닌 Deactivate상태이면 다음과 같이 Breakpoint색상이 회색빛으로 변한다.

프로그램을 실행하면 해당 포인트에서 멈추는 것을 볼 수 있다. 

우측 하단을 보면 (lldb)로 초록빛이 보인다. (lldb는 디버그를 도와주는 도구이다 : Low-Level-Debugger)

해당 lldb 우측에 값을 입력할 수 있는데,

여기서 현재 알고 싶은 값을 확인할 수 있다.

만약에 'animated'파라메터값이 알고 싶은 경우

앞에 'p'를 입력하고 값이 궁금한 변수를 입력한다.

• po [변수명] : 변수나 객체의 값을 출력 (po는 print object).
• p [변수명] : 변수의 값을 출력 (p는 print).
• expr [표현식] : 코드 내 특정 표현식의 값을 계산하고 결과를 출력.
• v 또는 frame variable : 현재 스택 프레임에서 사용 가능한 모든 변수를 출력.

계속 머무를 수 없다. 다음 단계로 이동하는 방법

• 다음 코드로 이동 (Step Over): F6
• 함수 내부로 들어가기 (Step Into): F7
• 함수 밖으로 나오기 (Step Out): F8

• thread list : 현재 실행 중인 모든 스레드의 정보를 출력.
• thread backtrace [번호] : 특정 스레드의 호출 스택을 출력.
• thread step-in : 함수 내부로 한 단계 들어감 (Step Into).
• thread step-over : 함수 호출을 지나서 한 단계 진행 (Step Over).
• thread step-out : 현재 함수에서 빠져나옴 (Step Out).

안녕하세요! 

LoadingProgressbar Widget을 소개해드리려고 합니다.

어떤 위젯인가?

- 로그인, 파일 다운로드, 비동기작업 등을 하실 때 아주 간편하게 표현할 수 있는 위젯입니다.

일반적으로 로딩 프로그레스바를 표현하려면 새롭게 위젯을 구성해주어야 하죠?

Stack ~ Center ~ CircularProgressIndicator... 등 여러개의 위젯을 구성해주고,

해당 프로그레스바 위젯을 보여주기위해 setState를하여 isVisible = ture/false처리를 해줍니다.

간단해보이지만 은근히 처리하기 귀찮고 까다로운게 바로 로딩프로그레스바입니다.

추가로 현재 프로그레스바가 얼마나 진행했는지도 표현하려면 값도 넣어주어야 하죠.

이 모든걸 한 번에 해결할 수 있는 것이 바로 LoadingProgressbar Widget입니다.

사용법을 설명드리기 앞서 먼저 라이브러리를 추가하는 방법을 알려드리겠습니다.

install : https://pub.dev/packages/loading_progressbar/install

yaml

dependencies:
  ...
  loading_progressbar: <last_version>

shell

flutter pub add loading_progressbar

어떻게 사용하는가?

Progress 표현이 필요한 부모 위젯을 감싸주기만 하면 됩니다.

예시를 들어볼게요.

HomeScreen이라는 위젯이 있고, Scaffold로 구조되어 있다고 가정하겠습니다.

class HomeScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Center(
        child: Text("Home Screen"),
      )
    );
  }
}

HomeScreen에서 Progressbar를 표현하고 싶다면 Scaffold를 LoadingProgressbar 위젯으로 감싸주시면 됩니다!

import 'package:loading_progressbar/loading_progressbar.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LoadingProgressbar(
      controller: ...,
      progressbar: (context, progress) => ...,
      
      child: Scaffold(
        body: Center(
          child: Text("Home Screen"),
        ),
      ),
    );
  }
}

정말 간단하죠?

추가로 필수 파라메터를 만들어주어야 합니다.

controller와 progressbar입니다.

controller : LoadingProgressbar를 컨트롤할 수 있는 클래스

progressbar : LoadingProgressbar위젯에서 표현할 Progress위젯

LoadingProgressbar위젯만 덜렁~ 있으면 스스로 동작하지 않겠죠~?

당연히 신호를 주어야 동작할 것 입니다.

그런 신호를 주고 받을 수 있는 것이 LoadingProgressbarController클래스입니다.

LoadingProgressbarController인스턴스를 생성해주고 LoadingProgressbar위젯의 controller파라메터에 장착시켜주면 되겠습니다.

그리고 마지막으로 'progressbar' 파라메터에 표현하고 싶은 프로그레스 위젯을 설정해주세요!

final LoadingProgressbarController controller = LoadingProgressbarController();

@override
Widget build(BuildContext context) {
  return LoadingProgressbar(
    controller: controller,
    progressbar: (context, progress) => CircularProgressIndicator(),
    child: Scaffold(
      body: Center(
        child: Text("Home Screen"),
      ),
    ),
  );
}

그리고 이제 controller의 함수를 사용해서 정의한 프로그레스바 위젯을 표현하시면 되겠습니다 !

버튼을 눌렀을 때 예제코드는 다음과 같습니다.

ElevatedButton(
  onPressed: () {
    controller.show();
  },
  
  child: Text("Progressbar Visible"),
),

더욱 자세한 건 패키지 설명서를 확인해보세요 ! 

https://pub.dev/packages/loading_progressbar

감사합니다.