[DartPad] 플러터 언어 다트를 웹에서 실행하기(다트 패드 알아보기)

블서 2024. 8. 3. 03:05

DartPad 사용법

1. 다트 패드란?

웹에서 플러터, 다트 코드를 작성하고 실행시킬 수 있는 웹서비스

2. 다트 패드 주요 기능
(1) 즉각적인 실행 및 테스트 가능
DartPad는 웹 기반의 코드 편집기이다. 별도의 설치 과정 없이 웹에서 바로 코드를 작성하고 실행해 볼 수 있다. 이는 특히 Dart 언어를 처음 접하는 사람들에게 매우 좋은 교육 환경이다.

(2) 코드 편집 기능과 자동 완성

DartPad는 자동 완성, 코드 포맷팅, 구문 강조와 같은 다양한 코드 편집 기능을 제공한다. 이 때문에 다트나 플러터 언어 작성에 있어 높은 생산성을 가지고, 코드 정렬기능이 있어 읽기 싫은 스파게티 코드를 예방할 수 있다.

(3) UI 미리보기

Flutter 위젯을 사용하는 경우, DartPad는 실시간으로 UI의 변화를 미리볼 수 있는 기능을 제공한다. 이는 UI 디자인 및 개발을 직관적이고 빠르게 테스트 할 수 있다. 그러나 다트 패드로만으로 Ul를 확인할 수 없는 경우도 생기기에 UI 디자인의 간단한 테스트로만 사용해야한다.

3. 다트 패드의 장점
(1) 언어 학습에 있어 매우 편리
웹에서 바로바로 코드를 작성하고 대기시간 없이 실행결과를 받아볼 수 있기에 학습에 있어 매우 좋다. 가끔 코드 공부한 내용을 되새길때 접속해서 복습하기에 정말 좋은 환경이다.

(2) 높은 접근성
웹 검색창에 다트 패드(DartPad)라고만 치면 바로 접속할 수 있으므로 환경을 조성할 필요가 없다. 매우 간단한 앱이나 웹을 제작할때도 활용하면 좋을 거 같다. 기존에는 코드 작성에 있어 환경을 조성하기 위해 많은 프로그램을 다운받아야하는 것에 비해 휠씬 편리하다.

3. 다트 패드 사이트
https://dartpad.dev/

DartPad

dartpad.dev

3. 다트 패드 사용법
먼저, 다트 패드 사이트에 접속한다. 별도의 설치 없이 사이트에 접속하여 즉시 사용할 수 있다.

다트 패드 사이트에 접속하면 나오는 첫화면이다.

New 버튼 - Dart / Flutter 선택

이후, 코드를 작성하고 Run 버튼을 눌러 코드를 실행하고 결과를 오른쪽 패널에서 확인할 수 있다.

다트 패드에는 다양하게 실행해보고 테스트 할 수 있는 예제들이 있다. Samples를 눌러보자.

다양한 Dart 예제와 플러터 예제 그외에도, 구글 ai와 game 예제들이 있다. 다양하게 활용해보자.