* 전체 링크
Fetch Data Dynamically
데이터 동적으로 가져오기
Get data from a file or server.
파일이나 서버에서 데이터 가져오기.
Web applications often use JSON (JavaScript Object Notation) to pass data between clients and servers. Data can be serialized into a JSON string, which is then passed between a client and server, and revived as an object at its destination. This tutorial shows you how to use functions in the dart:convert library to produce and consume JSON data. Because JSON data is typically loaded dynamically, this tutorial also shows how a web app can use an HTTP request to get data from an HTTP server. For web apps, HTTP requests are served by the browser in which the app is running, and thus are subject to the browser’s security restrictions.
웹 어플리케이션은 클라이언트와 서버사이에 데이터를 전달하기 위해 종종 JSON (JavaScript Object Notation)을 사용합니다. 데이터는 클라이언트와 서버간에 전달된 JSON 문자열로 직렬화되고 목적지에서 다시 객체로 살아납니다. 이번 튜토리얼에서는 어떻게 JSON 데이터를 만들고 꺼내 쓰기 위해 dart:convert 에서 함수를 사용하는지 알아볼 것 입니다. JSON 데이터는 일반적으로 동적으로 로드되어지기 때문에, 이번 튜토리얼에서도 웹 어플리케이션에서 HTTP 서버에서 데이터를 가져오기 위해서 어떻게 HTTP 리퀘스트를 사용하는지를 알아볼 것입니다. 웹 어플리케이션에서, HTTP 리퀘스트는 웹 어플리케이션이 실행중일때 브라우저에 의해 제공되어 집니다. 그리고 이 HTTP 리퀘스트는 브라우저 보안 제한의 대상이 됩니다.
About JSON
JSON에 대해
The JSON data format is easy for humans to write and read because it is lightweight and text based. With JSON, various data types and simple data structures such as lists and maps can be serialized and represented by strings.
JSON 데이터 포맷은 사람이 쓰고 읽기 쉽습니다. 왜냐하면 가볍고 텍스트 베이스이기 때문입니다. JSON에서, 다양한 데이터 타입과 리스트와 맵과 같은 간단한 데이터 구조는 직렬화 되어질수 있고 문자열로 표현할 수 있습니다.
Try it! The app running below, its_all_about_you, displays the JSON string for data of various types. Change the values of the input elements and check out the JSON format for each data type.
시도해보세요!(원본 페이지:https://www.dartlang.org/docs/tutorials/fetchdata/ ) 아래에 실행되는 앱,its_all_about_you, 다양한 타입의 데이터를 JSON 문자열로 표시합니다. 입력 요소의 값을 바꾸고 각 데이터 타입의 JSON 포맷을 체크해 보세요.
Version Note: The its_all_about_you app is compatible with polymer.dart 0.9.
버전공지: its_all_about_you 앱은 polymer.dart 0.9 와 호환됩니다.
The dart:convert library contains two convenient functions for working with JSON strings:
dart:convery 라이브러리는 JSON 문자열을 처리하기 위해서 편리한 2개의 함수를 포함하니다.
dart:convert function | Description |
Builds Dart objects from a string containing JSON data. | |
Serializes a Dart object into a JSON string. |
To use these functions, you need to import dart:convert into your Dart code:
import 'dart:convert';
The JSON.encode() and JSON.decode() functions can handle these Dart types automatically:
JSON.encode() 와 JSON.decode() 함수는 자동으로 아래의 Dart 타입을 처리할 수 있습니다.
num
String
bool
null
List
Map
Serializing data into JSON
JSON 으로 데이터 직렬화 하기
Use the JSON.encode() function to serialize an object that supports JSON. Here’s the function, showJson, from the its_all_about_you example that converts all of the data to JSON strings.
JSON을 지원하는 객체를 직렬화하기 위해서는 JSON.encode() 함수를 사용하세요. 여기에 JSON 문자열로 모든 데이터를 변환하는 its_all_about_you 예제안에 있는 showJson 함수가 있습니다.
Below is the JSON string that results from the code using the original values from the its_all_about_you app.
아래에는 its_all_about_you 앱에서 원본 값을 사용하여 결과가 나온 JSON 문자열입니다.
Boolean and numeric values appear as they would if they were literal values in code, without quotes or other delineating marks. A boolean value is either true or false. A null object is represented with null.
Boolean과 숫자 값은 따옴표나 기타 개설 부호없이 값들이 코드에서 리터럴 값이라면 그 값 자체로 나타납니다. boolean 값은 true 또는 false 값중 하나입니다. null 객체는 null 로 표현됩니다.
Strings are contained within double quotes. A list is delineated with square brackets; its items are comma-separated. The list in this example contains strings. A map is delineated with curly brackets; it contains comma-separated key/value pairs, where the key appears first, followed by a colon, followed by the value. In this example, the keys in the map are strings. The values in the map vary in type but they are all JSON-parsable.
문자열은 쌍따옴표로 둘러싸여져 있습니다. 리스트는 대괄호를 사용하여 구분되어 집니다. 이 때 각 항목은 쉼표로 구분되어져 있습니다. 이 예제의 리스트는 문자열이 포함되어 있습니다. 맵은 중괄호로 구분되어집니다. 맵은 키와 값의 쌍으로 된 쉼표로, 키가 먼저 나오고 그 다음에 콜론으로 구분되어져서 값이 나오는, 구분되어집니다.맵의 값은 다양하지만 그것들은 모두 JSON 으로 파싱이 가능합니다.
Parsing JSON data
JSON 데이터 파싱하기.
Use the JSON.decode() function from the dart:convert library to create Dart objects from a JSON string. The its_all_about_you example initially populates the values in the form from this JSON string:
JSON 문자열에서 Dart 객체를 만들기 위해서 dart:convert 라이브러리에 있는 JSON.decode() 함수를 사용하세요. 이 its_all_about_you 예제는 처음에 JSON 문자열에서 form 으로 값을 가져옵니다.
String jsonDataAsString = '''
{ "favoriteNumber":44,
"valueOfPi":3.141592,
"chocolate":true,
"horrorScope":"virgo",
"favoriteThings":["raindrops",
"whiskers",
"mittens"]
}
''';
Map jsonData = JSON.decode(jsonDataAsString);
This code calls the JSON.decode() function with a properly formatted JSON string. Note that Dart strings can use either single or double quotes to denote strings. JSON requires double quotes.
이 코드는 올바른 형식의 JSON 문자열을 JSON.decode() 함수를 호출합니다. Dart는 문자열을 나타내기 위해서 홑따옴표나 쌍따옴표를 사용할 수 있습니다. 하지만 JSON은 쌍 따옴표를 써야 합니다.
In this example, the full JSON string is hard coded into the Dart code, but it could be created by the form itself or read from a static file or received from a server. An example later on this page shows how to dynamically fetch JSON data from a file that is co-located with the code for the app.
이 예제에서, 전체 JSON 문자열은 Dart 코드에서 하드 코딩되어 있지만 폼 자체에서 만들어 질수 있고 또는 정적 파일에서 읽거나 서버에서 받을수도 있습니다. 나중에 이 페이지에 있는 예제에서는 앱 코드와 동일한 위치에 있는 파일에서 어떻게 동적으로 JSON 데이터를 가져오는지 보여 줄 것입니다.
The JSON.decode() function reads the string and builds Dart objects from it. In this example, the JSON.decode() function creates a Map object based on the information in the JSON string. The Map contains objects of various types including an integer, a double, a boolean value, a regular string, and a list. All of the keys in the map are strings.
JSON.decode() 함수는 문자열을 읽고 그 문자열로 Dart 객체를 만듭니다.이 예제에서, JSON.decode() 함수는 JSON 문자열의 정보를 기반으로 해서 맵 객체를 만듭니다.이 맵 객체는 integer, dobule, boolean, regular string 그리고 리스트를 포함하는 다양한 타입의 객체를 포함하고 있습니다. 이 맵의 모든 키는 문자열 입니다.
About URIs and HTTP requests
URI와 HTTP 리퀘스트에 대해서
To make an HTTP GET request from within a web app, you need to provide a URI (Uniform Resource Identifier) for the resource. A URI (Uniform Resource Identifier) is a character string that uniquely names a resource. A URL (Uniform Resource Locator) is a specific kind of URI that also provides the location of a resource. URLs for resources on the World Wide Web contain three pieces of information:
웹 앱에서 HTTP GET 리퀘스트를 만들기 위해서, 리소스의 URI(Uniform Rresource Identifier)를 제공할 필요가 있습니다. URI(Uniform Rresource Identifier)는 자원을 고유하게 가르키는 문자열입니다. URL(Uniform Resource Locator)는 자원의 위치를 제공하는 URI의 특정 유형입니다. 인터넷 세상(www)상에 있는 자원의 URL은 3개의 정보를 가집니다.
The protocol used for communication
통신에 사용되는 프로토콜The hostname of the server
서버의 호스트 이름The path to the resource
자원의 경로
For example, the URL for this page breaks down as follows:
예를들면, 이 페이지의 URL은 아래와 같이 나뉘어 집니다.
This URL specifies the HTTP protocol. At its most basic, when you enter an HTTP address into a web browser, the browser sends an HTTP GET request to a web server, and the web server sends an HTTP response that contains the contents of the page (or an error message).
이 URL은 HTTP 프로토콜을 지정합니다. 가장 기본적으로, 당신이 웹 브라우저에 HTTP 주소를 적어넣을때, 그 브라우저는 웹 서버에 HTTP GET 리퀘스트(요청)를 보냅니다. 그리고 그 웹 서버는 페이지의 내용을 포함하고 있는 HTTP 리스폰스(응답)을 보냅니다. 에러가 나면 에러 메시지를 보냅니다.
Most HTTP requests in a web browser are simple GET requests asking for the contents of a page. However, the HTTP protocol allows for other types of requests, such as POST for sending data from the client.
웹 브라우저 대부분의 HTTP 요청은 페이지의 내용을 찾는 간단한 GET 요청입니다. 그러나 HTTP 프로토콜은 클라이언트로부터 데이터를 전송하기 위한 이러한 POST 같은 다른 요청의 유형을 사용할 수도 있습니다.
A Dart web app running inside of a browser can make HTTP requests. These HTTP requests are handled by the browser in which the app is running. Even though the browser itself can make HTTP requests anywhere on the web, a Dart web app running inside the browser can make only limited HTTP requests because of security restrictions. Practically speaking, because of these limitations, HTTP requests from web apps are useful only for retrieving information in files specific to and co-located with the app.
브라우저 안에서 실행되는 Dart 웹 앱은 HTTP 요청을 할 수 있습니다. 이런 HTTP 요청들은 앱이 실행중일때 브라우저에 의해 처리되어집니다. 브라우저 그 자체가 HTTP 요청을 웹의 어디에서라도 할 수 있다고 하더라도, 브라우저 내에서 실행되는 Dart 웹 앱은 보안상의 제한으로 인해서 한정된 HTTP 요청을 할 수 있습니다. 실제적으로 말하면, 이러한 제한 때문에, 웹 앱에서 HTTP 요청은 특정 및 웹 앱과 같은 위치에 있는 파일에서만 정보를 받아오는데 유용합니다.
A note about security: Browsers place tight security restrictions on HTTP requests made by embedded apps. Specifically, any resources requested by a web app must be served from the same origin. That is, the resources must be from the same protocol, host, and port as the app itself. This means that your web app cannot request just any resource from the web with HTTP requests through the browser, even if that request is seemingly harmless (like a GET.)
보안에 대한 주석: 브라우저는 임베디드 앱(웹 앱과 같이 브라우저 안에 붙어서 실행되는 앱을 말하는 것 같음) 에 의해 만들어진 HTTP 요청에 대해서는 엄격한 보안 제한을 둡니다. 특히, 웹 앱이 요청하는 자원은 반드시 동일한 기원에서 제공되어져야 합니다. 즉, 자원은 반드시 앱과 같은 프로토콜, 같은 호스트, 같은 포트이여야만 합니다. 이것은 겉으로 보기에서는 해가 없을 같이 보이질라도 , 앱이 웹브라우저에서 HTTP 요청을 사용해서 웹으로 부터 어떤 자원들도 요청할 수 없다는 뜻입니다.
Some servers do allow cross-origin requests through a mechanism called CORS (Cross-origin resource sharing), which uses headers in an HTTP request to ask for and receive permission. CORS is server-specific and not yet widely used.
일부 서버는 요청하고 허가를 받기 위해서 HTTP 요청의 헤더를 사용하는, CORS(Cross-origin Resource Sharing)이라고 불리는 메카니즘을 통해서 요청을 허용하고 있습니다. CORS는 서버쪽 스펙이고 아직 널리사용되고 있지는 않습니다.
The SDK provides these useful classes for formulating URIs and making HTTP requests:
Dart code | Library | Description |
(core library) | An object representing a URI. | |
dart:html | Client-side HTTP request object. For use in web apps. | |
dart:io | Server-side HTTP request object. Does not work in web apps. |
Using the getString() function to load a file
파일을 로드하기 위해 getString() 함수 사용하기.
One useful HTTP request your web app can make is a GET request for a data file served from the same origin as the app. The example below, portmanteaux_simple, includes a data file called portmanteaux_simple.json that contains a JSON-formatted list of words. When you click the button, the app makes a GET request of the server and loads the file.
웹 앱이 만들수 있는 다른 유용한 HTTP 요청은 앱과 동일한 기원에서 제공되는 데이터파일의 GET 요청이 있습니다. 아래의 예제는 , portmanteaux_simple, portmanteaux_simple.json 라고 불리는 파일을 포함합니다. 이 portmanteaux_simple.json 파일은 단어들이 JSON 형식에 맞게 만들어져 있습니다. 당신이 버튼을 클릭할때, 이 앱은 서버의 GET 요청을 하고 파일을 로드합니다.
Try it! Click the button.
버튼을 클릭하세요.(실행가능한 예제는 https://www.dartlang.org/docs/tutorials/fetchdata/ 에 있습니다.)
This program uses a convenience method, getString(), provided by the HttpRequest class to request the file from the server.
이 프로그램은 서버로부터 파일을 요청하기 위해 HttpRequest 클래스에서 제공하는 편리한 메소드 getString() 을 사용합니다.
The getString() method uses a Future object to handle the request. A Future is a way to perform potentially time-consuming operations, such as HTTP requests, asynchronously. If you haven’t encountered Futures yet, you can learn more about them in Use Future-Based APIs. Until then, you can use the code above as an idiom and provide your own code for the body of the processString() function and your own code to handle the error.
getString() 메소드는 요청을 처리하기 위해서 Future를 사용합니다. Future 는 잠재적으로 시간이 많이 걸리는 작업을, HTTP 요청같은, 비동기적으로 처리하기 위한 방법입니다. 아직 Futres 를 사용해야할 경우가 없었다면, Use Future-Based API에서 Future에 대해서 좀 더 알아보세요. 그 전 까지, 관용구처럼 위의 코드를 사용할 수 있습니다. 그리고 processString() 함수의 body 부분에 당신이 필요한 코드와 에러를 처리하기 위한 코드를 추가할 수 있습니다.
Using a relative URI
상대 URI 사용하기
The URI used for the GET request specifies just the name of the portmanteaux_simple.json data file. Let’s take a look at how that works.
GET 요청에 사용되어지는 URI는 단지 portmanteaux_simple.json 데이터 파일을 지정하는데 사용됩니다. 이게 어떻게 작동하는지 한 번 봅시다.
Open the application directory in Dart Editor, select the portmanteaux_simple.html file, and run the program. Before doing anything else, notice the URI for the program in Dartium.
Dart 에디터에서 어플리케이션의 디렉토리를 열고, portmanteaux_simple.html 파일을 선택하여 프로그램을 실행하세요. 어떤 작업을 하기 전에, Dartium 브라우저에서 URI을 한 번 보세요.
The server designation 127.0.0.1 is the standard for referring to this computer—the computer on which the program is running. (localhost is a human-friendly synonym for 127.0.0.1.)
서버 ip인 127.0.0.1은 자기 컴퓨터-- 프로그램이 실행되고 있는 컴퓨터 --를 참고하기 위한 표준 주소입니다. (127.0.0.1고 같은 뜻인 localhost 는 인간이 쉽게 알아보기 위해 쓰이는 용어 입니다.)
3030 is a port number. Because a computer can run multiple servers at once, to avoid conflicts each server must listen on its own port. Port numbers from 0 to 1024 are called well-known ports and are reserved for use by system processes that provide widely used types of network services. Typically HTTP servers listen on port 80. On most systems, port numbers from 1024 to 49151 are free to be used by any program. Dart Editor listens on port 3030.
3030은 포트 번호입니다. 컴퓨터는 한번에 여러개의 서버를 실행할수 있기 때문에, 각각의 서버가 충돌하는 것을 피하기 위해 반드시 서버 각자의 포트에서 수신 대기해야 합니다.0 부터 1024까지의 포트 번호는 well-known(잘 알려진) 이라고 불리며 네트워크 서비스에 폭넓게 사용되는 타입을 제공하는 시스템 프로세스에서 사용하기 위해 예약된 번호입니다. 일반적으로 HTTP 서버는 80포트를 사용합니다. 대부분의 시스템에서, 1024부터 49151까지의 포트 번호는 다른 프로그램에서 사용할 수 있도록 열려 있습니다. Dart 에디터는 3030 포트를 사용합니다.
The rest of the URI is the absolute pathname to the HTML file that hosts the app.
URI 의 나머지 부분은 앱을 호스트하는 HTML 파일이 있는 절대경로 입니다.
The HttpRequest object resolves the file name to an absolute URI using the URI for the current web page as its basis.
HttpRequest 객체는 HTTP 요청을 근거로 해서 현재 웹 페이지의 URI를 사용하여 절대 URI의 파일 이름을 찾습니다.
The GET request in this example is successful because the app and the requested resource are from the same origin:
앱과 요청한 자원이 같은 곳에에 있기 때문에, 이 예제에서 GET 요청은 성공합니다.
Using an HttpRequest object to load a file
파일을 로드하기 위해 HttpRequest 객체 사용하기.
The getString() method is good for an HTTP GET request that returns a string loaded from the resource. For different cases, you need to create an HttpRequest object, configure its header and other information, and use the send()method to make the request.
getString() 메소드는 자원에서 로드된 문자열을 가지고 오는 HTTP GET 요청에 적합니다. 다른 케이스에는, 당신은 헤더와 다른 정보를 설정하는 HttpRequest 객체를 만들고 요청을 하기 위해 send() 메소드를 사용합니다.
This section looks at a new version of the portmanteaux example, called portmanteaux, that has been rewritten to use an explicitly constructed HttpRequest object.
이번 섹션에서는 새로운 버전의 portmanteaux 예제를 살펴 보겠습니다. 새로운 버전은 명시적으로 생성된 HttpRequest 객체를 사용하여 재작성되었습니다.
Setting up the HttpRequest object
HttpRequest 객체 설정하기.
The mouse-click handler for the button creates an HttpRequest object, configures it with a URI and callback function, and then sends the request. Let’s take a look at the Dart code:
버튼에 있는 마우스 클릭 핸들러는 URI와 콜백 함수를 설정하는 HttpRequest 객체를 만듭니다. 그리고 그 다음에 요청을 보냅니다. Dart 코드를 한 번 봅시다.
Sending the request
요청 보내기
The send() method sends the request to the server.
send() 메소드는 서버에 요청을 보냅니다.
httpRequest.send('');
Because the request in this example is a simple GET request, the code can send an empty string. For other types of requests, such as POST requests, this string can contain further details or relevant data. You can also configure the HttpRequest object by setting various header parameters using the setRequestHeader() method.
이 예제에서의 요청은 간단한 요청이기 때문에, 코드는 빈 문자열을 서버에 보낼수 있습니다. 다른 타입의 요청의 경우에는, 예를 들면 POST 요청 같은 경우, 이 문자열은 좀 더 자세한 정보나 관련 데이터를 포함할 수 있습니다. 당신은 setRequestHeader() 메소를 사용하여 다양한 헤더 파라미터를 세팅한 HttpRequest 객체를 설정할 수 있습니다.
Handling the response
응답 핸들링 하기.
To handle the response from the request, you need to set up a callback function before calling send(). Our example sets up a one-line callback function for onLoadEnd events that in turn calls requestComplete(). This callback function is called when the request completes, either successfully or unsuccessfully.
요청에서 응답을 처리하기 위해서, 당신은 send() 함수를 호출하기 전에 콜백 함수를 설정할 필요가 있습니다. 예제는 requestComplete() 호출하는 한줄 짜리 onLoadEnd 이벤트에 콜백 함수를 설정합니다. 이 콜백 함수는 요청이 완료될때 호출되고, 성공하거나 실패하거나 둘 중 하나입니다.
The callback function for our example, requestComplete(), checks the status code for the request. If the status code is 200, the file was found and loaded successfully, The contents of the requested file, portmanteaux.json, are returned in the responseText property of an HttpRequest object. Using the JSON.decode() function from the dart:convert library, the code easily converts the JSON-formatted list of words to a Dart list of strings, creates a new LIElement for each one, and adds it to the <ul> element on the page.
이 예제에의 콜백 함수인 requestComplete() 는 요청의 상태 코드를 체크합니다. 상태코드가 200이면 파일을 성공적으로 찾아서 로드한 것입니다. 요청 파일인 portmanteaux.json 의 내용은 HttpRequest 객체의 responseText 프로퍼티에 리턴됩니다. Dart 의 dart:convert 라이브러리에 있는 JSON.decode() 함수를 사용하는 것은, 코드를 Dart 형식의 문자열 리스트에서 JSON 형식의 문자열 리스트로 쉽게 변환할수 있습니다. 그 다음에 각각에 새로운 LIElement를 만들고, 페이지에 <ul> 요소를 추가합니다.
Populating the UI from JSON
JSON 형식의 UI 붙이기
The data file in the portmanteaux example, portmanteaux.json, contains a JSON-formatted list of strings.
portmanteaux.json 예제 데이터 파일은 JSON 형식의 문자열 리스트를 포함하고 있습니다.
[
"portmanteau", "fantabulous", "spork", "smog",
"spanglish", "gerrymander", "turducken", "stagflation",
"Brangelina", "freeware", "oxbridge", "palimony",
"brunch", "blog", "chortle", "Hassenpfeffer", "Schnitzelbank"
]
Upon request, the server reads this data from the file and sends it as a single string to the client program. The client program receives the JSON string and uses JSON.decode() to create the String objects specified by the JSON string.
요청에 따라, 서버는 파일에서 이 데이터를 읽고 클라이언트 프로그램에게 단일 문자열로 보냅니다. 클라이언트 프로그램은 JSON 문자열을 받고 JSON 문자열에 의해 지정된 String 객체를 만들기 위해 JSON.decode()를 사용합니다.
Other resources
다른 자원들
Check out Chris Buckett’s article, Using Dart with JSON Web Services, for more information and an example with source code for both client and server programs.
클라이언트와 서버 모두의 소스코드에 대해 더 많은 정보와 예제를 원한다면 Chris buckett’s 기사, JSON 웹 서비스로 Dart 이용하기, 를 확인하세요.
What next?#
다음은?
If you skipped the previous tutorial, Use Future-Based APIs, we highly recommend that you go back and learn about Futures before going any further.
이전 튜토리얼 Use Future-Based APIs 을 지나쳤다면, 다시 더 진행하기 전에 되돌아가서 Future 에 대해서 배우기를 강력하게 추천합니다.
The next tutorial, Get Input from a Form, contains a client/server example that shows you how to use a form to get data from the user, and using JSON, send that form to a server, and handle the server’s response.
다음 튜토리얼 이것은 어떻게 사용자로 부터 폼 데이터를 가져오는지, JSON을 사용하는지, 그리고 사버에 폼 데이터를 어떻게 보내는지, 그리고 서버의 응답을 어떻게 처리하는지를 알아 볼 것입니다.
'개발 > dart' 카테고리의 다른 글
| 11, Use Indexed DB (0) | 2014.03.14 |
|---|---|
| 10. Get Input from a Fom (0) | 2014.03.12 |
| 8. Use Streams for Data (0) | 2014.03.02 |
| 7. Use Future-Based APIs (0) | 2014.03.02 |
| 6. Defined a Custom Element (0) | 2014.03.02 |
댓글