recursal/MDN huggingface dataset:
어떤 HTML 기능이 접근성을 촉진할까?
======================

이번 내용은 웹 페이지를 좀 더 서로 다른 장애를 가진 사람들에게 좀 더 접근하기 쉽게 만들 수 있는 HTML의 특정한 기능을 서술합니다.

탭(Tabbing)
----------

pointing devices를 사용 하지 않거나 사용 할 수 없는 유저들은 `Tab` 을 links를 통해 할 수 있습니다.(links는 논리적 순서로 이루어져 있어야 합니다.) tabindex 속성은 당신이 이러한 순서를 정의 할 수 있도록 허락합니다. 만약 HTML이 선형이라면, 논리적 탭 순서는 자동적으로 맞춰집니다.


```html
<ul>
  <li><a href="here.html" tabindex="1">Here</a></li>
  <li><a href="there.html" tabindex="3">There</a></li>
  <li><a href="anywhere.html" tabindex="2">Anywhere</a></li>
</ul>
```


이번 예시는(순수히 데모를 위해 사용되었으니 따라하지 마세요), 탭이 여기서부터 여기저기를 점프합니다.

링크 제목(Link Titles)
------------------

만약 당신이 자신을 설명하지 않는 링크를 가지고 있거나, 링크 목적지가 더 자세하게 설명되지 않으면, 그 링크에 제목 속성을 추가 할 수 있습니다.


```html
<p>
  I'm really bad at writing link text.
  <a
 href="inept.html"
 title="Why I'm rubbish at writing link text: An explanation and an apology."
 >Click here</a
 >
  to find out more.
</p>
```

접근 키(Access Keys)
-----------------

*접근 키는* 링크에 사용자가 `Alt` or `Ctrl` + 접근 키를 입력하여 얻을 수 있는 키보드 단축키를 할당하여 쉬운 네비게이션을 제공합니다. 정확한 키 조합은 플래폼에 따라 다릅니다.


```html
<a href="somepage.html" accesskey="s">Some page</a>
```

링크 넘어가기(Skip Links)
-------------------

탭을 지원하기 위하여, 당신은 유저가 당신의 웹 페이지 모음으로 넘어갈 수 있는 링크를 제공할 수 있습니다. 당신은 아마도 다른 사람이 네비게이션 링크를 따라 점프하기를 원할 것입니다. 그렇게 함으로써, 페이지의 메인 내용을 읽을 수 있습니다.


```html
<header>
  <h1>The Heading</h1>
  <a href="#content">Skip to content</a>
</header>

<nav>
  <!-- navigation stuff -->
</nav>

<section id="content">
  <!--your content -->
</section>
```
기본 소프트웨어 설치하기
=============

* Overview: Getting started with the web
* 다음

기본 소프트웨어 설치하기에서는 간단한 웹 개발을 하기 위해 어떤 도구가 필요하고, 어떻게 설치할 수 있는지 보여드립니다.

전문가들이 사용하는 도구는 뭔가요?
-------------------

* **컴퓨터**. 당연한 얘기로 들리겠지만, 여러분 중 누군가는 이 글을 휴대폰이나 도서관의 컴퓨터로 읽고 계실겁니다. 진지한 웹 개발을 위해서는 데스크탑 컴퓨터(윈도우, 맥, 또는 리눅스)에 투자하는것이 좋습니다.
* 코드 작성을 위한 **텍스트 편집기**. 순수 텍스트 편집기(Sublime, Brackets, Atom, Visual Studio Code 등) 또는 하이브리드 편집기(Dreamweaver, WebStorm 등)를 사용하시면 됩니다. 사무용 문서 편집기는 웹 브라우저의 렌더링 엔진을 방해하는 숨겨진 요소를 사용하기 때문에 코드 작성 용도로는 적합하지 않습니다.
* 코드를 테스트하기 위한 **웹 브라우저**. 현재 가장 널리 사용되는 브라우저로는 Firefox, Chrome, Opera, Safari, Internet Explorer, 그리고 Microsoft Edge가 있습니다. 또, 여러분의 웹 사이트가 휴대용 장치와 오래된 브라우저(IE 8~10 등)에서는 어떻게 동작하는지도 시험해보셔야 합니다.
* 웹 페이지를 위한 이미지를 만들 수 있는 **이미지 편집기.** GIMP, Paint.NET, Photoshop 등이 있습니다.
* 서버 파일 관리, 프로젝트 협업, 코드와 자원 공유, 수정 충돌 방지를 위한 **버전 관리 시스템**. 지금은 Git이 제일 대중적인 버전 관리 시스템이며 Git 기반의 코드 공유 서비스인 GitHub도 매우 유명합니다.
* 오래 된 웹 호스팅 계정에 파일을 올리기 위한 **FTP 프로그램**. 지금은 점점 Git이 FTP를 대체하고 있습니다. (S)FTP 프로그램은 Cyberduck, Fetch, FileZilla 외에도 무수히 많습니다.
* 코드 압축과 테스트 등 반복 작업을 자동으로 수행하기 위한 **자동화 시스템**. Grunt나 Gulp 등이 있습니다.
* 흔히 쓰이는 기능의 코드 작성 속도를 높히기 위한 템플릿, 라이브러리, 프레임워크, 기타 등등.
* 이 밖에도 더 많은 도구들을 써요!
지금 당장 필요한 도구는 뭔가요?
------------------

전문가가 사용하는 리스트가 두렵게 다가올지도 모르지만, 다행히도 여러분은 저런 대부분의 것들을 모르더라도 웹 개발을 시작하실 수 있습니다. 이 글을 통해 여러분이 최소한의 도구(텍스트 편집기와 최신 웹 브라우저 같은)를 마련할 수 있도록 할 것입니다.

### 텍스트 편집기 설치하기

지금도 기본적인 텍스트 편집기는 아마 갖고 계실겁니다. Windows는 기본으로 메모장을, macOS는 TextEdit을 포함하고 있습니다. Linux는 배포판마다 다르지만, Ubuntu는 gedit을 가지고 있습니다.

웹 개발을 위해서라면 메모장이나 TextEdit보다는 좋은걸 써야 할겁니다. Brackets를 추천드립니다. 무려 무료인데다가(쫭쫭) 실시간 미리보기와 코드 힌트도 제공하기 때문이에요!

### 최신 웹 브라우저 설치하기

이제, 코드를 테스트할 데스크탑 웹 브라우저를 몇 가지 설치할겁니다. 다음 목록에서 여러분의 운영체제를 고른 후 원하시는 브라우저의 링크로 들어가 설치하세요.

* Linux: Firefox, Chrome, Opera.
* Windows: Firefox, Chrome, Opera, Internet Explorer, Microsoft Edge (Window 10은 Edge를 탑재하고 있습니다. Windows 7 이상에선 Internet Explorer 11을 설치할 수 있습니다. 이외에는 다른 브라우저를 설치해야 합니다)
* Mac: Firefox, Chrome, Opera, Safari (Safari는 iOS와 macOS에 탑재되어 있습니다)

다음으로 진행하기 전에, 테스트를 위해 최소 두 개 이상의 브라우저를 설치해야 합니다.

### 로컬 웹 서버 설치하기

어떤 예제는 제대로 작동하려면 웹 서버가 필요합니다. 로컬 테스트 서버 설치하기에서 설치하는 방법을 알아보세요!

* Overview: Getting started with the web
* 다음
Node server without framework
=============================

소개
--

물론 Node 는 서버를 만들고 실행하는데 도움을 주는 많은 프레임워크가 있습니다, 예를 들면:

* Express: 가장 많이 사용하는 프레임워크
* Total: 올인원 통합 프레임워크로, 다른 프레임워크나 모듈에 의존성이 없습니다.

하지만, 모든 것에 꼭 맞는 사이즈가 없듯이, 개발자들은 어떤 다른 의존성 없이 스스로 서버를 만들어야 할 때가 있습니다.

예제
--

다음은 짧고 간단한 정적 파일 nodejs 서버입니다.


```js
var http = require("http");
var fs = require("fs");
var path = require("path");

http
  .createServer(function (request, response) {
    console.log("request ", request.url);

    var filePath = "." + request.url;
    if (filePath == "./") {
      filePath = "./index.html";
    }

    var extname = String(path.extname(filePath)).toLowerCase();
    var mimeTypes = {
      ".html": "text/html",
      ".js": "text/javascript",
      ".css": "text/css",
      ".json": "application/json",
      ".png": "image/png",
      ".jpg": "image/jpg",
      ".gif": "image/gif",
      ".svg": "image/svg+xml",
      ".wav": "audio/wav",
      ".mp4": "video/mp4",
      ".woff": "application/font-woff",
      ".ttf": "application/font-ttf",
      ".eot": "application/vnd.ms-fontobject",
      ".otf": "application/font-otf",
      ".wasm": "application/wasm",
    };

    var contentType = mimeTypes[extname] || "application/octet-stream";

    fs.readFile(filePath, function (error, content) {
      if (error) {
        if (error.code == "ENOENT") {
          fs.readFile("./404.html", function (error, content) {
            response.writeHead(404, { "Content-Type": "text/html" });
            response.end(content, "utf-8");
          });
        } else {
          response.writeHead(500);
          response.end(
            "Sorry, check with the site admin for error: " +
              error.code +
              " ..\n",
          );
        }
      } else {
        response.writeHead(200, { "Content-Type": contentType });
        response.end(content, "utf-8");
      }
    });
  })
  .listen(8125);
console.log("Server running at http://127.0.0.1:8125/");
```
Server-side website programming first steps
===========================================

서버사이드 프로그래밍 모듈에서 우리는 서버사이드 프로그래밍에 대해 몇 가지 근본적인 질문을 합니다. — "그게 뭐야?", "클라이언트 사이드 프로그래밍과 뭐가 달라?", "왜 쓸만해?". 여기서 우리는 여러분의 첫 웹사이트를 만드는 데에 필요한 가장 적합한 프레임워크를 어떻게 정하는 지에 대한 적절한 지도와 함께 가장 인기있는 서버 사이드 웹 프레임워크들의 개요를 제공합니다. 끝으로 높은 수준의 웹 서버 보안에 대한 소개를 제공합니다.

전제 조건
-----

이 모듈을 시작하기 전에, 서버사이드 프로그래밍이나 혹은 사실상 다른 어떠한 프로그래밍 지식도 필요 하지 않습니다.

"웹이 어떻게 동작하는가" 를 이해해야 합니다. 다음의 토픽들을 우선 읽어보는 것을 추천합니다.

* 웹 서버란 무엇인가 (What is a web server)
* 웹사이트를 만들기 위해서는 어떤 소프트웨어가 필요한가 (What software do I need to build a website?)
* 어떻게 웹 서버에 파일을 업로드 하는가 (How do you upload files to a web server?)

이러한 기본적인 이해가 있다면, 이 섹션의 모듈들을 공부할 준비가 되었습니다.

가이드
---

서버 사이드에 대한 소개 (Introduction to the server side)

MDN의 초급자 서버 사이드 프로그래밍 코스에 오신 것을 환영합니다! 첫 글에서는, '서버사이드란 무엇인가', '클라이언트 사이드 프로그래밍과 어떤 점이 다른가', 그리고 '왜 유용한가' 와 같은 질문들에 답하며 서버 사이드 프로그래밍을 상위 단계부터 살펴봅니다. 이 글을 읽고 난 후, 서버 사이드 코딩을 통해 웹사이트에 추가적인 작업들을 할 수 있다는 것을 이해하게 될 것입니다.

클라이언트 - 서버 개요 (Client-Server overview)

당신이 서버 사이드 프로그래밍의 목적과 잠재적인 이점에 대해 알고 있기 때문에, 이제 서버가 브라우저로 부터 "동적 요청"을 받으면 어떤 일이 일어나는 지를 자세히 알아보고자 합니다. 대부분의 웹사이트 서버 사이드 코드는 요청 및 응답을 비슷한 방식으로 다루기 때문에, 이것은 당신이 코드를 짤 때 무엇을 해야 하는지 이해하도록 도울 것입니다.

서버 사이드 웹 프레임워크 (Server-side web frameworks)

마지막 글은 서버 사이드 웹 어플리케이션이 웹 브라우저의 요청에 응답하기 위해 무엇을 해야하는 지를 보여줍니다. 이제 웹 프레임워크가 어떻게 이러한 일들을 간소화 하는지 보여주고, 당신이 첫 서버 사이드 웹 어플리케이션에 맞는 프레임워크를 선택하도록 도울 것입니다.

웹사이트 보안 (Website security (en-US))

웹사이트 보안은 웹사이트 설계 및 이용의 모든 측면에서 주의를 필요로 합니다. 이 입문 글이 당신을 웹사이트 보안 전문가로 만들어주지는 않지만, 가장 일반적인 위협들로 부터 웹 어플리케이션을 튼튼하게 만드는 첫 중요한 단계들을 이해하게끔 도울 것입니다.

평가
--

이 "개요" 모듈은 아직 어떠한 코드도 보여주지 않았기 때문에 어떠한 평가도 없습니다. 우리는 현 시점에서, 당신이 서버 사이드 프로그래밍을 통해 어떤 기능들을 보여줄 수 있는지 제대로 이해하고, 당신의 첫 웹사이트를 만드는데에 어떤 서버 사이드 웹 프레임 워크를 사용할 지 결정했기를 바랍니다.
Express 웹 프레임워크 (Node.js/JavaScript의 활용)
========================================

Express는 JavaScript로 작성되고 Node.js 런타임 환경에서 구동되는 인기 있는 웹 프레임워크입니다. 이 장에서는 Express 프레임워크의 몇 가지 장점과 개발환경 설치 방법, 웹 개발과 배포작업의 방법을 다룹니다.

알아야할 것들
-------

이 장의 내용은 Server-side 웹 프로그래밍과 웹 프레임워크에 대한 이해가 필요합니다. 잘 모르겠다면 Server-side website programming first steps 을 먼저 확인해보세요. 일반적인 프로그래밍 컨셉과 JavaScript 의 지식이 요구되지만, 핵심까지 세세하게 알 필요는 없습니다.

**참고:** 여기서는 클라이언트 측에서의 자바스크립에 관한 많은 유용한 자료들을 이용할 수 있다. JavaScript, JavaScript Guide, JavaScript Basics, JavaScript (한 번 배워보자). JavaScript의 핵심과 컨셉은 Node.js를 이용한 서버측 개발과 같으므로, 여기의 자료들을 이용하는 게 좋을 것이다. Node.js 는HTTP서버를 구축하고 파일 시스템에 접근하는 등의 브라우저가 필요없는 환경에서에서 유용한 기능을 제공하는 additional APIs를 제공하지만, 브라우저나 DOM에서 작동되는 JavaScript API는 지원하지 않는다.

다음 목차에서는 Node.js와 Express 그리고 인터넷과 책에서의 방대한 좋은 자료들에 있는 정보들을 알려준다. 이들은 How do I get started with Node.js (StackOverflow) 나 What are the best resources for learning Node.js? (Quora)에 참고해보자

목차
--

Express/Node introduction (en-US)

처음으로 Express에 배우는 이 곳에서는 "Node가 뭐지?", "Express는 뭐지?"의 물음에 답하고, Express 웹 프레임워크의 전반적인 사항에 대해 알아볼 것이다. 주된 내용의 뼈대를 완성하고, Express 어플리케이션을 하나하나씩 배워볼 것이다. (하지만, 이 곳에서는 아직 어디서 테스팅이 이루어질 지 개발 환경등에서는 다루지 않을 것이다.).

Setting up a Node (Express) development environment (en-US)

이제 Express가 어디에 이용되는지 알아볼 것이다. Windows, Linux(Ubuntu), Mac OS X에서 Node/Express의 개발환경을 구축하기 위한 방법도 살펴볼 것이다. 운영체제에 관계없이, 여기서는 Express 개발을 시작하기위해서 어떤 것이 필요한지도 알려준다.

Express Tutorial: The Local Library website (en-US)

실질적인 튜토리얼에 해당하는 이번 수업에서는 어떤 것을 배우고 차후 수업에 필요한 "로컬 라이브러리"에서의 웹사이트의 전반적인 개요도 알아본다.

Express Tutorial Part 2: Creating a skeleton website (en-US)

여기서는 웹사이트의 뼈대를 구성해 나갈 것이다. 웹사이트의 뼈대란 사이트의 사이트맵, 템플릿 및 데이터베이스등을 말하므로 이를 만들어볼 것이다.

Express Tutorial Part 3: Using a Database (with Mongoose) (en-US)

여기서는 간단하게나마 Node/Express에 필요한 데이터베이스의 개요에 대해 소개할 것이다. 그리고 로컬의 웹사이트의 DB에 접근하기 위해 Mongoose를 사용하는 법도 알아본다. DB에서의 스키마와 모델이 어떻게 정의되는지, 필드의 타입과 기본적인 유효성에 대해서도 알아본다. 또한, 짧게나마 모델 데이터를 접근하는 주된 방법도 알아본다.

Express Tutorial Part 4: Routes and controllers (en-US)

이 수업에서는 *LocalLibray* 웹사이트에 사용하기 위해 "더미" 핸들러 함수를 통한 라우터(URL 핸들링 코드)에 대해 배운다. 여러분의 라우팅 핸들링 코드를 사용할 수 있는 모듈 구조를 가지고 있으며, 다음 장에서 실제로 핸들러 기능을 확장할 수 있게 된다. 또한, Express에서 사용가능한 모듈 형식의 라우팅에 대해 쉽게 이해할 수 있을 것이다.

Express Tutorial Part 5: Displaying library data (en-US)

자, 이제 웹사이트에 책이나 데이터들을 표시할 페이지를 추가할 수 있다. 페이지에는 사이트에 관련된 자세한 부분과 리스트 및 모델 타입들이 얼마나 많이 기록되는지에 관한 홈 페이지가 포함되어 있다. 따라서 우리들은 데이터베이스에서 기록을 얻고 템플릿을 사용하는 데 실질적인 경험을 가질 수 있다.

Express Tutorial Part 6: Working with forms (en-US)

이 수업에서는 Pug를 사용해서 어떻게 Express에서 HTML Forms (en-US) 이 사용되는지 보여주고, 특히 데이터베이스에서 폼을 작성하고 업데이트하고 지우기 위해 사용하는 방법에 대해 배울 것이다.

Express Tutorial Part 7: Deploying to production (en-US)

이제 꽤 훌륭한 로컬라이브러리 웹사이트 만들 수 있으며 , 웹 서버에 업로드 함으로서 여러 사람들이 인터넷을 통해 접근할 수 있게 만들 수 있다. 이 수업은 전반적으로 웹 사이트를 배포하기 위해 호스트와 연결하는 등을 배우고, 실제 서비스를 하기위해 준비해야할 것들을 알려 준다.

튜토리얼 추가하기
---------

**자습서의 끝입니다.** (지금은 말이죠). 만약 이 자습서의 내용을 보충하고 싶으시다면 아래와 같은 주제를 해 주시면 좋을 것 같네요:

* 세션 이용하기
* 사용자 인증
* 사용자 권한 부여 및 허가
* Express 웹 어플리케이션 테스트
* Express 웹 어플리케이션 보안

그리고 평가 작업도 있으면 정말 좋을 것 같아요!
Django 튜토리얼: 지역 도서관 웹사이트
========================

* 이전
* Overview: Django
* 다음

이번은 실전 튜토리얼 시리즈의 첫번째 파트로서 당신이 배울 내용을 설명하고, 이어지는 튜토리얼 시리즈에서 개발하고 개선시켜볼 "지역 도서관" 예제 웹사이트에 대한 개요를 제공한다.

|  |  |
| --- | --- |
| 사전학습: | Django 소개
 파트를 읽으세요. 이어지는 파트를 위해서는
 Django개발 환경 설치하기
 파트도 필요합니다.
  |
| 학습목표: | 
 이 튜토리얼에서 사용될 예제 어플리케이션을 소개하고, 여기서 논의될
 토픽들의 범위에 대해 이해하기
  |

개요
--

MDN "로컬 라이브러리" 장고 튜토리얼에서 오신 것을 환영합니다. 여기에서는 , "로컬 라이브러리" 카탈로그를 운영하는데 사용될 수 있는 웹사이트를 개발할 것이다.

이 튜토리얼 시리즈는 아래 내용을 다룬다:

* 웹 애플리케이션의 골격을 만들기 위해 장고 도구 사용하기
* 개발 서버 시작하기와 끝내기
* 애플리케이션 데이터의 틀이 되는 모델 생성하기
* 데이터를 입력하기 위해서 장고 관리자(admin) 사이트 사용하기
* 여러가지 요청에 따른 특정 데이터를 가져오는 뷰(view)와 브라우저상에서 이 데이타를 볼수 있도록 HTML로 렌더링하는 템플릿을 생성하기
* 여러가지 URL 패턴과 특정한 뷰를 연결하는 맵퍼(mappers) 만들기
* 사이트 동작과 접속을 통제하기 위한 유저 인증(authorization) & 세션 추가하기
* 폼으로 작업하기
* 앱을 테스트할 코드 작성하기
* 장고의 보안도구를 효과적으로 사용하기
* 애플리케이션을 운영환경에 배포하기

여러분은 이 토픽들 중 일부는 이미 배웠고, 나머지는 가볍게 경험했다. 이 튜토리얼 시리즈를 완료하면, 여러분은 간단한 장고 앱을 혼자서 충분히 개발할 수 있다.

LocalLibrary 웹사이트
-----------------

*LocalLibrary는 이 튜토리얼 시리즈에서 우리가 만들고 개선시켜나갈 웹사이트의 이름이다.* 이름에서 예상되듯이, 이용자들이 대여 가능한 책을 찾아보고 사용자 계정을 관리할 수 있는, 작은 지역 도서관을 위한 온라인 도서목록을 제공하는 것이 목적이다.

이 예제는, 우리가 필요에 따라 크게 혹은 작게 확장할 수 있고, 대부분은 장고의 특성을 보여줄 수 있도록 아주 신중하게 선택된 예제이다. 더욱 중요한 것은 이 예제는 장고 웹 프레임워크의 가장 중요한 기능들을 경험해 보도록 안내된 경로를 제공한다:

* 처음 몇몇의 튜토리얼에서, 사용자가 어떤 책을 이용할 수 있는지 찾아볼 수 있도록, 간단한 둘러보기 전용 도서관 기능을 정의할 것이다. 이 내용은 거의 모든 웹사이트에서 일반적으로 제공되는 동작(데이타베이스에서 내용을 읽고 보여주는 것)을 탐색해볼 수 있도록 해줄 것이다.
* 튜토리얼을 좀 더 진행해 가면서, 도서관 예제는 좀 더 고급의 장고 기능을 보여줄 수 있도록 자연스럽게 확장된다. 예를 들면, 사용자가 책을 예약하도록 기능을 확장할 수 있고 이것을 이용해 폼을 사용하는 방법과 사용자 인증을 지원하는 방법을 보여줄 수 있다.

이것은 매우 확장성있는 예제이지만, 다음과 같은 이유로 ***Local**Library(Local에 강조)로 이름을 지었다. 그 이유는, 당신이 장고 개발을 빠르게 착수할 수 있도록, 필요한 최소한의 정보만 보여주고자 의도한 것이다. 결과적으로 책, 책의 판본, 저자및 다른 Key 정보를 저장할 것이다. 하지만 그외의 일반적인 도서관이 추가로 저장할만한 정보는 저장하지 않을 것이며, 여러개의 도서관 사이트를 지원하거나, "커다란 도서관"을 위한 기능은 제공하지 않을것이다.*

개발중에 막혔어요, 소스코드는 어딨죠?
---------------------

튜토리얼을 진행하면서, 각 포인트마다 복사해서 붙여넣기할 수 있는 적절한 토막 코드가 제공될 것이다. 또한 당신이 스스로 (약간의 안내문과 함께) 도전해볼 수 있는 부분도 있을 것이다.

개발중에 진행이 어렵다면, 여기 Github에 완전히 개발된 버전의 웹사이트 소스코드를 참고할 수도 있다.

요약
--

LocalLibrary 웹사이트와 당신이 앞으로 배울 내용에 대해 좀 더 알게되었다. 이제 우리 예제를 담을 뼈대 프로젝트(skeleton project)를 생성해볼 차례이다.

* 이전
* Overview: Django
* 다음
WebAssembly
===========

**`WebAssembly`** JavaScript 객체는 모든 WebAssembly에 관계된 기능의 네임스페이스로서 역할합니다.

대부분의 전역객체와 다르게, `WebAssembly`는 생성자가 아닙니다 (함수 객체가 아닙니다). 비슷한 예로 수학적인 상수나 함수들을 담고있는 `Math` 객체나, 국제화 관련 생성자나 언어에 민감한 다른 함수들을 담고있는 `Intl` (en-US) 등이 있습니다.

설명
--

`WebAssembly` 객체의 기본적인 사용례는 다음과 같습니다:

* `WebAssembly.instantiate()` 함수를 사용해서 웹어셈블리 코드 불러오기.
* `WebAssembly.Memory()`/`WebAssembly.Table()` 생성자로 새 메모리와 테이블 인스턴스 생성하기.
* `WebAssembly.CompileError()`/`WebAssembly.LinkError()`/`WebAssembly.RuntimeError()` 생성자로 웹어셈블리에서 발생하는 에러에 대한 처리장치 만들기.
메서드
---

`WebAssembly.instantiate()`

WebAssembly 코드를 컴파일하고 인스턴스화하여 `Module`과 첫 번째 `Instance`를 반환하는 기본 API입니다.

`WebAssembly.instantiateStreaming()`

스트리밍 된 원본 소스에서 직접 WebAssembly 모듈을 컴파일하고 인스턴스화하여 `Module`과 첫 번째 `Instance`를 반환합니다.

`WebAssembly.compile()`

WebAssembly 바이너리 코드에서 `WebAssembly.Module`을 컴파일하여 인스턴스화를 별도의 단계로 남겨 둡니다.

`WebAssembly.compileStreaming()`

`WebAssembly.Module`을 스트림 된 원본 소스에서 직접 컴파일하여 인스턴스화를 별도의 단계로 남겨 둡니다.

`WebAssembly.validate()`

바이트가 유효한 WebAssembly 코드 (`true`)인지 아닌지 (`false`)를 반환하여 WebAssembly 바이너리 코드의 지정된 입력 된 배열을 확인합니다.

생성자
---

`WebAssembly.Global()`

Creates a new WebAssembly `Global` object.

`WebAssembly.Module()`

Creates a new WebAssembly `Module` object.

`WebAssembly.Instance()`

Creates a new WebAssembly `Instance` object.

`WebAssembly.Memory()`

Creates a new WebAssembly `Memory` object.

`WebAssembly.Table()`

Creates a new WebAssembly `Table` object.

`WebAssembly.CompileError()`

Creates a new WebAssembly `CompileError` object.

`WebAssembly.LinkError()`

Creates a new WebAssembly `LinkError` object.

`WebAssembly.RuntimeError()`

Creates a new WebAssembly `RuntimeError` object.

예제
--

다음 예제 (GitHub의 instantiate-streaming.html 데모보기 및 라이브보기)에서는 기본 소스에서 .wasm 모듈을 직접 스트리밍 한 다음 컴파일하고 인스턴스화합니다. 프로미스는 `ResultObject`로 충족됩니다. `instantiateStreaming()` 함수는 `Response` 객체에 대한 promise를 받아들이므로 직접 `fetch()` 호출에 전달할 수 있습니다.


```js
var importObject = { imports: { imported\_func: (arg) => console.log(arg) } };

WebAssembly.instantiateStreaming(fetch("simple.wasm"), importObject).then(
  (obj) => obj.instance.exports.exported\_func(),
);
```


그런 다음 ResultObject의 인스턴스 구성에 액세스하고 그 안에 있는 `exported_func`을 호출합니다.

명세서
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # webassembly-namespace |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

바깥 고리
-----

* 웹어셈블리 개요 페이지
* 웹어셈블리의 컨셉
* Using the WebAssembly JavaScript API
Exported WebAssembly functions
==============================

Exported WebAssembly functions는 JavaScript에서 WebAssembly 함수를 나타내는 방법입니다. 여기서는 이 함수들에 대해 더 자세히 설명합니다.

Exported... 뭐요?
---------------

내보낸 WebAssembly 함수는 기본적으로 JavaScript에서 WebAssembly 함수를 나타내는 JavaScript 래퍼입니다. 호출 할 때 배경에서 백그라운드로 액티비티를 가져와 wasm이 작업 할 수있는 유형 (예 : JavaScript 숫자를 Int32로 변환)으로 변환하고, 인수가 wasm 모듈 내부의 함수로 전달되고, 함수가 호출되며, 결과가 변환되어 JavaScript로 다시 전달됩니다.

두 가지 방법으로 내 보낸 WebAssembly 함수를 검색 할 수 있습니다.

* 기존 테이블에서 `Table.prototype.get()` (en-US)을 호출합니다.
* `Instance.exports` (en-US)를 통해 wasm 모듈 인스턴스에서 내보낸 함수에 액세스합니다.

어느 쪽이든, 기본 함수에 대해 동일한 종류의 래퍼를 사용합니다. JavaScript의 관점에서 볼 때, 모든 wasm 함수가 JavaScript 함수이기도하지만 - 내보낸 wasm 함수 객체 인스턴스에 의해 캡슐화되며 액세스 할 수있는 제한된 방법이 있습니다.

An example
----------

예제를 보겠습니다. (GitHub의 table-set.html로 찾을 수 있으며 실시간으로 보기(running live also)도 참고하시고. wasm text representation 표현도 확인하세요).


```js
var otherTable = new WebAssembly.Table({ element: "anyfunc", initial: 2 });

WebAssembly.instantiateStreaming(fetch("table.wasm")).then((obj) => {
  var tbl = obj.instance.exports.tbl;
  console.log(tbl.get(0)()); // 13
  console.log(tbl.get(1)()); // 42
  otherTable.set(0, tbl.get(0));
  otherTable.set(1, tbl.get(1));
  console.log(otherTable.get(0)());
  console.log(otherTable.get(1)());
});
```


`WebAssembly.Table`생성자를 사용하여 JavaScript에서 테이블 (`otherTable`)을 만든 다음 `WebAssembly.instantiateStreaming()`를 메서드를 사용하여 table.wasm를 우리가 만든 페이지에 로드합니다.

그런 다음 모듈에서 함수를 내보내고 `tbl.get()` (en-US)을 통해 참조하는 함수를 검색하고 각 함수를 호출 한 결과를 콘솔에 기록합니다. 그런 다음 `set()`을 사용하여 `otherTable` 테이블에 tbl 테이블과 동일한 함수에 대한 참조가 포함되도록합니다.

이를 증명하기 위해 우리는 이러한 참조를 `otherTable`에서 다시 검색하여 그 결과를 콘솔에도 출력하므로 동일한 결과를 얻을 수 있습니다.

They are real functions
-----------------------

앞의 예에서 각 `Table.prototype.get()` (en-US) 호출의 반환 값은 내 보낸 WebAssembly 함수입니다. 이전에 우리가 이야기했던 대로입니다.

이것들은 WebAssembly 함수에 대한 래퍼 (wrapper)가 될뿐만 아니라 실제 JavaScript 함수임을 주목할 필요가 있습니다. 위의 예제를 WebAssembly-supporting browser에 로드하고 콘솔에서 다음 줄을 실행하세요.


```js
var testFunc = otherTable.get(0);
typeof testFunc;
```


그러면 결과 함수(`function`)가 반환됩니다. 그런 다음 JavaScript에서 `call()`, `bind()` 등의 다른 functions를 수행 할 수 있는 기능을 수행 할 수 있습니다. `testFunc.toString()`은 흥미로운 결과를 반환합니다.


```js
function 0() {
    [native code]
}
```


이렇게하면 wrapper-type의 본질에 대해 더 많이 알 수 있습니다.

exported WebAssembly functions에 대해 알아야 할 몇 가지 사항은 다음과 같습니다.

* length 속성은 wasm 함수 시그니처에 선언 된 인수의 개수입니다.
* name 속성은 wasm 모듈에서 함수의 인덱스에 대한 `toString()` 결과입니다.
* i64 유형 값을 사용하거나 가져 오는 내 보낸 wasm 함수를 호출하려고하면 JavaScript는 현재 i64를 정확하게 표현할 방법이 없기 때문에 현재 오류가 발생합니다. 이후에 개선 될 것입니다. - 새로운 int64 유형이 wasm에 의해 사용될 수 있도록 향후 표준으로 고려되고 있습니다.
Converting WebAssembly text format to wasm
==========================================

WebAssembly에는 S- expression 기반의 텍스트 표현, 텍스트 편집기, 브라우저 개발자 도구 등에서 노출되도록 고안된 중간 양식이 있습니다.이 기사에서는 어떻게 작동하는지, 텍스트 형식 파일을 `.wasm` 어셈블리 형식으로 변환할 수 있는 도구를 사용하는 방법에 대해 설명합니다.

**참고:** 텍스트 형식 파일은 대개 `.wat` 확장자로 저장됩니다. 때로는 `.wast`도 사용됩니다.이 파일은 변환 할 때 `.wast`으로 변환되지 않는 파일에 허용되는 추가 테스트 명령을 포함하는 파일을 가리 킵니다 - assertions 등

A first look at the text format
-------------------------------

이 간단한 예제를 보자 - 다음 프로그램은 `imports`라는 모듈에서 `imported_func`라는 함수를 가져오고 `exported_func`라는 함수를 내 보냅니다.


```js
    (module
      (func $i (import "imports" "imported\_func") (param i32))
      (func (export "exported\_func")
        i32.const 42
        call $i
      )
    )
```


WebAssembly 함수 `exported_func`는 Google 환경에서 사용하기 위해 내보내집니다 (예 : WebAssembly 모듈을 사용하는 웹 앱). 이 함수를 호출하면 `imported_func`라는 가져온 JavaScript 함수가 호출됩니다.이 함수는 매개 변수로 제공된 값 (42)으로 실행됩니다.

Converting the text .wat into a binary .wasm file
-------------------------------------------------

위의 `.wat` 텍스트 표현 예제를 `.wasm` 어셈블리 형식으로 변환 해 봅시다.

1. 시작하려면 `simple.wat` 라는 텍스트 파일 안에 위의 목록을 복사하십시오.
2. 이 텍스트 표현을 우리가 사용하기 전에 브라우저가 실제로 읽는 어셈블리 언어로 어셈블해야합니다. 이를 위해 wabt 도구를 사용할 수 있습니다.이 도구에는 WebAssembly의 텍스트 표현과 wasm을 변환하는 컴파일러가 포함되어 있으며 그 반대의 경우도 가능합니다. https://github.com/webassembly/wabt로 이동 -이 페이지의 지침에 따라 도구를 설정하십시오.
3. 일단 도구를 만들었 으면 시스템 `PATH`에 `/wabt/out/clang/Debug` 디렉토리를 추가하십시오.
4. 그런 다음, wat2wasm 프로그램을 실행하여 입력 파일의 경로와 `-o` 매개 변수 다음에 출력 파일의 경로를 전달하십시오.

```bash
wat2wasm simple.wat -o simple.wasm
```


wasm을 `.wasm` 어셈블리 코드가 들어있는 `simple.wasm` 파일로 변환합니다.

**참고:** wasm2wat 도구를 사용하여 어셈블리를 다시 텍스트 표현으로 변환 할 수도 있습니다. 예 : `wasm2wat simple.wasm -o text.wat`.

Viewing the assembly output
---------------------------

출력 파일은 어셈블리 기반이므로 일반 텍스트 편집기에서는 볼 수 없습니다. 그러나 wat2wasm 도구의 `-v` 옵션을 사용하여 볼 수 있습니다. 아래 코드를 실행해 보세요:


```bash
wat2wasm simple.wat -v
```


이렇게하면 다음과 같은 방법으로 터미널에 출력을 줄 수 있습니다.

![several strings of binary with textual descriptions beside them. For example: 0000008: 01 ; section code ](/ko/docs/WebAssembly/Text_format_to_Wasm/assembly-output.png)

See also
--------

* Understanding WebAssembly text format — 텍스트 형식 구문에 대한 자세한 설명.
* Compiling from C/C++ to WebAssembly — Binaryen / Emscripten과 같은 도구는 소스 코드를 wasm으로 컴파일하고 JavaScript 컨텍스트에서 모듈을 실행하는 데 필요한 API 코드를 만듭니다. 그들을 사용하는 방법에 대해 자세히 알아보십시오.
* Using the WebAssembly JavaScript API — WebAssembly API 코드가 작동하는 방식에 대해 자세히 알고 싶다면이 내용을 읽으십시오.
* Text format — WebAssembly GitHub repo에서 텍스트 형식에 대한 자세한 설명.
* wast-loader — 이 모든 것을 처리하는 WebPack 용 로더입니다.
WebAssembly.validate()
======================

**`WebAssembly.validate()`** 함수는 바이트가 유효한 wasm 모듈을 형성하는지 (`true`) 또는 생성하지 않는지 (`false`)를 반환하여 WebAssembly 바이너리 코드의 지정된 typed array의 유효성을 검사합니다.

Syntax
------
```

WebAssembly.validate(bufferSource);
```
### Parameters

`bufferSource`

유효성을 검사 할 WebAssembly 바이너리 코드가 들어있는 typed array 또는 ArrayBuffer입니다.

### Return value

`bufferSource`가 유효한 wasm 코드 (`true`)인지 아닌지 (`false`)를 지정하는 부울입니다.

### Exceptions

`bufferSource`가 typed array이나 ArrayBuffer가 아닌 경우 `TypeError`가 발생합니다.

Examples
--------

다음 예제 (validate.html source code 참조 및 see it live)는 .wasm 모듈을 가져 와서 형식화 된 배열로 변환합니다. 그런 다음 `validate()` 메서드를 사용하여 모듈이 유효한지 확인합니다.


```js
fetch("simple.wasm")
  .then((response) => response.arrayBuffer())
  .then(function (bytes) {
    var valid = WebAssembly.validate(bytes);
    console.log(
      "The given bytes are " + (valid ? "" : "not ") + "a valid wasm module",
    );
  });
```

명세서
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-webassembly-validate |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* WebAssembly overview page
* WebAssembly concepts
* Using the WebAssembly JavaScript API
WebAssembly.compile()
=====================

\*\*`WebAssembly.compile()`\*\*함수는 WebAssembly 바이너리 코드에서 `WebAssembly.Module`을 컴파일합니다. 이 함수는 모듈을 인스턴스화하기 전에 컴파일해야하는 경우에 유용합니다. 그렇지 않으면 `WebAssembly.instantiate ()` 함수를 사용해야합니다.

Syntax
------


```js
WebAssembly.compile(bufferSource);
```

### Parameters

*bufferSource*

컴파일 할 .wasm 모듈의 이진 코드가 들어있는 typed array 또는 ArrayBuffer입니다.

### Return value

`Promise`는 컴파일 된 모듈로 표현된 `WebAssembly.Module` 객체로 반환됩니다.

### Exceptions

* `bufferSource`가 typed array가 아니면 `TypeError`가 발생합니다.
* 컴파일에 실패하면 promise는 `WebAssembly.CompileError`와 함께 reject가 반환됩니다.
Examples
--------

다음은 `compile()` 함수를 사용하여 simple.wasm 바이트 코드를 컴파일 하고 postMessage() (en-US)를 사용하여 worker에 보내는 예제입니다.


```js
var worker = new Worker("wasm\_worker.js");

fetch("simple.wasm")
  .then((response) => response.arrayBuffer())
  .then((bytes) => WebAssembly.compile(bytes))
  .then((mod) => worker.postMessage(mod));
```


**참고:** 대부분의 경우에 `WebAssembly.compileStreaming()`를 사용하는 것이 좋습니다. 이는 `compile()`보다 효율적이기 때문입니다.

명세서
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-webassembly-compile |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* WebAssembly overview page
* WebAssembly concepts
* Using the WebAssembly JavaScript API