Dart 맛보기: DartPad를 사용해 출력문부터 함수까지의 내용 복습하기

  • 8 minutes to read

프로그래밍 학습은 일반적으로 하나의 프로젝트를 생성하고 그 안에서 소스 코드를 작성하고 실행하는 과정을 통해 이루어집니다. 하지만 이러한 방식은 처음 언어를 배우는 단계에서는 다소 번거로울 수 있습니다.

DartPad를 사용하면 별도의 개발 환경을 설치하지 않고도 웹 브라우저에서 바로 Dart 코드를 실행하며 학습할 수 있습니다.

DartPad는 Dart 언어의 기능을 빠르게 실험하고 학습할 수 있는 최고의 도구 중 하나입니다.

이번 장에서는 DartPad를 사용하여 출력문부터 함수까지 Dart의 기본 문법을 빠르게 복습하는 방법을 알아보겠습니다.

// DartPad를 사용하여 출력문부터 함수까지의 전체 내용 복습
NOTE

이 문서의 내용은 C 언어 또는 파이썬에 대한 기초 문법에 대한 한 학기 이상을 학습한 학생 개발자를 대상으로 합니다.


Dart 대화형 환경(DartPad)

이미 우리는 DartPad를 통해 Dart 코드를 실행할 수 있습니다. 이제 DartPad에 대해 조금 더 자세히 알아보겠습니다.

DartPad는 웹 브라우저에서 실행되는 Dart 코드 실행 환경입니다.

DartPad는 다음 주소에서 사용할 수 있습니다.

https://dartpad.dev

DartPad를 사용하면 다음과 같은 특징이 있습니다.

  • 별도의 설치 없이 브라우저에서 Dart 코드 실행 가능
  • Dart 문법을 빠르게 테스트 가능
  • Flutter 코드도 실행 가능
  • 콘솔 출력 확인 가능

DartPad는 일반적으로 REPL(Read Eval Print Loop) 방식의 학습 환경과 비슷한 역할을 합니다.

즉,

  1. 코드를 작성하고
  2. 실행하면
  3. 결과를 바로 확인할 수 있습니다.

DartPad 화면 구성

DartPad는 다음과 같은 영역으로 구성됩니다.

  1. 코드 입력 영역
  2. 실행 버튼 (Run)
  3. 콘솔 출력 영역
  4. 코드 포맷 및 공유 기능

그림: DartPad

+----------------------------+
| Dart 코드 작성 영역       |
|                            |
| void main() {              |
|   print("Hello Dart");     |
| }                          |
+----------------------------+
| Run 버튼                   |
+----------------------------+
| Console 출력 영역          |
+----------------------------+

DartPad의 기본 실행 구조

Dart 프로그램은 항상 main() 함수에서 시작합니다.

void main() {
  print("Hello Dart");
}

Run 버튼을 누르면 콘솔에 다음과 같이 출력됩니다.

Hello Dart

[실습] DartPad 사용하기

소개

지금까지 배운 프로그래밍의 기초 문법을 DartPad를 사용하여 정리해 보겠습니다.


따라하기 0: DartPad 실행하기

1️⃣ 브라우저에서 다음 사이트 접속

https://dartpad.dev

2️⃣ 기본 코드 확인

DartPad에는 기본적으로 다음 코드가 작성되어 있습니다.

void main() {
  print('Hello, DartPad!');
}

3️⃣ Run 버튼 클릭

출력 결과

Hello, DartPad!

따라하기 1: 출력문

Dart에서 출력은 print() 함수를 사용합니다.

void main() {
  print("Hello Dart");
}

출력

Hello Dart

문자열뿐 아니라 숫자도 출력할 수 있습니다.

void main() {
  print(100);
}

출력

100

여러 값을 출력할 수도 있습니다.

void main() {
  print("Dart");
  print("Flutter");
}

출력

Dart
Flutter

문자열 안에 변수 값을 넣을 수도 있습니다.

void main() {
  var name = "Dart";
  print("Hello $name");
}

출력

Hello Dart

이 기능을 **문자열 보간(String Interpolation)**이라고 합니다.


따라하기 2: 변수

Dart에서는 변수 선언 시 여러 가지 방식이 있습니다.

var 사용

void main() {
  var number = 100;
  print(number);
}

출력

100

타입 명시

void main() {
  int age = 20;
  print(age);
}

문자열 변수

void main() {
  String message = "Hello Dart";
  print(message);
}

final 변수

값을 한 번만 할당할 수 있습니다.

void main() {
  final pi = 3.14;
  print(pi);
}

const 변수

컴파일 시점 상수입니다.

void main() {
  const gravity = 9.8;
  print(gravity);
}

따라하기 3: 연산자

Dart는 다양한 연산자를 제공합니다.

산술 연산

void main() {
  print(3 + 5);
}

출력

8

void main() {
  print(10 * 2);
}

출력

20

나머지 연산

void main() {
  print(10 % 3);
}

출력

1

조건 연산자

void main() {
  int number = 10;

  var result = number % 2 == 0 ? "Even" : "Odd";

  print(result);
}

출력

Even

따라하기 4: 제어문

if 문

void main() {
  int score = 85;

  if (score >= 80) {
    print("Pass");
  }
}

if else

void main() {
  int score = 70;

  if (score >= 80) {
    print("Pass");
  } else {
    print("Fail");
  }
}

for 반복문

void main() {
  for (int i = 0; i < 3; i++) {
    print(i);
  }
}

출력

0
1
2

실습 예제

1부터 100까지 숫자 중에서 3의 배수 또는 4의 배수의 합

void main() {
  int sum = 0;

  for (int i = 1; i <= 100; i++) {
    if (i % 3 == 0 || i % 4 == 0) {
      sum += i;
    }
  }

  print(sum);
}

따라하기 5: 리스트(List)

Dart에서 배열은 List를 사용합니다.

void main() {
  var numbers = [10, 20, 30];

  print(numbers[0]);
}

출력

10

반복문으로 출력

void main() {
  var colors = ["Red", "Green", "Blue"];

  for (var color in colors) {
    print(color);
  }
}

출력

Red
Green
Blue

리스트 길이

void main() {
  var numbers = [1, 2, 3, 4];

  print(numbers.length);
}

출력

4

따라하기 6: 함수

Dart에서도 함수를 직접 만들 수 있습니다.

함수 선언

void sayHello() {
  print("Hello");
}

함수 호출

void sayHello() {
  print("Hello");
}

void main() {
  sayHello();
}

출력

Hello

매개변수 있는 함수

void greet(String name) {
  print("Hello $name");
}

void main() {
  greet("Dart");
}

반환값 있는 함수

int add(int a, int b) {
  return a + b;
}

void main() {
  print(add(3, 5));
}

출력

8

화살표 함수

Dart에서는 간단한 함수는 다음과 같이 작성할 수 있습니다.

int add(int a, int b) => a + b;

DartPad에서 Flutter 코드 실행

DartPad에서는 Flutter 코드도 실행할 수 있습니다.

상단에서 Flutter 모드를 선택하면 Flutter UI 코드도 실행 가능합니다.

예시

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Demo')),
        body: Center(
          child: Text('Hello Flutter'),
        ),
      ),
    ),
  );
}

DartPad의 장점

DartPad를 사용하면 다음과 같은 장점이 있습니다.

1️⃣ 개발 환경 설치 필요 없음 2️⃣ Dart 코드 바로 실행 가능 3️⃣ Flutter UI 실습 가능 4️⃣ 코드 공유 가능 5️⃣ 학습 속도가 매우 빠름


장 요약

DartPad를 사용하면 프로젝트를 생성하지 않고도 Dart 언어의 기능을 빠르게 테스트할 수 있습니다.

특히 Flutter를 배우기 전 Dart 문법을 빠르게 익히는 도구로 매우 유용합니다.

앞으로 Flutter 앱을 개발할 때에도 DartPad를 활용하여

  • Dart 문법 테스트
  • 알고리즘 실습
  • 코드 실험

등을 빠르게 수행할 수 있습니다.

더 깊이 공부하고 싶다면
DevLec에서는 실무 중심의 C#, .NET, ASP.NET Core, Blazor, 데이터 액세스 강좌를 단계별로 제공합니다. 현재 수강 가능한 강좌 외에도 더 많은 과정이 준비되어 있습니다.
DevLec.com에서 자세한 커리큘럼을 확인해 보세요.
DevLec 공식 강의
C# Programming
C# 프로그래밍 입문
프로그래밍을 처음 시작하는 입문자를 위한 C# 기본기 완성 과정입니다.
ASP.NET Core 10.0
ASP.NET Core 10.0 시작하기 MVC Fundamentals Part 1 MVC Fundamentals Part 2
웹 애플리케이션의 구조와 MVC 패턴을 ASP.NET Core로 실습하며 익힐 수 있습니다.
Blazor Server
풀스택 웹개발자 과정 Part 1 풀스택 웹개발자 과정 Part 2 풀스택 웹개발자 과정 Part 3
실무에서 바로 활용 가능한 Blazor Server 기반 관리자·포털 프로젝트를 만들어 봅니다.
Data & APIs
Entity Framework Core 시작하기 ADO.NET Fundamentals Blazor Server Fundamentals Minimal APIs
데이터 액세스와 Web API를 함께 이해하면 실무 .NET 백엔드 개발에 큰 도움이 됩니다.
VisualAcademy Docs의 모든 콘텐츠, 이미지, 동영상의 저작권은 박용준에게 있습니다. 저작권법에 의해 보호를 받는 저작물이므로 무단 전재와 복제를 금합니다. 사이트의 콘텐츠를 복제하여 블로그, 웹사이트 등에 게시할 수 없습니다. 단, 링크와 SNS 공유, Youtube 동영상 공유는 허용합니다. www.VisualAcademy.com
박용준 강사의 모든 동영상 강의는 데브렉에서 독점으로 제공됩니다. www.devlec.com