DartPad의 패키지 지원 발표
DartPad의 패키지 지원 발표
오늘은 DartPad에서 패키지를 지원하게 됐다는 기쁜 소식을 전할게요! DartPad는 오픈소스 웹 기반 플레이그라운드로, Dart와 Flutter 앱을 웹 브라우저에서 바로 실행해 볼 수 있어요. 로컬에 Flutter SDK나 도구를 설치하지 않고도 Dart 코드를 빠르게 실행해 아이디어를 테스트하거나 기술 개념을 구현해 볼 수 있게 해 주죠.
DartPad가 출시된 이후 가장 많이 들어온 요청 중 하나가 Google Fonts나 Firebase Authentication 같은 패키지를 DartPad 편집기에서 직접 import할 수 있게 해 달라는 거였어요. 이번 첫 단계에서는 인기 있는 패키지 세트를 import할 수 있답니다. 시작을 돕기 위해 DartPad의 Samples 메뉴에서 찾을 수 있는 새 예제도 여러 개 만들어 두었어요.
본문
Google Fonts 예제
패키지를 사용하려면 코드 편집기 맨 위에 그 패키지의 import 문을 추가하면 돼요. 예를 들어 Google Fonts 패키지를 쓰려면 이렇게 추가하면 되죠.
import 'package:google_fonts/google_fonts.dart';
DartPad가 pubspec 관련 세부 사항을 알아서 처리해 주거든요. 그래서 import 문만 있으면 돼요. IDE에서 하듯이 제안 완성(completion)을 사용해 폰트를 바꾸고 앱을 다시 실행할 수도 있어요.
패키지 지원이 동작하는 방식
DartPad에서 패키지 지원이 어떻게 동작하는지 간단히 설명할게요. DartPad 서버가 지원 패키지 세트를 가져와서 flutter pub get으로 각 패키지의 호환되는 최신 버전을 받아요. 그리고 서버는 이 패키지 버전들을 여러분이 작성한 DartPad 스크립트의 분석(analysis)과 컴파일(compilation)에 사용해요.
이번 릴리스는 가장 인기 있는 Firebase 패키지도 지원해요. 그래서 DartPad를 벗어나지 않고도 백엔드 서비스 묶음을 사용할 수 있죠. 필요한 Firebase JavaScript SDK는 컴파일된 앱을 실행하기 전에 출력 패널로 모두 로드돼요.
Firebase를 사용하는 간단한 채팅 앱도 예시로 준비했는데요. 이 다중 사용자 채팅 앱은 브라우저에서 실행(그리고 작성)되는 클라이언트 측 Dart 코드만으로 구현되어 있어요. 사용자 간에 메시지를 공유하는 데는 Firestore 데이터베이스를 사용하죠. 데이터베이스를 사용자에게 직접 열어 두는 게 위험해 보일 수도 있는데, 사실 굉장히 특정한 단어 집합만 사용하는 채팅 메시지만 허용하도록 보안을 걸어 두었어요. 정확히 어떻게 동작하는지 알고 싶다면 코드의 주석을 읽어 보세요.
채팅 앱을 확장하고 싶다면 Firebase Authentication을 추가해 로그인을 구현해서 누가 무슨 말을 했는지 식별할 수도 있어요. DartPad에서 쓸 수 있는 Firebase 기능을 계속 늘려 나갈 계획이에요.
지원되는 패키지
이번 1차 릴리스에서는 정의된 인기 패키지 세트를 지원해요. 어떤 패키지가(그리고 어떤 버전으로) 제공되는지 보려면 화면 오른쪽 아래에 있는 정보 아이콘을 클릭해 보세요.
직접 사용해 보세요!
오늘 바로 dartpad.dev에서 DartPad 패키지 지원을 사용해 보고, 팀에 피드백을 남겨 주세요. 시간이 지나면서 지원 패키지 목록을 계속 늘려 나갈 거예요. 추가됐으면 하는 패키지가 있다면 그 패키지 이름이 들어 있는 이슈를 검색해서 👍 "thumbs up" 반응을 달아 주세요. 원하는 패키지에 대한 이슈가 없다면 이슈를 새로 만들고 제목에 패키지 이름을 넣어 주시면 돼요.
DartPad의 패키지 지원이 여러분의 Flutter 디자인과 아이디어, 작은 작품(vignettes) 등을 만들고 선보이는 데 도움이 되길 바라요. 무엇을 만들어 주실지 정말 기대됩니다!
더 알아보기
- dartpad.dev에서 직접 사용해 보기
- DartPad Samples 메뉴에서 새 예제 둘러보기