* 전체 링크
What did you get?
Unzip the file. The resulting directory, your Dart installation directory, contains the following:
Dart Editor is a powerful, lightweight, open source editor. With it you can create and edit files, manage the files and directories for your project, look up APIs, debug your code, and control runtime conditions using named launches.
다트 에디터는 강력하고 가볍고 오픈 소스 에디터 입니다. 에디터를 사용하여 파일을 편집하고 생성하고 당신의 프로젝트의 파일과 디렉토리들을 관리할수 있고, APIs를 보고 코드를 디버그하고 명시된 런쳐를 사용하여 실행상태를 제어할 수 있습니다.
This is a special build of the Chromium web browser, called Dartium, that has the Dart VM (virtual machine) embedded. You can run your apps directly in this browser, or use Dart Editor to do it for you, thereby streamlining the build-test cycle.
이 브라우저는 dartium이라고 불리는, DART VM(가상 머신)을 탑재하고 있는 Chromium 웹브라우저의 특별한 빌드입니다. 당신은 브라우저에서 바로 앱을 실행시킬수도 있고, 또는 빌드 테스트 간소화를 위해 다트 에디터를 사용할 수도 있다.
The dart-sdk directory contains the Dart software development kit. Here you will find Dart libraries, such as dart:core and dart:html, that define APIs useful to all apps. Within, the bin directory contains several useful command-line tools, such as the Dart-to-JavaScript compiler, and the command-line version of the Dart VM.
dart-sdk 디렉토리에는 DART 소프트웨어 개발 킷을 포함하고 있다. 당신은, dart:core와 dart:html과 같은, 모든 앱에 유용하게 쓰일수 있는 API들이 정의 되어 있는 Dart 라이브러리들을 찾을 수있다.bin 디렉토리 안에는 Dart-to-Javascript 컴파일러와 Dart VM의 command-line 버전같은 몇개의 유용한 command-line 도구들이 있다.
The samples directory contains the complete source code for several Dart web applications. You can experiment with these examples in Dart Editor.
샘플 디렉토리에는 몇개의 Dart 웹 어플리케이션의 완전한 소스 코드가 있다. 당신은 다트 에디터를 사용하여 이러한 샘플들을 가지고 실험을 할 수 있다.
You might notice some other directories in the Dart installation directory. You can ignore them for now.
당신은 다른 몇 개의 디렉토리가 있늘 것을 볼 수 있지만 지금은 무시해도 괜찮다.
Start Dart Editor
Invoke Dart Editor by double-clicking its icon in your Dart installation directory 
설치된 다트 디렉토리에서 해당 그림의 아이콘을 더블 클릭하여 실행하세요.
Dart Editor displays its Welcome Page in a tab in the Editor pane. The following diagram highlights some of the features of the editor.
다트 에디터는 편집창 탭에서 welcome 페이지가 나옵니다. 아래의 그림은 편집창의 중요한 부분들을 표시해 놓았습니다.
Send feedback button
Allows you to share bugs and requests directly with the Dart Editor team as well as the larger Dart team
당신은 다트 편집 팀 뿐만 아니라 더 큰 다트 팀에 직접 버그와 요구를 공유 할 수 있습니다..
Search field
Searches every file in your Files view for the entered text. Results for text searches are displayed in a Search view. Within that view, double-click a file to see it in the Editor pane. All occurrences of the search string in the Editor pane are highlighted.
입력 된 텍스트로 파일뷰에서 모든 파일을 검색합니다. 텍스트 검색에 대한 결과는 검색뷰에 표시됩니다. 해당 뷰 내에서 그 파일을 보고 싶다면 더블 클릭을 하세요..편집기 창에서 검샘된 문자열은 강조 표시됩니다.
(이클립스에서 shift+r 과 같은 기능인것으로 보임.)
Run button
Runs the application associated with the file that is currently selected in the Files view.
현재 파일뷰에서 선택된 파일과 연결된 응용 프로그램을 실행합니다.
New application button
Creates a directory and, within it, the files for a new application. Alternatively, you can use the File > New Application menu item or the Create an application button on the Welcome page.
디렉토리를 만들고 만들어진 그 디텍토리안에 새로운 어플리케이션을 위한 파일들을 생성합니다.
다른 방법으로, File > New Application 메뉴를 사용할 수도 있고 또는 welcome page안에 있는 Create an application 버튼을 사용할 수도 있습니다.
Files view
Shows a hierarchical view of your Dart applications and their associated files. Double-click a file in the Files view to see its contents in the Editor pane. If you single-click a file in the Files view, the file is selected, but not necessarily displayed in the Editor pane. You must double-click the file.
파일 뷰는 Dart 어플리케이션과 그것들과 연관된 파일들의 계층구조를 보여줍니다. 에디터 창에서 내용을 보려면 해당 파일을 더블 클릭하세요. 한번만 클릭하면 단지 해당 파일이 선택만 되어질 뿐입니다. 에디터 창에서 볼 필요가 없을때는 그렇게 하세요.
Editor pane
Provides the basic editing functionality you’d expect, plus features such as Dart code completion, API browsing, and support for refactoring. The first time you use Dart Editor, it shows the Welcome Page in the Editor pane, which provides quick access to Dart resources and some nifty samples. The Welcome Page is also available under theTools menu.
에디터 창은 기본적인 편집 기능에 다가, Dart 코드 완성기능, API 브라우징, 그리고 리팩토링에 대한 지원 등을 제공합니다. 당신이 Dart 에디터를 처음 사용할 때, Dart 리소스와 깔삼한 예제들에 빠르게 접근할 수 있는 Welcome 페이지를 보여줍니다.
Problems pane
Displays warning and error messages.
경과와 에러 메시지를 보여줍니다.
Problems? See Troubleshooting Dart Editor.
About Dart applications
At minimum, a Dart application has
최소한 다트 어플리케이션은
one Dart source file—a file with the .dart suffix that contains Dart code
1 개의 Dart 소스 파일(Dart 코드를 포함하는 접미사 .dart를 가지고 있는 파일)을 가진다.one top-level main() function. This is the entry point for your application.
1 개의 top-level main 함수를 가진다. 이것은 당신의 어플리케이션의 진입점입니다.
There are two kinds of Dart applications: command-line applications and web applications. A command-line application is a standalone program that you run in the Dart VM from the command-line in a terminal window. Web applications are hosted on a web page and run in a browser (either directly in a browser that supports Dart or by compiling to JavaScript).
2 종류의 Dart 어플리케이션이 있습니다: command-line 어플리케이션과 웹 어플리케이션. command-line 어플리케이션은 터미널 창의 명령 줄로 다트 VM에서 실행되는 독립 실행 형 프로그램입니다. 웹 어플리케이션은 웹 페이지에 호스팅 되어지고 브라우저(직접적으로 Dart를 지원하는 브라우저나 Dart 코드를 자바스크립트로 컴파일하여 실행할수 있는 브라우저)에서 실행이 됩니다.
Command-line applications
command-line 어플리케이션
Dart command-line applications run standalone from the command-line, independent of a web browser. Command-line apps are often used to provide server-side support to a web app, but they can also be scripts.
Dart command-line(명령줄 실행) 어플리케이션은 명령줄에 의해 독립적으로, 웹 브라우저의 독립, 실행이 됩니다.
The Dart VM runs Dart code directly without intermediate compilation.
Dart VM(가상머신)은 Dart 코드를 중간 컴파일 없이 바로 실행합니다.
Conveniently, you can run command-line apps directly in Dart Editor with the click of the Run button 
간편하게, 당신은 Dart 에디터에서 실행버튼
Web applications
Dart web applications run inside of a browser page. In addition to a Dart file, a web app requires an HTML file to host the app. Often, a web app provides the client-side user interface for a server.
Dart 웹 어플리케이션은 브라우저 페이지에서 실행이 됩니다. Dart 파일뿐만 아니라, 웹 응용 프로그램은 응용 프로그램을 호스팅할 HTML 파일이 필요합니다. 종종, 웹 애플리케이션은 서버에 대한 클라이언트 측 사용자 인터페이스를 제공합니다.
You can run your Dart web app from Dart Editor by clicking the Run button 
당신은 Dart 실행버튼인
If you want to see your web app in a browser that does not yet support Dart, you can compile your Dart code to JavaScript using the Dart-to-JavaScript compiler, which is in the dart-sdk/bin directory in your Dart installation directory. You then load the resulting JavaScript file into your browser of choice. Dart Editor provides a convenient menu option for running web apps as JavaScript.
만약에 아직 Dart를 지원하지 않는 브라우저에서 당신의 웹 어플리케이션(이하 앱)을 실행하고
싶다면 당신의 Dart 코드를 자바스크립트로 컴파일해야 합니다. 변화툴은 dart-skd/bin 디렉토리 안에 있습니다.그 다음에 실행할 브라우저 안에 변환된 자바스크립트를 로드합니다. Dart 에디터는 자바스크립트로 실행할 웹 앱의 편리한 메뉴 옵션을 제공합니다.
The rest of this tutorial steps you through creating and running first a command-line application and then a web application.
이 튜토리얼의 나머지 부분에서는 먼저 명령줄 어플리케이션을 만들고 실행하는 방법을 안 다음에 웹 앱을 만들고 실행하는 단계로 이어집니다.
Create a command-line app
In Dart Editor, choose File->New Application from the menu or click the New Application button 
Dart 에디터의 메뉴에서 File->New Application를 선택하거나 새로운 앱 버튼 아이콘인
Type helloworld in the Application Name text field. By convention, application names are lowercase. This name is used for the app’s directory and the basename for the files it creates.
어플리케이션 텍스트 필드에 hellowrold라고 입력하세요. 규칙에 따라, 어플리케이션 이름은 소문자입니다. 이 이름은 어플의 디렉토리 이름과 생성되는 파일의 기본 이름으로 사용되어집니다.Type or browse to the directory where you want to save the files. By default, Dart Editor creates a new directory named dart in your home directory.
저장할 디렉토리로 이동하세요. 기본적으로 Dart 에디터는 당신의 홈 디렉토리에 dart 라고 하는 새로운 디렉토리를 만듭니다. (이클립스의 workspace 와 동일함)Select Generate sample content. Dart Editor generates sample code appropriate for the type of application you are creating. For a command-line application, the sample code implements the standard ‘Hello World’ program.
Generate sample content를 선택하세요..Dart 에디터는 당신이 선택한 어플리케이션의 타입에 맞는 적당한 샘플 코드를 생성합니다. command-line 앱을 예를 들면, 이 샘플 코드는 ‘Hello World’ 프로그램을 구현합니다.Select Command-line application from the list.
리스트에서 command-line application을 선택하세요.Click Finish.
finish 를 클릭하세요.
Dart Editor creates a directory for the application and boilerplate files for a small command-line app. The Files view displays the file hierarchy for the application.
Dart 에디터는 앱을 위한 디렉토리를 만들고 작은 command-line 앱을 위한 상용구(정해진) 파일들을 만듭니다. 파일 뷰는 해당 앱의 계층적 구조를 보여줍니다.
Some of the files and directories in the helloworld application include the following:
helloworld 프로젝트안에 있는 몇개의 파일과 디렉토리는 아래와 같습니다.
helloworld
Contains boilerplate files and directories for a simple command-line app.
간단한 command-line앱을 위한 상용구 파일과 디렉토리를 포함합니다.
pubspec.yaml
Declares which libraries your application needs. The packages directories contain those libraries. The pubspec.lock file specifies the version numbers of the libraries on which the application depends.
pubspec.yaml 설정파일은 앱에 필요한 라이브러리들은 선업합니다. packages 디렉토리에는 pubspec.yaml에 선언된 라이브러리들이 들어있습니다. pubspec.lock 파일은 앱이 의존하는 라이브러리들의 버전을 지정합니다.
bin
Contains the source files for the application. The main source file for this example is helloworld.dart.
bin에는 앱의 소스 파일을 포함합니다. 이 예제의 메인 소스는 helloworld.dart 입니다.
helloworld.dart
Contains the Dart source code for this app.
helloworld.dart는 이 앱의 Dart 소스코드입니다.
The Editor pane shows the contents of helloworld.dart. The program prints ‘Hello, World!’ to the standard output stream using the print() function, which is provided by the dart:core library. The functions and objects defined in the core library are automatically available to all Dart applications.
에디터 창(Editor pane)은 helloworld.dart의 내용을 보여줍니다.
이 프로그램은 dart:core 라이브러리에서 제공하는 print()함수를 사용하여 ‘표준 ouput stream에 Hel lo, WorldB’라는 텍스트를 보여줍니다.
Run a command-line app
To run the helloworld app from Dart Editor:
Dart 에디터에서 helloworld 앱을 실하하기 위해서
Select the helloworld.dart file in the Files view.
파일 뷰에서 helloworld.dart를 선택하세요.Click the Run button
.
실행버튼을 클릭하세요.
Dart Editor opens a new panel, called the Output view, and displays the output of the helloworld app.
Dart 에디터는 새로운 창을 열고 Output view를 호출하고 helloworld 앱을 output에 보여줍ㄴ다.
Create a web app
Now let’s create a web application. As you did when creating a command-line application, click the New Applicationbutton 
이제 웹 앱을 만들어봅니다. command-line 앱을 만든것처럼 new Application 버튼
Dart Editor creates the directory and files needed for a boilerplate web application.
Dart 에디터는 상용구(템플릿) 웹 어플리케이션에 필요한 파일과 디렉토리를 만듭니다.
As before, the directory is named after your application. So is the Dart source file that contains
the main() function. In addition, Dart Editor creates an HTML file that hosts the app.
이전과 같이, 디렉토리는 응용 프로그램의 이름을 따서 명명됩니다. main() 함수를 포함하는 Dart 소스 파일입니다. 게다가 Dart 에디터는 앱에 호스트할 Html 파일또한 만듭니다.
The main() function in the clickme app contains Dart code that puts text on the browser page and registers an event handler—a function that responds to user-generated events like a mouse click. This code uses API defined in the dart:html library.
“clickme” 앱의 main() 함수는 브라우저 페이지에 텍스트를 표시하고 이벤트 핸들러를 등록합니다. 이벤트 헨들러란 마우스 클릭 같은 사용자에 의해 발생하는 이벤트에 반응하도록 되어 있는 함수 입니다. 해당 코드는 dart:html 라이브러리에 정의되어 있는 API를 사용합니다.
In the next tutorial, you will build a mini app from scratch, creating the Dart source, the HTML source, and the CSS source yourself. Afterward, you can re-visit the code for clickme.
다음 튜토리얼에서는 , HTML 소스와 CSS 소스를 직접 만들어 처음부터 미니 응용 프로그램을 구축 할 것입니다. 그 후, 당신은 clickme에 대한 코드를 다시 검토할 수 있습니다
Run a web app
웹 앱 실행하기
To run the clickme app from Dart Editor:
Dart 에디터에서 “clickme” 앱을 실행하기 위해서는
Select clickme.html.
clickme.html을 선택합니다.Click the Run button
.
실행 버튼을 클릭합니다.
Dart Editor invokes Dartium providing it with the URL for the clickme app’s HTML file. Dartium loads the clickme app’s HTML file and the embedded app, which looks like this:
Dart 에디터는 clickme 앱의 html 파일에 접근하기 위한 URL을 제공하는 Dartium(브라우저)를 실행합니다.Dartium은 clickme앱의 html 파일과 탑재된 앱을 로드합니다. 아래의 그림에서 확인가능합니다.(실행가능한 원본 화면은 Dart 공식 튜토리얼 화면에서 확인할 수 있습니다.)
Run as JavaScript
자바스크립트로 실행하기.
You can run Dart web applications in other browsers by compiling to JavaScript. Dart Editor provides a convenient menu option for doing so. Right click on clickme.html and select Run as JavaScript from the menu.
Dartium 브라우저가 아닌 다른 브라우저에서는 자바스크립트로 컴파일 함으로써 웹 앱을 실행할 수 있다. Dart 에디터는 이걸 하기 위해 편리한 메뉴 옵션을 제공합니다. clickme.html 에서 오른쪽 마우스를 클릭하고 “Run as JavaScript”를 메뉴에서 선택하세요.
Dart Editor compiles the app to JavaScript and invokes your default browser, which runs the app.
Dart 에디터는 이 앱을 자바스크립트로 컴파일 하고 디폴트 브라우저(Dartium 이 아닌 브라우저)를 실행합니다.
About the HTML, CSS and Dart triumvirate
HTML, CSS, Dart 3개 체제에 대해
Typically three files—an HTML file, a Dart file, and a CSS file—together implement a Dart web application. Each is written in a different language and each is responsible for a different aspect of the program:
전통적으로 이 3개의 파일들 - html 파일, dart 파일, css 파일 - 함게 Dart 웹에서 구현된다. 각각은 서로 다른 언어로 쓰여지고 프로그램에서 다른 측면으로 쓰여진다.
Language | Purpose |
HTML | Describes the content of the document (the page elements in the document and the structure) |
CSS | Governs the appearance of page elements |
Dart | Implements the interactivity and dynamic behavior of the program |
HTML: 문서의 컨텐츠를 기술한다.(문서안의 페이지 요소와 구조)
CSS: 페이지 요소의 모양(모습)을 규정
Dart: 프로그램의 상호작용 및 동적인 동작들을 구현한다.
HTML is a language for describing web pages. Using tags, HTML sets up the initial page structure, puts elements on the page, and embeds any scripts for page interactivity. HTML sets up the initial document tree and specifies element types, classes, and IDs, which allow HTML, CSS, and Dart programs to refer to the same elements.
HTML은 웹 페이지를 기술하는 언어입니다. 태그를 사용하여 HTML 초기 페이지 구조를 설정하고, 페이지 요소를 두고, 페이지 상호 작용에 대한 스크립트를 포함합니다. HTML은 초기 문서 트리를 설정하고 HTML, CSS, 다트 프로그램이 동일한 요소를 참조하도록 엘리먼트 타입, css 클래스, ID들을 지정합니다.
CSS, which stands for Cascading Style Sheets, describes the appearance of the elements within a document. CSS controls many aspects of formatting: type face, font size, color, background color, borders, margins, and alignment, to name a few.
캐스 케이딩 스타일 시트의 약자로 CSS는 문서 내 요소의 모양을 설명합니다. CSS 서식의 많은 측면을 제어합니다. 예를 들면 type face, 글꼴 크기, 색상, 배경 색상, 테두리, 여백, 정렬 등등.
Dart code is embedded into an HTML file as a script. A Dart program can respond to events such as mouse clicks, manipulate the elements on a web page dynamically, and can save information.
Dart 코드는 스크립트로써 html 파일안에 들어가 있습니다. Dart 프로그램은 마우스 클릭과 같은 이벤트 반응합니다.
About main() and other top-level functions
메인함수와 탑 레벨 함수에 대해
Dart lets you define top-level functions, that is, functions that are not encapsulated within a class or object. All apps have at least one top-level function, namely the main() function.
Dart는 top_level 함수를 정의할 수 있다. 다시 말해서 클래스나 오브젝트안에서 캡슐화 되지 않은 함수를 정의할 수 있다는 뜻이다.(일반적으로 자바스크립트에서 function을 사용하여 생성하는 함수를 생각하면 될 듯 합니다.) 모든 애플리케이션은 적어도 하나의 최상위 함수, 즉 main () 함수가 있습니다..
The two apps you’ve seen in this tutorial have other top-level functions. The Hello World example calls print(), a top-level function defined in dart:core. And the clickme app defines a top-level function called reverseText().
이번 튜토리얼에서 살펴본 2개의 앱에는다른 탑 레벨 함수가 있습니다. Hello World 예제에는 dart:core에 정의되어 있는 탑 레벨 함수인 print(를 호출하고, clickme 앱에서는 reverseText()라고 하는 탑 레벨 함수를 정의했습니다.
A function declaration has two parts: a signature and a body.
함수는 2개의 부분으로 되어 있습니다: signature 와 본문.
The signature sets the function name, the data type of its return value, and the number and type of its input arguments.
The signatures 부분은 함수의 이름, 리턴 값의 데이터 타입, 그리고 input 아규먼트의 갯수와 타입을 설정합니다.
The body is the code that defines the function’s behavior. It usually appears between curly braces ({code}). If the body is a single expression, then you can skip the braces and use the => shorthand:
본문 부분은 기능의 동작을 정의 합니다. 그러한 동작들은 보통 중괄호 사이에 나타납니다. 본문 부분이 하나의 표현으로 되어 있다면 중괄호를 생략하고 간편하게 => 를 사용할 수 있습니다.
double milesToKM(double miles) => miles/0.62;
The milesToKM() function performs a simple arithmetic calculation and returns the result.
This function takes a single argument. Functions can take multiple arguments, in which case the arguments are set apart by commas.
milesToKM() 함수는 간단한 산술 연산을 하고 그 결과를 리턴합니다. 이 함수는 하나의 인자를 가집니다. 함수는 여러개의 인자를 가질수 있습니다. 그 여러개의 함수 인자들은 콤마로 구분됩니다.
About file naming conventions
파일 이름 지정 규칙에 대해
When creating an application with Dart Editor, you are asked to provide an application name. By convention, application names, and thus, the related files and directories, are lowercase.
Dart 에디터로 앱을 개발할때, 앱 이름을 제공하라는 메시지를 받게 됩니다. 규칙에 따라서 앱 이름, 관련 파일들 그리그 디렉토리들은 소문자입니다.
As you saw, Dart Editor uses the application name for:
당신이 본것과 같이, Dart 에디터는 앱 이름을 아래와 같이 사용합니다.
the name of the app’s directory
앱의 디렉토리 이름the basename of the main Dart file (the Dart file that contains the main() function)
메인 Dart 파일 (main () 함수를 포함하는 Dart 파일)의 기본 이름the basename of the primary HTML file
기본 HTML 파일의 기본 이름the basename of the primary CSS file
기본 CSS 파일의 기본 이름
You should also follow these conventions when creating applications outside of Dart Editor.
Dart 에디터를 사용하지 않고 앱을 개발할때도 이러한 규칙을 따라야 합니다.
Other resources
기타 리소스들
Dart Editor, an excerpt from Dart: Up and Running, provides details about using Dart Editor. The excerpt includes, for example, how to set up run-time environments, how to use power features such as autocompletion, debugging, refactoring, and so on.
Dart 에디터, "Dart: Up and Running"에서 발췌, Dart 에디터 사용에 관한 자세한 것들을 제공합니다. 예를 들면 실행환경 set-up 방법과 자동완성 기능, 디버깅, 리팩토링과 같은 강력한 기능에 대한 사용법등이 있습니다.(원본화면에서는 Dart Editor 링크를 타고 들어가면 됩니다.)The Programmer's Guide points you to docs, articles, and other resources to help you as you create, test, and deploy Dart code.
Programmer's Guide 은 당신이 Dart 코드를 만들고 테스트하고 배포할때 당신을 돕기 위한 문서, 기사 그 외 다른 자원들을 볼 수 있습니다.
What next?
다음은?
Get the code for all of the Dart tutorials samples. Download the ZIP file, unzip it, and open dart-tutorials-samples in Dart Editor.
Dart 튜토리얼의 모든 샘플 코드를 받으세요. zip 파일을 다운로드 하세요. 압축을 풀고 Dart Editor 에서 dart-tutorials-samples를 열어 보세요.Go to the next tutorial, Connect Dart & HTML, which steps you through writing a tiny web app from scratch.
다음 튜토리얼로 갑시다. 처음부터 작은 웹 앱을 만들어보면서 차근차근 Dart와 HTML과의 관계를 알아봅시다.
'개발 > dart' 카테고리의 다른 글
| 6. Defined a Custom Element (0) | 2014.03.02 |
|---|---|
| 5. Install Shared Packages (0) | 2014.03.02 |
| 4. Remove DOM Elements (0) | 2014.03.02 |
| 3. Add Elements to the DOM (0) | 2014.03.02 |
| 2. Connect Dart & HTML (0) | 2014.03.02 |
댓글