• var
    1. var 키워드 사용 
    var name = 'name';
    2. 명시적으로 변수의 타입을 지정
    String name = 'name';

  • Dynamic Type 여러가지 타입을 가질 수 있는 변수에 쓰는 키워드
    어떤 타입이 올지 모르는 변수에 사용

    처음에 지정한 타입이 바뀔 수 있음

     1. 변수 선언시 타입을 지정하지 X
    var name;
    2. 변수의 타입을 명시
    dynamic name;

    name = 'name';

    name = 'suna';

  • Null Safety dart에서는 어떤 변수가 null 이 될 수 있음을 정확히 표기해야 한다.
    1. ? 사용
    String? name = 'name';
    name = null;
    name?.isNotEmpty;

  • late
    final이나 var 앞에 붙여줄 수 있는 수식어로 재할당을 하지 못하는 변수를 만들어줌.
    런타임 중에 만들어질 수 있음.
    어떤 데이터가 들어올 지 모를 때 사용
    late final String name;
    name = 'name';

  • final
    수정 불가
    final name = 'name'

  • const
    compile-time constant를 만들어줌
    컴파일 할 때 값을 알고있는 변수를 만드는 타입
    수정 불가
    const API = "123456789";

1.dart는 왜 빠를까?

1. dart는 두 개의 컴파일러를 도입하였다.

Dart Native = dart 코드를 여러 cpu의 아키텍쳐(ARM32 & ARM64 & Risc-V & x86_64)에 맞게 변환시키는 컴파일러

Dart Web = dart로 쓴 코드를 javascript로 변환시키는 컴파일러

 

Dart는 JIT(just-in-time), AOT(ahead-of-time) 에 의해 컴파일되는데 

 

AOT란?

코드를 실행하기 전에 사전 컴파일을 통해 네이티브 머신 코드로 변환하는 과정으로 Dart뿐만 아니라 C, C++, Rust, Go 같은 언어에서도 널리 사용되는 방식이다

 

예를 들어, C나 C++ 같은 언어로 코딩한 경우, 실행 파일을 생성하기 위해 컴파일 시 운영체제와 CPU 아키텍처에 맞는 바이너리를 생성해야 하는데 Windows에 배포하려면 Windows용 실행 파일로 컴파일해야 하며, Linux나 macOS에 배포하려면 각각의 플랫폼에 맞는 실행 파일로 컴파일해야 합니다.
C 컴파일러는 이 과정을 통해 코드를 기계어로 변환하여 사람들이 컴퓨터에서 해당 프로그램을 실행할 수 있도록 해준다.

이렇듯, 코드를 실행하기 전에 컴파일을 완료하고, 그 결과로 생성된 바이너리를 배포하는 방식이 AOT.

개발시 AOT를 사용하게 된다면 코드 수정시 확인하고 싶을때마다 처음부터 모든걸 컴파일을 해야 하기 때문에 시간이 매우 많이 걸리고 번거롭다.

 

JIT란?

dart VM을 사용하여 작성한 코드의 결과를 바로 화면에 보여준다.

코드를 실행하면서 필요한 부분만 즉석에서 컴파일하므로 개발 속도를 높이지만, 실행 속도는 AOT보다 느릴 수 있다.

그러나 JIT를 사용하면 핫 리로드 기능을 통해 개발 중 코드 변경 사항을 즉각적으로 확인할 수 있다

그렇기 때문에 JIT는 개발중에만 사용된다.

 

dart 가상머신이 풍부한 디버깅과 함께 JIT컴파일러를 제공하고있기 때문에 개발 결과를 즉각 확인할 수 있다.

개발이 완료되과 app 배포 시 dart VM이 아닌 AOT 컴파일러를 사용하여 다양한 아키텍쳐에서 사용할 수 있게된다.

 

2. null safety를 통한 안전한 프로그램이다

null 참조 오류는 런타임 크래시의 주요 원인 중 하나이므로, Dart는 Null Safety를 도입하여 컴파일 단계에서 이러한 오류를 방지한다.

Null Safety는 선언된 변수에 null 값을 허용할지 명시적으로 결정하게 함으로써 프로그램 안정성을 높인다.

2. flutter는 왜 dart를 택했을까?

1. JIT와 AOT 컴파일이 둘 다 있다

그래서 빠른 피드백을 원하면서 최종 앱의 컴파일이 빠르기 때문에 모바일 개발에 아주 좋은 언어라 할 수 있다.

 

2. dart와 flutter 둘 다 구글에서 만들었다.

그래서 flutter를 위해 dart를 최적화 할 수 있다.


처음 시작할 때 dart나 flutter를 설치하지 않아도 dartpad.dev 사이트에서 바로 연습할 수 있다.

https://dartpad.dev/

 

DartPad

 

dartpad.dev

 

기존 

void main(){
  print(sayHello('nico',11,"korea"));
}

String sayHello(String name, int age, String contry){
  return "name = $name, age = $age, contry = $contry";
}

name argument

function 호출시 파라미터에 순서값 대신 name으로 구분

함수의 위치를 기억하지 않고 함수의 정의를 보고 실행함 -> 순서 상관 X

* 이 경우 예외를 지정해주지 않으면 에러남

void main(){
  print(sayHello(
    name : "suna",
    age : 11,
    contry : "korea"));
}

String sayHello({String name, int age, String contry}){
  
  return "name = $name, age = $age, contry = $contry";
}

Error compiling to JavaScript: lib/main.dart:8:25: Error: The parameter 'name' can't have a value of 'null' because of its type 'String', but the implicit default value is 'null'. String sayHello({String name, int age, String contry}){ ^^^^ lib/main.dart:8:35: Error: The parameter 'age' can't have a value of 'null' because of its type 'int', but the implicit default value is 'null'. String sayHello({String name, int age, String contry}){ ^^^ lib/main.dart:8:47: Error: The parameter 'contry' can't have a value of 'null' because of its type 'String', but the implicit default value is 'null'. String sayHello({String name, int age, String contry}){ ^^^^^^ Error: Compilation failed.

 

*예외지정 1*

named argument에 default value 지정

void main(){
  print(sayHello(
    name : "suna",
    age : 11,
    contry : "korea"));
}

String sayHello({String name ='name', int age =0, String contry='contry'}){
  
  return "name = $name, age = $age, contry = $contry";
}

*예외지정 2*

required modifier를 이용해서 필수값으로 지정

void main(){
  print(sayHello(
    name : "suna",
    age : 11,
    contry : "korea"));
}

String sayHello({required name , required age, required contry}){
  
  return "name = $name, age = $age, contry = $contry";
}

ListView.builder()

context 를 index만큼 복사반복

ListView.builder(
  itemCount: 100, // 전체 아이템 개수
  itemBuilder: (context, index) { // index는 0 부터 99까지 증가
		return Text("$index"); // 100번 실행
  }
),

ListView.separated()

요소 사이에 구분선 넣기

ListView.separated(
        itemCount: 10,
        itemBuilder: (context, index) {
          return feed();
        },
        separatorBuilder: (context, index) {
          return Divider();
        },
      ),

 

정말 짜증나게도 vscode를 열었더니 flutter에서 dart에 대한 DSK를 설정하라느니 뭐니 실행이 안된다!!!!!!

그냥 처음부터 다시한다.

강의자료에는 Users/{name}/deveopment 디렉토리를 만들어서 그안에 설치하랬는데 습관처럼 Develop 디렉토리에 설치해서 그런가보다.

편함이고 뭐고 일단 전부 설치 삭제하고 다시 해봤다.

 

1.Flutter 다운로드

더보기

-Apple Silicon 을 사용하는 경우 인텔용 소프트웨어를 실행시킬수 있는 Rosetta 번역기 설치

      sudo softwareupdate --install-rosetta --agree-to-license

 

-다운로드

      1. Users/{유저이름} 디렉터리에 development 디렉토리 생성

      Cmd + ↑(화살표 위 버튼) <-상위폴더로 이동하는 단축키

      2. Flutter 다운로드

      https://docs.flutter.dev/get-started/install/macos

 

macOS install

How to install on macOS.

docs.flutter.dev

      3. 다운로드한 파일을 development 로 이동

      -리눅스로 폴더이동 하는방법

            1. 파일이동

            mv 현재 파일 경로 이동할 경로

            ex) mv /Users/suna/Downloads/flutter_macos_arm64_3.13.0-stable.zip /Users/suna/development

 

           2. 폴더 디렉토리 이동

           mv 현재 파일 경로 이동할 경로

           ex) mv /Users/suna/Downloads /Users/suna

      나는 리눅스로 했지만 직접이동도 가능한것같다.

      저 슬라이드같은 화면이 어떻게 해야 나오는지는 모름

      4. 압축파일 실행

나는 아마 이 단계에서 /Users/suna/development 가 아닌 /Users/suna/Develop 에 설치해서 오류가 생겼던것같다.

왜냐면 환경변수에서 어느 블로그를 봐도 development 에 설치한걸 전제로 나오거든... 

설치 폴더만 바뀐것 뿐인데 왜 이렇게 오류가 났던걸까....?

 

2. 환경변수 설정 및 설치

더보기

-환경변수 등록

      ~/development/flutter/bin 에 있는 flutter 파일을 어디서든 실행할 수 있도록 환경변수에 등록

      macOS 카타리나(Catalina) 이상 버전 명령어 (최신버전)

            echo 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.zshrc && source ~/.zshrc

      macOS 모하비(Mojave) 이하버전 명령어

            echo 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.bash_profile && source ~/.bash_profile

 

-버전 확인

      flutter --version

 

-설치확인

      Flutter 을 개발하는데 필요한 항목들의 상태를 확인

            flutter doctor

여기서 오류가 떴다는듯이 보이는 [x] 는 오류가 아니다.

안드로이드 앱개발에 필요한 Android Studio 와 Android SDK, IOS 앱 개발에 필요한 Xcode, CoCoaPods 가 없다는 뜻이다.

반드시 필요한건 아니지만 애뮬레이터 띄워놓고 보면서 개발하려면 필요

3. 에디터 설치하기 (맥에서 Visual Studio Code 설치)

더보기

- 링크접속

https://code.visualstudio.com/download

 

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

code.visualstudio.com

 

다운로드 목록에 보면 VSCode-darwin-universal.zip 파일이 있는데 더블클릭하면 알아서 설치된다.

 

- Extension 설치

      좌측에 extension 아이콘 선택

      flutter 검색 후 install

      dart 검색후 

            flutter 가 install된 상태라면 dart도 함께 설치됐을테지만 확인해준다.

4. IDE 설치 *IDE : 소프트웨어 애플리케이션

4-1.

Android Studio

더보기

1. 링크 접속 후 Download Android studio 버튼 클릭

2. 약관이 뜨면 아래로 끝까지 스크롤하면 dmg파일을 다운받을수있는 버튼이 보인다. 다운

      다운로드 파일에 들어가면 android-studio-~~--mac.dmg 파일이 있다 

      더블클릭하면 알아서 설치됨

 

3. 안드로이드 스튜디오 설정화면

      전부 Next 클릭하다보면 License Agreement 화면이 나오는데 밑줄친 부분 모두 클릭하고 Accept눌러주면 finish버튼이 활성화된다.

      finish눌러주면 Android Studio의 설치는 끝난다.

 

 

 

 

4-2. Android Command-line Tools 설치 *Flutter에서 Android에 명령을 내리기 위해 필요

더보기

1. Android Studio에서 More Actions를 선택한 뒤 SDK Manager를 선택

2. 그러면 아래와 같이 Preferences for New Projects 팝업이 뜨면 SDK Tools 탭을 선택 → Android SDK Command-line Tools (latest) 선택 → Apply 를 선택

       팝업이 뜨면 OK 버튼 클릭 후 Finish 버튼 클릭하면 설치 완료 

4-3. Android Virtual Devices 설치

앱을 개발시 실제 휴대폰을 연결하여 개발을 진행할 때도 있지만, 대부분의 경우 Virtual Device(컴퓨터에 가상의 휴대폰을 띄우는 소프트웨어)를 이용하여 개발합니다.

 

더보기

 

1. More Actions  Virtual Device Manager (또는 AVD Manager)를 선택해 주세요.

 2. Create Virtual Device... 선택

3. 하드웨어를 선택하는 화면이 나오면 Next를 눌러서 기본으로 설정된 필요한 휴대폰을 설치하도록 하겠습니다.

4. 휴대폰에 설치할 Android OS를 선택하는 화면입니다. Q 옆에 있는 Download 버튼을 클릭하여 OS를 다운로드

      R버전은 Virtual Device에서 문제가 있으니 Q를 선택할것

       설치가 끝나면 Q 옆에 Download 버튼이 사라지는데 OS버전이 29인지 확인후 Next 

      Finish를 누르면 설치 완료

4-4. Android Licenses 설치

더보기

1.
터미널에서 flutter doctor 입력후 엔터를 누르면

아래와같이 Android toolchanin 좌측에 [!] 표시가 되어있는데      
      flutter doctor --android-licenses
입력후 여러번의 라이센스 동의에 y를 입력하면됨

모든 동의가 완료되면 All SDK package licenses accepted 라고 뜹니다.

마지막으로 터미널에 flutter doctor 를 입력했을 때 아래와 같이 Android toolchain, Android Studio가 체크 완료되면 완료! 

 

4-5. Xcode 설치

더보기

1. 앱 스토어에서 Xcode 설치

2. CocoaPods 설치

      brew install cocoapods

      sudo gem install cocoapods

3. 설치확인

      flutter doctor

      전부 [v]표시 되어있으면 설치 성공

처음 brew로만 설치했을때에 비해 굉장히 복잡한방법으로 다시 설치했다.

지금 생각해보면 내가 안됐던 이유는 디렉토리 위치때문이 아니라 안된다고 저 단계를 여러번 해보느라 명령이 중첩되서 그랬던가 아닐까 싶다.

그래도 지금은 잘된다!

메데타시 메데타시

+ Recent posts