initial commit

5 files changed, 540 insertions, 0 deletions

diff --git a/files/ko/web/api/filereader/index.html b/files/ko/web/api/filereader/index.html
new file mode 100644
index 0000000000..f444a189fa
--- /dev/null
+++ b/files/ko/web/api/filereader/index.html
@@ -0,0 +1,111 @@
+---
+title: FileReader
+slug: Web/API/FileReader
+tags:
+  - API
+  - File API
+  - Files
+  - Interface
+  - Reference
+translation_of: Web/API/FileReader
+---
+<div>{{APIRef("File API")}}</div>
+
+<p><strong><code>FileReader</code></strong> 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는{{ domxref("File") }} 혹은 {{ domxref("Blob") }} 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다.</p>
+
+<p>File 객체는 {{ HTMLElement("input") }} 태그를 이용하여 유저가 선택한 파일들의 결과로 반환된 {{ domxref("FileList") }} 객체, 드래그 앤 드랍으로 반환된 <a href="/En/DragDrop/DataTransfer" title="En/DragDrop/DataTransfer"><code>DataTransfer</code></a> 객체 혹은 {{ domxref("HTMLCanvasElement") }}의 <code style="font-style: normal;">mozGetAsFile()</code> API로 부터 얻습니다.</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.FileReader", "FileReader()")}}</dt>
+ <dd>Returns a newly constructed <code>FileReader</code>.</dd>
+</dl>
+
+<p>See <a href="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for details and examples.</p>
+
+<h2 id="Properties" name="Properties">속성</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt>
+ <dd>{{domxref("DOMError")}} 파일을 읽는 도중에 발생한 에러를 나타냅니다.</dd>
+ <dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt>
+ <dd><code>FileReader의 상태를 나타내는 숫자입니다</code>.</dd>
+ <dt>
+ <h4 id="State_constants" name="State_constants">상태 값들</h4>
+ <code>EMPTY </code> : <code>0</code> : 아직 데이터가 로드 되지 않았음.</dt>
+ <dt><code>LOADING</code> : <code>1</code> : 데이터가 로딩 중.</dt>
+ <dt><code>DONE </code> : <code>2</code> : 모든 읽기 요청이 완료됨.</dt>
+ <dd> </dd>
+ <dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt>
+ <dd>파일의 컨텐츠입니다. 이 속성은 읽기 작업이 완료되고 읽기 작업의 초기화에 사용한 방식으로 결정된 데이터의 포맷이 정해진 후에 유효합니다.</dd>
+</dl>
+
+<h3 id="이벤트_핸들러">이벤트 핸들러</h3>
+
+<dl>
+ <dt>{{domxref("FileReader.onabort")}}</dt>
+ <dd>{{event("abort")}} 이벤트의 핸들러. 이 이벤트는 읽기 동작이 중단 될 때마다 발생합니다.</dd>
+ <dt>{{domxref("FileReader.onerror")}}</dt>
+ <dd>{{event("error")}} 이벤트의 핸들러. 이 이벤트는 읽기 동작에 에러가 생길 때마다 발생합니다.</dd>
+ <dt>{{domxref("FileReader.onload")}}</dt>
+ <dd>{{event("load")}} 이벤트의 핸들러. 이 이벤트는 읽기 동작이 성공적으로 완료 되었을 때마다 발생합니다.</dd>
+ <dt>{{domxref("FileReader.onloadstart")}}</dt>
+ <dd>{{event("loadstart")}} 이벤트 핸들러. 이 이벤트는 읽기 동작이 실행 될 때마다 발생합니다.</dd>
+ <dt>{{domxref("FileReader.onloadend")}}</dt>
+ <dd>{{event("loadend")}} 이벤트 핸들러. 이 이벤트는 읽기 동작이 끝났을 때마다 발생합니다. (읽기의 성공이나 실패 여부는 상관 않습니다.)</dd>
+ <dt>{{domxref("FileReader.onprogress")}}</dt>
+ <dd>{{event("progress")}} 이벤트 핸들러. 이 이벤트는 {{domxref("Blob")}} 컨텐트를 읽는 동안 호출됩니다.</dd>
+</dl>
+
+<div class="note">
+<p>참고: <code>FileReader</code>는 {{domxref("EventTarget")}} 으로 부터 상속 받았습니다, 언급된 모든 이벤트들은 {{domxref("EventTarget.addEventListener()","addEventListener")}} 메소드를 사용하여 listen 하게 할 수 있습니다.</p>
+</div>
+
+<ul>
+</ul>
+
+<h2 id="Methods" name="Methods">메서드</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.abort()")}}</dt>
+ <dd>읽기 요청을 중단시킵니다. 리턴이 되면 readyState 는 DONE이 됩니다.</dd>
+ <dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{ gecko_minversion_inline("7.0") }}</dt>
+ <dd>Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the <code>result</code> attribute contains an {{domxref("ArrayBuffer")}} representing the file's data.</dd>
+ <dt>{{domxref("FileReader.readAsBinaryString()")}}</dt>
+ <dd>Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the <code>result</code> attribute contains the raw binary data from the file as a string.</dd>
+ <dt>{{domxref("FileReader.readAsDataURL()")}}</dt>
+ <dd>Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the <code>result</code> attribute contains a <code>data:</code> URL representing the file's data.</dd>
+ <dt>{{domxref("FileReader.readAsText()")}}</dt>
+ <dd>Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the <code>result</code> attribute contains the contents of the file as a text string.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API','#FileReader-interface','FileReader')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat("api.FileReader")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/en/Using_files_from_web_applications" title="en/Using files from web applications">Using files from web applications</a></li>
+ <li>{{ domxref("File") }}</li>
+ <li>{{ domxref("Blob") }}</li>
+ <li><a href="/en-US/docs/nsIDOMFileReader">nsIDOMFileReader [en-US]</a> - For addons/privelaged scope</li>
+</ul>
diff --git a/files/ko/web/api/filereader/loadend_event/index.html b/files/ko/web/api/filereader/loadend_event/index.html
new file mode 100644
index 0000000000..c8e9f97664
--- /dev/null
+++ b/files/ko/web/api/filereader/loadend_event/index.html
@@ -0,0 +1,165 @@
+---
+title: 'FileReader: loadend event'
+slug: Web/API/FileReader/loadend_event
+translation_of: Web/API/FileReader/loadend_event
+---
+<div>{{APIRef}}</div>
+
+<p><code>loadend</code> 이벤트는 성공여부와 관계없이 파일읽기가 끝나면 실행됩니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">버블링</th>
+   <td>해당없음</td>
+  </tr>
+  <tr>
+   <th scope="row">이벤트 취소가능</th>
+   <td>해당없음</td>
+  </tr>
+  <tr>
+   <th scope="row">인터페이스</th>
+   <td>{{domxref("ProgressEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">이벤트 핸들러 프로퍼티</th>
+   <td>{{domxref("FileReader.onloadend")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Live_example">Live example</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="example"&gt;
+
+    &lt;div class="file-select"&gt;
+        &lt;label for="avatar"&gt;Choose a profile picture:&lt;/label&gt;
+        &lt;input type="file"
+               id="avatar" name="avatar"
+               accept="image/png, image/jpeg"&gt;
+    &lt;/div&gt;
+
+    &lt;img src="" class="preview" height="200" alt="Image preview..."&gt;
+
+    &lt;div class="event-log"&gt;
+        &lt;label&gt;Event log:&lt;/label&gt;
+        &lt;textarea readonly class="event-log-contents"&gt;&lt;/textarea&gt;
+    &lt;/div&gt;
+
+  &lt;/div&gt;</pre>
+
+<div class="hidden">
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">img.preview {
+  margin: 1rem 0;
+}
+
+.event-log-contents {
+  width: 18rem;
+  height: 5rem;
+  border: 1px solid black;
+  margin: .2rem;
+  padding: .2rem;
+}
+
+.example {
+  display: grid;
+  grid-template-areas:
+              "select  log"
+              "preview log";
+}
+
+.file-select {
+  grid-area: select;
+}
+
+.preview {
+  grid-area: preview;
+}
+
+.event-log {
+  grid-area: log;
+}
+
+.event-log&gt;label {
+  display: block;
+}
+
+.event-log-contents {
+  resize: none;
+}</pre>
+</div>
+
+<h4 id="JS">JS</h4>
+
+<pre class="brush: js">const fileInput = document.querySelector('input[type="file"]');
+const preview = document.querySelector('img.preview');
+const eventLog = document.querySelector('.event-log-contents');
+const reader = new FileReader();
+
+function handleEvent(event) {
+    eventLog.textContent = eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;
+
+    if (event.type === "load") {
+        preview.src = reader.result;
+    }
+}
+
+function addListeners(reader) {
+    reader.addEventListener('loadstart', handleEvent);
+    reader.addEventListener('load', handleEvent);
+    reader.addEventListener('loadend', handleEvent);
+    reader.addEventListener('progress', handleEvent);
+    reader.addEventListener('error', handleEvent);
+    reader.addEventListener('abort', handleEvent);
+}
+
+function handleSelected(e) {
+    eventLog.textContent = '';
+    const selectedFile = fileInput.files[0];
+    if (selectedFile) {
+        addListeners(reader);
+        reader.readAsDataURL(selectedFile);
+    }
+}
+
+fileInput.addEventListener('change', handleSelected);
+</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{ EmbedLiveSample('Live_example', '100%', '300px') }}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-loadend-event')}}</td>
+   <td>{{Spec2('File API')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.FileReader.loadend_event")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related events: {{domxref("FileReader.loadstart_event", "loadstart")}}, {{domxref("FileReader.load_event", "load")}}, {{domxref("FileReader.progress_event", "progress")}}, {{domxref("FileReader.error_event", "error")}}, {{domxref("FileReader.abort_event", "abort")}}</li>
+</ul>
diff --git a/files/ko/web/api/filereader/readasdataurl/index.html b/files/ko/web/api/filereader/readasdataurl/index.html
new file mode 100644
index 0000000000..1533dc620d
--- /dev/null
+++ b/files/ko/web/api/filereader/readasdataurl/index.html
@@ -0,0 +1,171 @@
+---
+title: FileReader.readAsDataURL()
+slug: Web/API/FileReader/readAsDataURL
+translation_of: Web/API/FileReader/readAsDataURL
+---
+<div>{{APIRef("File API")}}</div>
+
+<p> </p>
+
+<p><code>readAsDataURL</code> 메서드는 컨텐츠를 특정 {{domxref("Blob")}} 이나 {{domxref("File")}}에서 읽어 오는 역할을 합니다. 읽어오는 read 행위가 종료되는 경우에, {{domxref("FileReader.readyState","readyState")}} 의 상태가 <code>DONE</code>이 되며,   {{event("loadend")}} 이벤트가 트리거 됩니다. 이와 함께,  base64 인코딩 된 스트링 데이터가 {{domxref("FileReader.result","result")}}  속성(attribute)에 담아지게 됩니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsDataURL(blob);</pre>
+
+<h3 id="파라미터">파라미터</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>읽고자 하는 {{domxref("Blob")}} 또는 {{domxref("File")}}.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="file" onchange="previewFile()"&gt;&lt;br&gt;
+&lt;img src="" height="200" alt="이미지 미리보기..."&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function previewFile() {
+  var preview = document.querySelector('img');
+  var file    = document.querySelector('input[type=file]').files[0];
+  var reader  = new FileReader();
+
+  reader.addEventListener("load", function () {
+    preview.src = reader.result;
+  }, false);
+
+  if (file) {
+    reader.readAsDataURL(file);
+  }
+}</pre>
+
+<h3 id="실행_결과">실행 결과</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 240)}}</p>
+
+<p> </p>
+
+<h2 id="복수의_파일_읽기_예제">복수의 파일 읽기 예제</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;input id="browse" type="file" onchange="previewFiles()" multiple&gt;
+&lt;div id="preview"&gt;&lt;/div&gt;</pre>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<pre class="brush: js">function previewFiles() {
+
+  var preview = document.querySelector('#preview');
+  var files   = document.querySelector('input[type=file]').files;
+
+  function readAndPreview(file) {
+
+    // `file.name` 형태의 확장자 규칙에 주의하세요
+    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
+      var reader = new FileReader();
+
+      reader.addEventListener("load", function () {
+        var image = new Image();
+        image.height = 100;
+        image.title = file.name;
+        image.src = this.result;
+        preview.appendChild( image );
+      }, false);
+
+      reader.readAsDataURL(file);
+    }
+
+  }
+
+  if (files) {
+    [].forEach.call(files, readAndPreview);
+  }
+
+}
+</pre>
+
+<div class="note"><strong>주의:</strong> <a href="/en-US/docs/Web/API/FileReader"><code>FileReader()</code></a> 생성자는 Internet Explorer 10 이전 버전에서는 지원하지 않는 기능입니다. 정상적으로 지원하는 코드를 확인하기 위해서는 다음 링크를 참조하시기 바랍니다. <a class="internal" href="https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html" title="crossbrowser_image_preview.html">crossbrowser possible solution for image preview</a>. 또는 <a href="https://mdn.mozillademos.org/files/3698/image_upload_preview.html">this more powerful example</a>.</div>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">비고</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>32</td>
+   <td>3</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all {{domxref("Blob")}} parameters below were {{domxref("File")}} parameters; this has since been updated to match the specification correctly. Prior to Gecko 13.0 {{geckoRelease("13.0")}} the <code>FileReader.error</code> property returned a {{domxref("FileError")}} object. This interface has been removed and <code>FileReader.error</code> is now returning the {{domxref("DOMError")}} object as defined in the latest FileAPI draft.</p>
+
+<p>[2] IE9 has a <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
+
+<p>[3] Opera has <a href="http://www.opera.com/docs/specs/presto28/file/">partial support</a> in 11.1.</p>
+
+<h2 id="바깥_고리">바깥 고리</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ko/web/api/filereader/readastext/index.html b/files/ko/web/api/filereader/readastext/index.html
new file mode 100644
index 0000000000..d0f5c80ddf
--- /dev/null
+++ b/files/ko/web/api/filereader/readastext/index.html
@@ -0,0 +1,60 @@
+---
+title: FileReader.readAsText()
+slug: Web/API/FileReader/readAsText
+tags:
+  - 파일
+  - 파일 API
+translation_of: Web/API/FileReader/readAsText
+---
+<div>{{APIRef("File API")}}</div>
+
+<p><strong><code>readAsText()</code></strong> 메서드는 지정된 {{domxref("Blob")}} 이나 {{domxref("File")}} 의 컨텐츠를 읽기 위해 사용합니다. 읽기  연산이 끝나면, {{domxref("FileReader.readyState","readyState")}} 가 <code>DONE</code>으로 바뀌고, {{event("loadend")}} 이벤트가 트리거 되고, {{domxref("FileReader.result","result")}} 프로퍼티는 파일의 내용을 텍스트 문자열로 가집니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>새로운 API 사용가능</strong><br>
+ {{domxref("Blob.text()")}} 메서드는 파일을 텍스트로 읽는 프로미스 기반의 새 API 입니다.</p>
+</div>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsText(blob[, encoding]);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>읽어 들일 {{domxref("Blob")}} 이나 {{domxref("File")}}</dd>
+ <dt><code>encoding</code> {{optional_inline}}</dt>
+ <dd>반환 데이터에 사용될 문자열 인코딩을 지정. 매개변수가 지정되지 않으면 기본적으로 UTF-8이라고 가정합니다.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("File API", "#readAsDataText", "readAsText()")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.FileReader.readAsText")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ko/web/api/filereader/result/index.html b/files/ko/web/api/filereader/result/index.html
new file mode 100644
index 0000000000..feb9b02405
--- /dev/null
+++ b/files/ko/web/api/filereader/result/index.html
@@ -0,0 +1,33 @@
+---
+title: FileReader.result
+slug: Web/API/FileReader/result
+translation_of: Web/API/FileReader/result
+---
+<p>{{APIRef("File API")}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>파일의 내용을 반환한다. 이 속성은 읽기가 완료 된 후에만 사용 가능 하며 데이터의 형식은 읽기 작업에 어떤 함수가 사용되었는가에 의해 정해진다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var file = <em>instanceOfFileReader</em>.result
+</pre>
+
+<h2 id="Value">Value</h2>
+
+<p>읽기 작업에 사용된 함수에 의해 string 또는 {{domxref("ArrayBuffer")}} 가 된다.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Specifications</h2>
+
+<p>{{page("/en-US/docs/Web/API/FileReader","Specifications")}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{page("/en-US/docs/Web/API/FileReader","Browser compatibility")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>