App

[Dart] Dart 시작하기 #1 (with. 노마드코더)

AllTheTech 2024. 5. 21. 13:00

[Dart] Dart 시작하기 #1 (with. 노마드코더)

프로젝트를 만들면서 Dart 관련 공부한 내용을 정리하고자 포스팅

https://nomadcoders.co/dart-for-beginners/

 

Dart 시작하기 – 노마드 코더 Nomad Coders

Flutter 앱 개발을 위한 Dart 배우기

nomadcoders.co

Dart 란

  • 모든 플랫폼에서 빠른 앱을 위한 클라이언트 최적화 언어(크로스 플랫폼)
  • Flutter 프레임워크를 사용하여 iOS, Android, 웹앱을 개발할 때 동일한 Dart 코드 사용
  • Dart 컴파일러에 의해 javascript로 변환되어 실행

Dart 컴파일러

AOT 컴파일러

시스템에 맞게 최적화된 바이너리를 생성하므로 컴파일에 많은 시간 소요. 최종 배포 시 사용

JIT 컴파일러

가상머신에서 동작. 느리지만 다양한 디버깅 옵션 지원. 개발 중에만 사용

웹 컴파일러

웹을 대상으로 하는 앱의 경우 Dart는 개발 또는 프로덕션 목적으로 컴파일할 수 있음. 웹 컴파일러는 Dart를 javascript로 변환

Dart 빠르게 시작하기(웹 에디터)

https://dartpad.dev/

 

DartPad

 

dartpad.dev

dart를 다운로드하지 않고 웹 에디터를 통해 쉽게 dart 코드를 작성, 테스트해볼 수 있다.

Dart 설치하기 (with. Flutter)

brew를 이용하여 아래 명령어를 입력해 줍니다.

flutter 설치

$ brew install --cask flutter

dart 설치

$ brew tap dart-lang/dart
$ brew install dart

dart 버전 확인

$ dart -v

flutter 설정

flutter doctor

초기에 에러 메시지가 많이 뜨는데, 로그를 보고 하나씩 해결해 나가면 된다. (cocoapods 설치, 안드로이드 스튜디오, xcode 설치 등)

Dart 프로젝트 생성

VSC을 실행하고, 폴더 하나를 생성한다. 그다음 아래 익스텐션을 설치한다.

Flutter 익스텐션을 설치하면 Dart관련 익스텐션이 종속적으로 설치된다.

그다음, Cmd+Shift+P 를 눌러 Dart: New Project > Console Application 선택

아래 Dart Project를 구성할 폴더를 선택

그럼 기본 프로젝트 구성이 완료된다.

bin > dart_application_1.dart에 프린트문을 실행하려면 코드 위 'Run'버튼을 선택한다.

💡저장 시 세미콜론 자동 삽입하기

더보기

설정 > Editor: Format On Save Mode > settings.json에서 편집 

아래 코드 삽입

  "editor.codeActionsOnSave": {
    "quickfix.insertSemicolon": "explicit"
  },
  "editor.formatOnSave": true

 

반응형