Dart 튜토리얼 34편: 에디터 & DartPad(IntelliJ·VS Code·DartPad·Troubleshoot)

Why#

NOTE

플러그인이 없으면 IDE가 Dart 문법/분석/실행을 제대로 지원하지 못합니다.
그리고 SDK 경로가 맞지 않으면 도구(dart, dartaotruntime)를 찾지 못합니다.

What#

NOTE

JetBrains IDE에서는 Dart 플러그인을 설치한 뒤, Dart SDK 경로를 설정하는 흐름이 제시됩니다.
SDK 경로는 bin과 lib 디렉터리를 포함하는 디렉터리라는 설명이 제시됩니다.

How#

TIP

플러그인 설치는 IDE의 Plugins에서 Dart를 검색해 설치하고, 재시작합니다.
새 프로젝트는 New Project → Dart에서 SDK 경로를 지정하고 템플릿을 선택하는 흐름이 제시됩니다.
기존 프로젝트는 Settings → Languages and Frameworks → Dart에서 “Enable Dart support”를 켜는 흐름이 제시됩니다.

Watch out#

WARNING

SDK 경로는 프로젝트마다 달라질 수 있고, Flutter SDK를 설치한 경우에도 Dart SDK가 포함된다는 안내가 있습니다.
즉, “어느 SDK를 설치했는지”부터 먼저 확인해야 합니다.

결론: JetBrains에서는 Dart 플러그인 설치와 SDK 경로 설정이 개발 환경의 핵심입니다.

Why#

NOTE

VS Code는 기본 상태에서는 Dart를 모릅니다.
확장(extension) 설치가 곧 언어 지원 활성화입니다.

What#

NOTE

VS Code에서는 Dart extension 설치로 문법 강조, 패키지 해석, hot reload 등 기능을 사용할 수 있다는 설명이 제시됩니다.

How#

TIP

Extensions에서 Dart를 검색해 Dart extension을 설치하는 절차가 제시됩니다.
또한 설치 후 기능 목록은 확장 설명 페이지에서 확인하는 흐름이 제시됩니다.

Watch out#

WARNING

확장 설치가 끝나도 SDK가 없으면 실행/분석이 되지 않습니다.
즉, 확장 설치 이후 “SDK 설치/경로 인식”까지 확인해야 합니다.

결론: VS Code는 Dart extension으로 시작하고, 그 다음 SDK 설치 상태를 확인합니다.

Why#

NOTE

설치 없이 브라우저에서 실행해볼 수 있으면, 학습 속도가 빨라집니다.
그래서 작은 실험/문법 확인은 DartPad가 유리합니다.

What#

NOTE

DartPad는 브라우저에서 Dart를 실행해볼 수 있는 오픈 소스 도구이며, 사이트의 튜토리얼에는 embedded DartPad가 포함될 수 있다는 설명이 제시됩니다.
또한 dart:* 중 multi-platform 라이브러리만 지원하고, pub.dev의 임의 패키지는 지원하지 않는 등 제약이 제시됩니다.

How#

TIP

새 패드에서 아주 작은 코드로 실행 흐름을 확인하는 예시가 제시됩니다.

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

또한 DartPad의 Format 버튼은 dart format을 사용해 들여쓰기/공백/줄바꿈을 정리해준다는 흐름이 제시됩니다.

Watch out#

WARNING

DartPad는 deferred loading을 지원하지 않고, 지원되지 않는 패키지를 임의로 import할 수 없습니다.
즉, “프로젝트 코드”는 결국 로컬 환경으로 옮겨서 pubspec.yaml로 의존성을 명시해야 합니다.

결론: DartPad는 빠른 실험에 최적이고, 프로젝트 개발은 로컬/IDE로 이어지는 역할 분리가 좋습니다.

Why#

NOTE

DartPad 문제는 코드 문제보다 브라우저/설정/확장 문제인 경우가 많습니다.
체크리스트로 원인을 좁히면 해결이 빠릅니다.

What#

NOTE

embedded DartPad가 안 뜰 때의 원인으로 브라우저 버전, 광고 차단기, 쿠키/로컬 스토리지 설정, GitHub rate limiting 등이 언급됩니다.
또한 일부 브라우저(예: Brave 기본 설정)에서 동작하지 않을 수 있다는 안내가 있습니다.

How#

TIP

다음 순서로 확인합니다.

1. 최신 브라우저(Chrome/Edge/Firefox/Safari)인지 확인한다.
2. 광고 차단기를 끈다.
3. 쿠키가 꺼져 있다면 dartpad.dev(및 임베딩 사이트) 쿠키 허용을 확인한다.
4. 페이지를 반복 리로드했다면 GitHub rate limiting 가능성을 고려해 시간을 두고 다시 시도한다.

Watch out#

WARNING

쿠키가 꺼져 있으면 로컬 스토리지도 함께 제한되는 경우가 있고, DartPad는 쿠키를 쓰지 않아도 로컬 스토리지를 의존할 수 있다는 설명이 있습니다.
즉, “쿠키 꺼도 괜찮다”는 직감이 항상 맞지는 않습니다.

결론: DartPad 문제는 브라우저/차단기/쿠키/리밋 체크리스트로 빠르게 좁힐 수 있습니다.