< Web 개발 – Development Environment >
WebDev는 Dart로 Web 어플리케이션을 만들고 실행하는 CLI 도구입니다. 오픈소스 코드는 GitHub( https://github.com/dart-lang/webdev )에 공개 되어 있습니다. Dart와 Flutter로 개발된 패키지 소프트웨어들을 관리하는 pub.dev( https://pub.dev/packages/webdev )를 통해서도 확인이 가능합니다.
WebDev는 pub 명령을 통해서 설치가 이루어 집니다. Pub는 Dart/Flutter의 패키지 소프트웨어를 다루는 명령으로, (이 tutorial을 진행해 온 경우는) Dart SDK와 Flutter SDK를 설치하였기에, 이미 컴퓨터에 설치되어 있을 겁니다. 실행여부를 Teminal에서 pub를 실행하여 확인 바랍니다. Pub 명령에 대한 자세한 설명은 Dart 공식 홈페이지의 The pub tool 사이트( https://dart.dev/tools/pub/cmd )를 통해서 확인할 수 있습니다.
참고로 Dart SDK에 추가로 Flutter SDK가 설치된 경우는 “pub …” 명령의 수행이 아닌 “flutter pub …” 명령을 수행하도록 Dart 공식 홈페이지( https://dart.dev/tools/pub/cmd )에서 강조하고 있습니다.
설치는 간단합니다. 사실 설치가 아니고 활성화가 맞는 표현인데, 위에서 언급한 WebDev의 GitHub 혹은 pub.dev 사이트의 가이드라인에 맞춰서 install을 합니다. 아마도 다음과 같은 명령어 한 줄이 있을 겁니다. 실행 후 화면의 메시지에 따라서, 운영체제의 path 설정 등을 요구할 수 있으니, 이 부분까지 마치면 됩니다. 실행하는 부분에 대해서는 추후 설명하도록 합니다.
flutter pub global activate webdev
다음으로 설치할 도구는 Stagehand 입니다. 일명 “Dart project generator” 입니다. 앞서 MS Visual Code에서 처음 만드는 Flutter 프로젝트를 생성하면, 개발자가 집중해야 하는 부분 외의 화일들을 자동으로 만들어 줬습니다. Stagehand는 Web을 개발하기 위하여 필요한 화일들(template)을 자동으로 만들어 주는 역할을 수행하는 CLI 프로그램 입니다. Stagehand의 소스 코드는 GitHub( https://github.com/dart-lang/stagehand )에서 확인 가능합니다. 그리고 WebDev와 마찬가지로 pub.dev 사이트( https://pub.dev/packages/stagehand )에서 관리를 하는 패키지 입니다.
설치는 pub 명령으로 WebDev 처럼 간단하게 이루어 지며, 아래의 명령을 실행하면 됩니다. WebDev와 마찬가지로 실행하는 부분에 대해서는 추후 설명하도록 합니다.
flutter pub global activate stagehand
Stagehand는 다양한 유형의 Web 어플리케이션에 대한 template을 지원하는데, 다음과 같습니다.
- console-simple – 간단한 CLI 어플리케이션
- console-full – CLI 어플리케이션 예제
- package-simple – Dart 라이브러리 혹은 어플리케이션
- server-shelf – Shelf 패키지 기반 Web Server
- web-angular – Material 디자인 컴퍼넌트 기반 Web 어플리케이션
- web-simple – Dart의 코어 라이브러리 기반 Web 어플리케이션
- web-stagexl – 2D 애니메이션과 게임을 위한 Web 어플리케이션
이제 WebDev와 Stagehand가 제대로 설치되었는지, 확인해 보도록 하겠습니다. 먼저, 작업을 수행할 디렉토리로 이동한 후, 아래의 명령을 순차적으로 실행합니다.
stagehand web-simple
pub get
webdev serve
첫번째와 두번째 명령의 실행시 화면에 에러 메시지가 나오면, 이를 해결하기 위한 작업을 수행하기 바랍니다.
세번째 명령을 수행하면, [그림 1]과 같이 화면 출력이 이루어지고, 프로그램이 멈춰있는 것처럼 보입니다. 프로그램은 정상적으로 수행하고 있는 것이며, 앞서 Stagehand로 만든 예제 Web 사이트를 WebDev 명령이 실행하고 있는 상태입니다. 이때, 별도의 웹 브라우저를 구동하여, WebDev가 구동중인 웹 서버에 접속해 봅니다. 웹 브라우저에서 접속할 웹 주소는 [그림 1]의 세번째 줄에 있는 http://127.0.0.1:8080 입니다.
웹 브라우저에서 [그림 2]와 같이 화면이 나타나면, 두개의 프로그램은 성공적으로 설치된 것 입니다.
실행 중인 웹 서버를 멈추고 싶으면, WebDev를 실행한 터미날에서 Ctrl-c를 타이핑 하면 됩니다.
무슨 일이 이루어 진 건가요? 사실 매우 간단합니다. 먼저, 작업 중인 디렉토리의 화일들 중 /web 서브 디렉토리로 이동합니다. 그리고 화일들을 보면, 4개의 화일이 있습니다. 우리가 선택한 옵션은 web-simple 입니다. 즉, Dart 언어로 만든 웹사이트 입니다. 따라서 main.dart 화일이 있으며, 열어보면 HTML 화일의 #output 식별자 부분의 문장(.text)을 “Your Dart app is running.”으로 바꾸라는 실행 구문이 있습니다. 그리고 Dart의 코어 문법만 사용하므로, import 되는 패키지는 dart:html 입니다. 혹시 JavaScript를 다룰줄 아는 개발자라면, 이 화일이 기존 JavaScript 화일을 대체하는 용도입니다. 그리고 웹 사이트의 가장 기초가 되는 index.html 메일 페이지가 있습니다. 열어보면, body 부분에 #output 식별자 하나만 정의하고, 내용은 빈칸임을 볼 수 있습니다. 그리고 head의 script에 main.dart.js를 포함하도록 되어 있습니다. 여기서 .js는 JavaScript를 의미하며, 추후 이에 대한 설명이 있을 겁니다. 마지막으로 기본 모양을 정의하는 css 화일이 있습니다. 그리고 웹 브라우저의 tab에서 이 사이트를 표현할 아이콘인 favicon이 있습니다.
Stagehand는 이렇게 웹 사이트의 가장 기초가 되는 화일들을 요구한 template에 맞춰서 만들어 줍니다. WebDev는 이렇게 만들어진 컨텐츠를 토대로 웹 서버를 구동하는 프로그램 입니다. 외부로 부터의 HTTP 요청을 받아 컨텐츠를 제공하는 기능을 제공합니다. WebDev가 있어서, 만든 콘텐츠를 별도의 웹서버 프로그램을 사용하지 않아도 편하게 실행해 볼 수 있습니다.
/web 디렉토리를 나와서 새로 만든 프로젝트의 root 디렉토리로 오면, 확장자가 .md인 화일들이 있으면, 이들은 Stagehand로 만든 화일이라는 태그와 라이센스, 그리고 변경 로그 등을 저장합니다. 그외의 .yaml과 .lock 화일은, 우리가 새롭게 만든 화일을 실행하기 위하여 필요한 프로그램들과 환경설정 등에 대한 내용을 포함합니다.
마무리
이번 글에서 Dart와 Flutter로 Web을 구현하기 위한 개발 환경은 마쳤습니다. 이제 Web 어플리케이션을 어떻게 Dart와 Flutter를 통해서 개발하는지 하나 하나 알아보도록 하겠습니다.
Creative Commons License (CC BY-NC-ND)