DartPad: 브라우저에서 Dart를 바로 실험해 보는 도구

DartPad는 브라우저에서 Dart 언어를 바로 실행해 보며 실험할 수 있게 해 주는 도구예요. 별도 설치 없이 웹 브라우저만 있으면 어디서든 Dart 코드를 작성하고 실행해서 결과를 확인할 수 있어요. 이 사이트의 많은 페이지에도 DartPad가 인라인으로 포함되어 있어요.

출처: DartPad

본문

DartPad는 어떤 최신 브라우저에서든 Dart 언어를 가지고 놀 수 있게 해 주는 오픈 소스 도구예요. 이 사이트의 많은 페이지에 DartPad가 내장되어 있고요. DartPad를 독립된 웹 페이지로 열고 싶다면 DartPad 사이트(dartpad.dev)를 방문하면 돼요.

DartPad가 Dart를 실행하도록 설정했을 때의 모습은 다음과 같아요.

라이브러리 지원

DartPad는 멀티 플랫폼으로 표시된 dart:* 핵심 라이브러리를 지원해요. Flutter 앱을 작성할 때는 DartPad가 package:flutter와 dart:ui 라이브러리도 지원해요.

DartPad는 지연 로딩(deferred loading)이나, 현재 지원 중인 패키지 외에 pub.dev 패키지 저장소에서 패키지를 가져오는 것은 지원하지 않아요.

시작하기

DartPad에 익숙해지려면 몇 가지 샘플을 실행해 보고 간단한 명령줄 앱을 만들어 보세요.

DartPad를 열고 샘플 실행하기

DartPad로 이동해요. 왼쪽에 Dart 코드가, 오른쪽에 결과가 표시되는 공간이 나타나요.
상단 메뉴의 Samples 버튼을 이용해서 Sunflower 같은 Flutter 샘플을 선택해요. 렌더링된 결과가 오른쪽에 나타나요.

명령줄 앱 만들기

간단한 명령줄 앱을 만들려면 새 스니펫을 만들어 시작해 보세요.

New 버튼을 클릭하고, 현재 패드의 변경 사항을 버리겠다는 확인을 해요.
Dart 로고가 있는 항목을 클릭해요.
코드를 바꿔 봐요. 예를 들어 main() 함수를 다음 코드를 포함하도록 변경해 보세요.

for (final char in 'hello'.split('')) {
  print(char);
}

입력하는 동안 DartPad는 힌트, 문서, 자동 완성 제안을 보여줘요.

Format 버튼을 클릭해요. DartPad는 Dart 포매터를 사용해서 코드의 들여쓰기, 공백, 줄 바꿈이 제대로 되도록 해 줘요.
앱을 실행해요.
코드를 입력하는 동안 실수로 버그가 없었다면, 일부러 버그를 하나 만들어 봐요. 예를 들어 split을 spit으로 바꾸면 창의 오른쪽 아래에 경고가 표시돼요. 앱을 실행하면 콘솔에 컴파일 오류가 나타나요.

Dart 버전 정보 확인하기

DartPad가 지원하는 언어 기능과 API는 DartPad가 현재 사용 중인 Dart SDK 버전에 따라 달라져요. 이 SDK 버전은 DartPad의 오른쪽 아래에서 확인할 수 있어요.

웹 페이지에 DartPad 내장하기

DartPad를 웹 페이지 안에 내장해서 여러분의 용도에 맞게 커스터마이즈할 수 있어요. 예를 들어 futures 튜토리얼에는 예시와 연습 문제로 표시된 여러 개의 내장 DartPad가 들어 있어요.

DartPad를 내장하는 기술적인 내용은 DartPad 내장 가이드에서 확인할 수 있어요.

DartPad: 브라우저에서 Dart를 바로 실험해 보는 도구