Dart로 웹 앱 만들기

Dart로 웹 앱 만들기

이 페이지는 Dart로 웹 전용 앱 개발을 시작하는 단계를 알려드릴게요. 여러 플랫폼을 지원하는 앱을 만들고 싶다면 Flutter를 써 보시는 것도 좋아요.

출처: Build a web app with Dart

본문

시작하기 전에, Introduction to Dart를 읽어서 Dart 기본기를 익혀 두시면 좋아요. 그다음 아래 단계를 따라 Dart로 작은 웹 앱을 만들어 볼게요.

1. Dart 설치하기

Dart 앱을 개발하려면 Dart SDK가 필요해요. 이 가이드를 계속하려면 Dart SDK를 직접 다운로드하거나, 전체 Dart SDK를 포함하는 Flutter를 설치해 주세요.

2. CLI 도구나 IDE 받기 (둘 다 가능)

커맨드라인을 좋아한다면 webdev 패키지를 설치해 주세요.

$ dart pub global activate webdev

IDE 사용은 선택 사항이지만, 사용하는 걸 강력히 추천해요. 사용 가능한 IDE 목록은 editors & debuggers 개요를 참고해 주세요.

3. 웹 앱 만들기

커맨드라인에서 웹 앱을 만들려면 dart create 명령을 web 템플릿과 함께 사용해요.

$ dart create -t web quickstart

Dart 통합이 있는 IDE에서 같은 웹 앱을 만들려면, Bare-bones Web App이라는 이름의 템플릿으로 프로젝트를 만들어 주세요.

웹 앱 템플릿은 package:web을 임포트해요. package:web은 현대 웹을 위해 만들어진 Dart의 강력하고 간결한 웹 상호 운용(interop) 솔루션이에요. 더 자세한 내용은 web interop 개요를 확인해 주세요.

4. 앱 실행하기

커맨드라인에서 앱을 실행하려면 webdev로 앱을 빌드하고 서빙해 주세요.

$ cd quickstart
$ webdev serve

또는 앱을 IDE에서 실행할 수 있어요.

앱을 보려면 Chrome 브라우저로 앱 URL, 예를 들어 localhost:8080에 접속해 주세요.

IDE를 쓰든 커맨드라인을 쓰든, webdev serve는 개발용 JavaScript 컴파일러로 앱을 빌드하고 서빙해요. 개발용 컴파일러가 앱을 처음 빌드하고 서빙할 때는 시작이 가장 느려요. 그 후에는 에셋이 디스크에 캐시되고 증분 빌드가 훨씬 빨라져요.

앱이 컴파일되면 브라우저에 "Your Dart app is running."이라고 표시될 거예요.

5. 앱에 커스텀 코드 추가하기

방금 만든 앱을 커스터마이즈해 볼게요.

  • 아래 스니펫의 thingsToDo() 함수를 web/main.dart 파일로 복사해 주세요.
Iterable<String> thingsToDo() sync* {
 const actions = ['Walk', 'Wash', 'Feed'];
 const pets = ['cats', 'dogs'];

 for (final action in actions) {
 for (final pet in pets) {
 if (pet != 'cats' || action == 'Feed') {
 yield '$action the $pet';
 }
 }
 }
}
  • 아래와 같이 newLI() 함수를 추가해 주세요. 이 함수는 지정된 String을 담는 새 LIElement를 만들어요.
Iterable<String> thingsToDo() sync* { /* ... */ }

web.HTMLLIElement newLI(String itemText) =>
 (web.document.createElement('li') as web.HTMLLIElement)
 ..textContent = itemText;

void main() { /* ... */ }
  • main() 함수에서 appendChild와 thingsToDo()의 값들을 사용해서 output 요소에 콘텐츠를 추가해 주세요.
Iterable<String> thingsToDo() sync* { /* ... */ }

web.HTMLLIElement newLI(String itemText) =>
 (web.document.createElement('li') as web.HTMLLIElement)
 ..textContent = itemText;

void main() {
 final output = web.document.querySelector('#output');
 for (final item in thingsToDo()) {
 output?.appendChild(newLI(item));
 }
}
  • 변경 사항을 저장하세요.
  • webdev 도구가 앱을 자동으로 다시 빌드해요. 앱의 브라우저 창을 새로고침하세요. 이제 간단한 Dart 앱에 할 일(todo) 목록이 생겼어요! 대략 이런 모습일 거예요.
  • 선택 사항으로, web/styles.css를 수정해서 포맷을 다듬은 뒤 앱을 다시 로드해 변경 사항을 확인해 주세요.
#output {
 padding: 20px;
 text-align: left;
}

6. Dart DevTools로 앱 검사하기

Dart DevTools로 브레이크포인트를 설정하고, 값과 타입을 보며, 앱의 Dart 코드를 단계별로 따라가 볼 수 있어요. 설정 방법과 자세한 과정은 Debugging Dart Web Apps를 참고해 주세요.

7. 웹 앱 빌드 및 배포하기

개발 환경 밖에서 웹 앱을 실행하려면 앱을 빌드하고 배포해야 해요. Dart 웹 앱 배포에 대해 더 알고 싶다면 Web deployment를 확인해 주세요.

다음은?

다음 리소스들을 살펴보세요.

  • Dart 언어, 라이브러리, 관례 — Language tour, Core library walkthrough, Effective Dart
  • 웹 개발 — JavaScript interoperability, Web libraries and packages, package:web overview, Introduction to the DOM

막히면 Community and support에서 도움을 찾아보세요.

더 알아보기