recursal/MDN huggingface dataset:
JavaScript 구성요소
===============

이번 과정에서는 조건문, 반복문, 함수, 이벤트 등 일반적으로 발생하는 코드 종류를 중심으로 JavaScript의 중요한 기본 기능에 대해 설명합니다. 지금까지의 과정을 지나면서 여기서 다룰 내용을 살짝 보셨겠지만 좀 더 심도있게 다룰 것입니다.

#### 프론트엔드 웹 개발자가 되기를 생각해보고 계신가요?저희는 여러분의 목표를 향해 공부할 필요가 있는 모든 필수적인 정보를 담고 있는 코스를 준비해 놓았습니다.**시작하기**

필요한 사전 지식
---------

시작하기 전에, 기본적인 HTML과 CSS 지식을 알고 계셔야 하고, 또한 지난 모듈인 JavaScript 첫걸음을 학습하셔야 합니다.

**참고:** 여기 나온 코드를 작성하고 실행해 볼 수 없는 환경이라면 (태블릿, 스마트폰, 기타 장치), JSBin이나 Glitch에서 대부분의 예제를 시험해 볼 수 있습니다.

가이드
---

판단 내리기 — 조건문

어떤 프로그래밍 언어든 코드는 의사 결정을 내리고 입력 내용에 따라 작업을 수행해야 합니다. 예를 들어 게임에서 플레이어의 생명 수치가 0이면 게임이 종료됩니다. 날씨 앱에서는 아침에 해가 뜬 그림을 보여주고 밤에는 달과 별을 보여줍니다. 이 문서에서는 JavaScript에서 조건문이 작동하는 방법을 살펴 보겠습니다.

반복문

때때로 한 번보다 많이 연이어 작업을 완료해야 할 필요가 있습니다. 예를 들자면, 이름 목록을 순회하는 것입니다. 프로그래밍에서, 반복문은 이 작업을 대단히 잘 수행합니다. 여기서 우리는 JavaScript에서의 반복문 구조를 살펴볼 것입니다.

함수 — 코드 재사용

코딩에서의 또 다른 필수적인 개념은 **함수**입니다. **함수**를 사용하면 정의된 블록 안에 하나의 작업을 수행하는 코드 조각을 저장할 수 있고, 언제든지 그 코드 조각이 필요할 때 같은 코드를 여러번 입력하지 않고도 짧은 명령을 사용해 그 코드를 호출할 수 있습니다. 이 문서에서는 기본 문법, 어떻게 함수를 호출하고 정의하는지, 스코프, 그리고 매개변수와 같은 함수의 기본 개념을 탐사할 것입니다.

함수 만들기

그동안 배운 이론을 활용해, 이 문서에서는 실용적인 경험을 제공합니다. 여기서 여러분은 사용자 정의 함수를 만드는 연습을 할 것입니다. 그 과정에서, 우리는 또한 함수를 다루는 데 있어 유용한 추가적인 세부 사항을 알아볼 것입니다.

함수 반환 값

함수에 대해 알아야 할 마지막 필수 개념은 반환 값입니다. 어떤 함수는 완료 후에 중요한 값을 반환하지 않지만, 반환하는 함수도 있습니다. 그 값이 무엇인지, 어떻게 사용하는지, 그리고 어떻게 유용한 값들을 반환하는 사용자 정의 함수를 만드는지를 이해하는 것은 중요합니다.

이벤트 입문

이벤트란 여러분이 프로그래밍하고 있는 시스템에서 발생하는 동작이나 발생인데, 이는 시스템이 여러분에게 알려주므로 만약 원한다면 어떠한 방식으로 이에 응답할 수 있습니다. 예를 들어 만약 사용자가 웹페이지의 버튼을 클릭한다면, 여러분은 그 동작에 응답하여 인포메이션 박스를 표시함으로써 응답하기를 원할지도 모릅니다. 이 자미가 문서에서 우리는 이벤트에 대한 중요한 개념을 논하고, 이벤트가 브라우저에서 어떻게 동작하는지 살펴볼 것입니다.

평가
--

다음의 평가는 위의 가이드에서 다뤄진 기본 JavaScript에 대한 여러분의 이해를 테스트할 것입니다.

이미지 갤러리

이제 JavaScript의 기본 구성 요소를 살펴 보았으므로, 많은 웹 사이트에서 볼 수 있는 상당히 공통적인 항목인 JavaScript 기반 이미지 갤러리를 구현하며 반복문, 함수, 조건문, 그리고 이벤트에 대한 여러분의 지식을 테스트할 것입니다.

같이 보기
-----

Learn JavaScript

웹 개발자가 되려는 분들에게 훌륭한 자원입니다 — Learn JavaScript는 자동화된 평가에 의해 가이드되며, 짧은 강의와 상호작용을 하는 테스트를 가진 대화형 환경입니다. 처음 40개의 강의는 무료이며, 전체 코스는 한 번의 작은 지불로 이용 가능합니다.
JavaScript 객체 소개
================

JavaScript에서는 배열과같은 기능부터 JavaScript 위에 구축된 브라우저 APIs에 이르기까지 대부분의 것들이 객체입니다. 사용자는 관련된 함수들과 변수들을 효율적인 패키지로 추상화하거나 편리한 데이터 컨테이너로 작동하는 객체를 만들 수 있습니다. 언어에 대한 지식을 가지고 더 멀리 나아고자 한다면 JavaScript의 객체 기반의 본질을 이해하는 것이 중요하므로, 여러분을 돕기위해 이 모듈을 제공하였습니다. 여기에서는 객체 이론과 구문을 자세히 가르쳐드리며, 사용자 정의 객체를 만드는 방법도 알아볼 것입니다.

#### 프론트엔드 웹 개발자가 되고자 하시나요?목표를 달성하기 위한 모든 필수 정보가 들어있는 교육 과정을 준비했습니다.**시작하기**

사전 지식
-----

이 장을 읽기 전에, 여러분은 HTML 과 CSS 를 어느 정도 알고 있어야 합니다. 그렇지 않다면 HTML 소개 (en-US)와 CSS 소개를 먼저 읽고 오시기 바랍니다.

JavaScript 객체에 대해 자세히 알아보려면, 기본 문법에 대해 어느 정도 능숙해야 합니다. 이 장을 읽기 전에 JavaScript 첫걸음과 JavaScript 구성 요소를 먼저 읽어보시기를 바랍니다.

**참고:** 컴퓨터/태블릿/혹은 다른 디바이스 상에서 스스로 파일을 만들수 없는 환경이라면, JSBin 또는 Thimble 과 같은 온라인 코딩 프로그램을 이용하여 (거의 모든) 예제 코드를 테스트해 보실 수 있습니다.

가이드
---

객체 기본

JavaScript 객체 소개의 첫 장에서는, 기본적인 JavaScript 객체 문법을 볼 것이며, 이전 과정에서 이미 봐왔던 몇몇 JavaScript 특징들을 다시 들여다 볼 것입니다. 이를 통해 우리는 이전에 다루었던 많은 특징들이 사실상 객체였다는 사실을 알게 될 것입니다.

입문자를 위한 객체지향 JavaScript

가장 기본적인 것으로, 우리는 객체 지향 JavaScript(OOJS) 에 초점을 둘 것입니다. 이 글에서는 객체 지향 프로그래밍(OOP) 이론의 기본 관점을 보여주고, JavaScript 가 생성자함수를 이용하여 객체 클래스를 에뮬레이트 하는 방법과 객체 인스턴스를 생성하는 방법에 대해 탐구합니다.

객체 프로토타입

프로토타입은 JavaScript 객체가 또다른 객체로 특성을 상속시키기 위한 메커니즘이고, 그것들은 고전적인 객체 지향 프로그래밍 언어들의 상속 메커니즘과 다르게 작동합니다. 이 글에서는 그 다름을 탐구하고, 프로토타입 체인이 동작하는 방식을 설명하며 프로토타입의 속성이 기본 생성자들로 메소드를 추가하기 위해 사용되는 방법을 보여줍니다.

JavaScript에서의 상속

이제 OOJS 에 대한 대부분의 세부사항들에 대해서 설명이 되었으므로, 본 장에서는 "부모" 클래스로부터 특성을 상속받은 "자식" 오브젝트 클래스를 생성하는 방법을 보여줍니다. 뿐만 아니라, OOJS 를 언제 또는 어디서 사용하면 좋을 지에 대한 몇몇 조언도 기술되어있습니다.

JSON 데이터와 작업

JSON(JavaScript Object Notation) 은 JavaScript 객체 문법상의 구조화된 데이터를 표현하기 위한 표준 텍스트기반 포맷입니다. 그래서 주로 웹사이트 상에 데이터를 표현하고 전송하는 데 사용되고 있습니다(예를 들면, 웹페이지 상에 데이터를 디스플레이할 수 있도록 서버에서 클라이언트로의 데이터 전송). 이 글에서는 데이터에 접근하기 위해 JSON 을 파싱하고, 또 자신만의 JSON 을 작성하는 것처럼 JavaScript를 사용하여 JSON 과 연동할 필요가 있는 모든 것들을 보여드릴 것입니다.

객체 생성 실습 (en-US)

이전 글들에서 우리는 JavaScript 객체 이론과 문법 세부사항의 중요한 것들을 보았습니다. 본 장에서는 커스텀 JavaScript 객체를 생성하는 다양한 연습을 하면서 실용적인 예들을 깊이 다룹니다.

평가
--

Bouncing balls demo 에 기능들 추가 (en-US)

이 평가에서는 여러분이 이전 글의 bouncing balls demo 를 시작점으로 하여, 몇 가지 새롭고 재미있는 기능들을 추가하길 기대합니다.

같이 보기
-----

JavaScript 배우기

야심찬 웹 개발자를 위한 훌륭한 리소스 — 간단한 강의와 대화형 테스트, 자동화된 평가를 통해 대화형 환경에서 JavaScript를 배우십시오. 처음 40 개의 강의는 무료이며 전체 과정은 소액의 일회성 지불로 이용할 수 있습니다.
Client-side web APIs
====================

웹 사이트 또는 응용 프로그램 용 client-side JavaScript를 작성할때 API (응용 프로그램 프로그래밍 인터페이스)를 사용하지 않으면 많은것을 만들기 어렵습니다. API는 사이트가 실행되고 있는 브라우저와 운영 체제의 다양한 부분 그리고 웹 사이트 혹은 서비스의 데이터를 다룰 수 있는 인터페이스입니다. 이번장에서 우리는 API가 무엇인지, 그리고 개발할 때 자주 접하게 될 보편적인 API를 사용하는 방법에 대해 살펴볼 것입니다.

선행사항
----

다음의 문서를 미리 보고 오시는것을 권장합니다. (First steps, Building blocks, and JavaScript objects). 이 모듈은 클라이언트 측 JavaScript 예제를 사용하지 않고 유용하게 사용할 수 있기 때문에 간단한 API 사용법을 상당히 많이 사용합니다. 여기에서는 핵심 자바 스크립트 언어에 대한 지식이 있다고 가정하고 일반적인 웹 API를 좀 더 자세하게 살펴보면서 한 단계 올라갑니다. 이번장에서는 심플한 API사용방법을 여럿 보도록 하겠습니다. 이 API들은 client-side JavaScript를 만드는데 도움이 많이 될 것입니다.

HTM과CSS에 관한 기본지식이 있으면 좋습니다!

**참고:** 코드를 작성 할 수 없는 디바이스에서 작업하는 경우 JSBin 또는 Thimble.과 같은 온라인 코딩 프로그램에서 코드 예제를 시험해 볼 수 있습니다.

Guides
------

Introduction to web APIs (en-US)

우선, 높은 수준의 API를 먼저 살펴볼 것입니다. API는 무엇이며, 어떻게 작동하며, 코드에서 어떻게 사용하고 구조화되어 있는지 확인합니다. 또한 API의 다른 주요 클래스가 무엇인지, 그리고 용도가 무엇인지 살펴볼 것입니다.

Manipulating documents (en-US)

웹 페이지와 앱을 작성할 때 많이 하는 것중 하나는 웹 문서를 다루는 것입니다. 보통 `Document` 객체를 많이 사용하는 HTML 및 스타일 정보를 제어하기위한 API 집합 인 DOM (Document Object Model)을 사용합니다. 여기서는 흥미로운 방식으로 환경을 변경할 수 있는 API와 함께 DOM을 사용하는 방법에 대해 자세히 설명합니다.

Fetching data from the server (en-US)

최신 웹 사이트 및 응용 프로그램에서 필요한 작업중 하나는 완전히 새로운 페이지를 로드 할 필요없이 서버에서 개별 데이터를 가져와 웹 페이지의 일부분만 업데이트하는 것입니다. 이렇게 하면 사이트의 성능과 동작에 큰 영향을 줍니다. 여기서는 이 개념을 설명하고 `XMLHttpRequest`나 Fetch API와 같은 기술을 살펴 보겠습니다

Third party APIs (en-US)

지금까지 살펴본 API는 브라우저에 내장되어 있지만 모든 API가 지원되지는 않습니다. 예를들면 Google Maps, Twitter, Facebook, PayPal 등과 같은 많은 대형 웹 사이트와 서비스가 있고 여기에는 개발자 자신의 데이터 (예 : 블로그에 트위터 스트림 표시) 또는 서비스 (예 : 사이트에 맞춤 Google지도 표시, Facebook 로그인을 사용하여 사용자 로그인)가 있습니다.여기서는 브라우저 API와 타사 API의 차이점을 살펴본 후 일반적인 API 사용법을 보겠습니다.

Drawing graphics (en-US)

브라우저에는 SVG (Scalable Vector Graphics) 언어부터 HTML `<canvas>` 요소 (The Canvas API 및 WebGL 참조)를 그리는 데 필요한 API에 이르기까지 매우 강력한 그래픽 프로그래밍 도구가 포함되어 있습니다. 여기서는 Canvas API에 대한 소개와 더 많은 정보를 얻을 수있는 추가 자료를 제공합니다.

Video and audio APIs (en-US)

HTML5에는 문서 `<video>` 및 `<audio>` (en-US)에 미디어를 포함하기위한 요소가 포함되어 있으며 재생, 탐색 등을 제어하는 자체 API가 제공됩니다. 이문서에서는 사용자 커스텀 재생 컨트롤 만들기와 같은 일반적인 작업을 수행하는 방법을 보여줍니다.

Client-side storage (en-US)

최신 웹 브라우저에는 웹 사이트와 관련된 데이터를 저장하고 필요할 때 검색하여 장기간 데이터를 유지하고 오프라인으로 사이트를 저장하는 등 다양한 기술을 사용할 수 있습니다. 이 기사에서는 이러한 작업 방식에 대한 기본적인 내용을 설명합니다.
비동기 JavaScript
==============

이 과정에서 우리는 asynchronous JavaScript와 이것이 중요한 이유, 서버에서 리소스를 가져오는 것과 같은 잠재적 블로킹 연산을 어떻게 효과적으로 다룰 수 있을지에 대해 살펴봅니다.

> 
> **Callout:**
> 
> 
> #### 프론트엔드 웹 개발자가 되고싶으신가요?
> 
> 
> 목표를 향해 나아가기 위해 필요한 모든 필수 정보를 포함한 교육과정을 준비했습니다.
> 
> 
> **시작하기**
> 
> 
> 

필요한 사전 지식
---------

Asynchronous Javascript는 상당히 고급 주제에 속하고, 시도해보기 전에 JavaScript 첫걸음과 JavaScript 구성요소 과정을 거치는것이 좋습니다.

**참고:** 만약 파일을 만들 수 없는 컴퓨터/테블릿/기타 장치를 사용하고 있다면, JSBin이나 Glitch와 같은 온라인 코딩 프로그램에서 (대부분의) 예제 코드를 사용해볼 수 있습니다.

가이드
---

Introducing asynchronous JavaScript

**동기**와 **비동기** 프로그램이 무엇인지, 비동기 기술을 자주 사용해야하는 이유, 역사적으로 Javascript에서 비동기 함수가 구현된 방식 및 문제를 살펴봅니다.

How to use promises

프로미스와 프로미스 기반 API를 어떻게 사용하는지 알아봅니다. 또한 `async` 와 `await` 키워드를 소개합니다.

Implementing a promise-based API

자신만의 프로미스 기반 API를 구현하는 방법을 간략하게 설명합니다.

Introducing workers

workers를 사용하면 별도의 스레드에서 특정 작업을 실행하여 메인 코드의 응답성을 유지할 수 있습니다. 이 글에서는 workers를 사용하도록 장기 실행 동기 함수를 다시 작성합니다.

평가
--

Sequencing animations

프로미스를 사용하여 특정 시퀀스에서 애니메이션 세트를 재생하는 평가입니다.

같이 보기
-----

* Marijn Haverbeke의 환상적인 Eloquent JavaScript 온라인 책 Asynchronous Programming.
Sequencing animations
=====================

* 이전
* Overview: Asynchronous

이 평가에서는 일련의 애니메이션을 순서대로 재생하도록 페이지를 업데이트할 것입니다. 이를 진행하기 위해 프로미스 사용 방법에서 배운 몇 가지 기술을 사용할 예정입니다.

|  |  |
| --- | --- |
| 필요한 사전 지식 | 기본적인 컴퓨터 사용능력, JavaScript 기초와 프로미스 기반 API사용 방법에 대한 이해 |
| 목적 | 프로미스기반 API 사용 방법에 대한 이해도를 테스트하기 위함 |

시작
--

https://github.com/mdn/learning-area/tree/main/javascript/asynchronous/sequencing-animations/start에서 로컬로 파일을 복사합니다. 여기에는 4개의 파일이 있습니다.

* alice.svg
* index.html
* main.js
* style.css

앞으로 편집할 파일은 "main.js" 뿐입니다.

브라우저에서 "index.html"을 열면 세 개의 이미지가 대각선으로 배열되어 있는것을 볼 수 있을것입니다.

![Screenshot of sequencing-animations assessment page](/ko/docs/Learn/JavaScript/Asynchronous/Sequencing_animations/sequencing-animations.png)

이미지는 Using the Web Animations API (en-US) 가이드에서 가져온 것입니다.

프로젝트 설명
-------

우리는 이 페이지를 업데이트하여 세 개의 이미지 모두에 하나씩 애니메이션을 적용할 것입니다. 첫 번째 애니메이션이 끝나면 두 번째 애니메이션이 시작되고, 두 번째가 끝나면 세 번째를 시작합니다.

애니메이션은 "main.js"에 정의되어 있습니다. 이 애니메이션은 이미지를 회전하고 이미지가 사라질 때까지 축소시킵니다.

페이지의 작동 방식에 대한 자세한 내용을 보려면 완료된 예제를 살펴보세요. 애니메이션은 한 번만 실행되니 다시 실행하려면 페이지를 다시 로드해야합니다.

단계별로 완성해보기
----------

### 첫 번째 이미지 애니메이션

우리는 Web Animations API의 `element.animate()` (en-US) 메서드를 사용하여 애니메이션을 적용할 것입니다.

"main.js"를 업데이트하여 다음과 같이 `alice1.animate()` 호출을 추가해줍니다.


```js
const aliceTumbling = [
  { transform: "rotate(0) scale(1)" },
  { transform: "rotate(360deg) scale(0)" },
];

const aliceTiming = {
  duration: 2000,
  iterations: 1,
  fill: "forwards",
};

const alice1 = document.querySelector("#alice1");
const alice2 = document.querySelector("#alice2");
const alice3 = document.querySelector("#alice3");

alice1.animate(aliceTumbling, aliceTiming);
```


페이지를 다시 로드해보면 첫 번째 이미지가 회전하고 축소되는것을 볼 수 있을겁니다.

### 모든 이미지 애니메이션

다음으로 `alice1`이 끝나면 `alice2`를, `alice2`가 끝나면 `alice3`가 시작되도록 하겠습니다.

`animate()` 메서드는 `Animation` (en-US) 객체를 반환합니다. 이 객체는 애니메이션 재생이 완료되면 이행되는 `Promise`로 `finished` 속성을 가지고 있습니다. 그래서 우리는 이 프로미스로 언제 다음 애니메이션을 시작해야할지 알 수 있습니다.

여러분이 이를 구현하기 위한 몇 가지 다른 방법들을 시도해 보시고, 프로미스를 사용하는 다른 방법들을 보강해주셨으면 합니다.

1. 먼저, 콜백 사용에 대한 논의에서 보았던 "콜백 지옥(callback hell)"으로 프로미스를 구현합니다.
2. 다음으로 프로미스 체인으로 구현합니다. 화살표 함수 대신 다른 것을 사용할 수 있기 때문에 코드는 여러 가지 방법으로 작성할 수 있음을 알아두세요. 다양한 방법을 시도해보세요. 어느 것이 가장 간결하고 읽기 쉬운가요?
3. 마지막으로 `async`와 `await`로 구현해보세요.

`element.animate()`는 프로미스를 반환하지 *않는다* 는것을 기억하세요. 프로미스인 `finished` 속성을 가진 `Animation` 객체를 반환합니다.

평가 또는 추가적인 도움
-------------

작업에 대한 평가를 원하거나 수행 중 막히는 부분이 있다면 다음 방법을 통해 도움을 요청할 수 있습니다.

1. CodePen, jsFiddle, 또는 Glitch와 같이 코드를 공유할 수 있는 온라인 에디터에 여러분이 작성한 코드를 올립니다.
2. MDN Discourse forum Learning category에 평가 혹은 도움을 요청하는 게시물을 작성합니다. 게시물에는 다음이 포함되어야 합니다.
    * "애니메이션 시퀀싱 평가 질문"과 같이 설명적인 제목
    * 이미 시도한 내용과 원하는 작업에 대한 세부 정보 (예: 막히는 부분이 있어서 도움이 필요하거나 평가가 필요)
    * 온라인 편집기에서 도움이나 평가가 필요한 코드 링크(1단계에서 언급됨). 이는 답변에 매우 도움이 됩니다. 만약 코드를 볼 수 없다면 도움을 주기 상당히 어렵습니다.
    * 도움이 필요한 질문을 찾을 수 있도록 실제 작업 또는 평가 페이지에 대한 링크
* 이전
* Overview: Asynchronous
당신의 기량을 시험해 보세요: 변수(variables)
==============================

이 기량 테스트의 목적은 당신이 우리의 필요한 정보를 저장하기 — 변수 문서를 이해했는지를 평가하기 위함입니다.

**참고:** You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as CodePen, jsFiddle, or Glitch to work on the tasks.

If you get stuck, then ask us for help — see the Assessment or further help section at the bottom of this page.

**참고:** 아래에 있는 예제들에서, 답을 알아내기 위해 시도하는 것을 돕기 위해 만약 당신의 코드에 오류가 있으면, 페이지의 결과 패널에 출력될 것입니다 (또는 다운로드 버전의 경우, 브라우저의 JavaScript 콘솔에 출력될 것입니다).

변수 1
----

이 과제에서 우리는 당신이 다음을 하기를 원합니다:

* `myName` 이라는 이름의 변수 선언(declare)하기.
* 분리된 라인에, `myName` 을 적절한 값으로 초기화(initialize)하기 (당신은 당신의 실제 이름이나, 혹은 무언가 다른 것을 사용할 수 있습니다).
* 같은 줄에, `myAge` 라는 변수를 선언하고 값을 주어 초기화하기.

완료된 예제를 만들기 위해 아래의 live code를 업데이트 해 보세요:

Download the starting point for this task to work in your own editor or in an online editor.

변수 2
----

이 과제에서 당신은 기존의 `myName` 변수에 저장된 값을 당신의 이름으로 정정하기 위해 새로운 줄을 추가할 필요가 있습니다.

완료된 예제를 만들기 위해 아래의 live code를 업데이트 해 보세요:

Download the starting point for this task to work in your own editor or in an online editor.

변수 3
----

이제 마지막 과제입니다. 여기서 당신은 기존의 몇몇 코드를 가지고 있는데, 여기에는 현재 두 개의 오류가 있습니다. 결과 패널은 `Chris` 라는 이름과, 20년 후 Chris는 몇 살일지에 대한 문장을 출력해야만 합니다. 당신은 어떻게 문제를 고치고 출력을 정정하실 건가요?

완료된 예제를 만들기 위해 아래의 live code를 업데이트 해 보세요:

Download the starting point for this task to work in your own editor or in an online editor.

평가 혹은 추가적인 도움
-------------

당신은 이 예제들을 위에 있는 대화형 에디터(Interactive Editor)에서 연습할 수 있습니다.

만약 당신이 작업을 평가받고 싶거나, 막혀서 도움을 청하기를 원한다면:

1. 당신의 작업을 CodePen, jsFiddle, 또는 Glitch 같은 온라인에서 공유 가능한 에디터에 올리세요. 당신은 직접 코드를 작성하거나, 위 섹션들에 링크된 시작점 파일을 사용할 수 있습니다.
2. MDN Discourse forum Learning category 에 평가 및 또는 도움을 요청하는 글을 작성하세요. 당신의 글은 다음을 포함해야만 합니다.
    * "변수 1 기량 테스트에 대한 평가 원함"과 같은 서술적인 제목.
    * 당신이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명, 예를 들자면, 만약 당신이 막혀서 도움이 필요하거나, 평가를 원하거나.
    * (위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 당신이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 실천입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.
    * 우리가 당신이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.
얼마나 이해했는지 확인해보자: JSON
=====================

이 테스트의 목표는 JSON으로 작업하기를 잘 이해했는지 평가해보는 것입니다.

**참고:** 아래에 있는 편집기를 사용해보세요. 테스트 중 막히면, 도움을 요청할 수 있습니다. 페이지 하단의 "평가 또는 추가 도움말" 을 참고하세요.

**참고:** 작성한 코드에 오류가 발생하는 경우, 결과창에서 정답을 알아낼 수 있도록 돕기 위해 결과값을 보여줄 것입니다. (또는 브라우저의 JavaScript 콘솔로도 확인 가능합니다.)

JSON 1
------

이번에 수행할 유일한 과제는 JSON 데이터에 접근하고 사용해보는 것입니다. 어미 고양이들과 그들의 새끼 고양이에 관한 JSON 데이터는 sample.json에서 확인할 수 있습니다. 이 JSON은 텍스트 문자열로 호출되며, 제시된 프로미스 체인(JSON 데이터를 가져오는 것으로 시작)의 조건을 만족시킬 때 `displayCatInfo()` 함수의 `catString` 파라미터로 사용될 수 있습니다.

* `motherInfo` 의 변수 : 쉼표로 나뉘어진 세 어미 고양이의 이름
* `kittenInfo` 의 변수 : 새끼 고양이의 전체 마릿수, 수컷 수, 암컷 수

변수들의 값은 문단 내부의 화면에 출력됩니다.

몇 가지 힌트/질문:

* JSON 데이터는 `displayCatInfo()` 함수 내부에 텍스트로 제공됩니다. 데이터를 얻기 위해서는 JSON 구문을 분석해야 합니다.
* 아마도 outer loop를 사용해 반복하여 고양이와 그들의 이름을 `motherInfo` 의 변수에 추가하고, inner loop 를 사용해 모든 새끼 고양이들, 총/수컷/암컷 마릿수를 `kittenInfo` 의 변수에 추가하려고 할 것입니다.
* 마지막에 오는 어미 고양이 이름 전에는 "and"가 와야하며, 그 뒤에 작업이 완전히 멈춰야 합니다. JSON에 고양이가 무수히 많이 오더라도 작업이 잘 이뤄질꺼라고 확신할 수 있으십니까?
* `para1.textContent = motherInfo;` 과 `para2.textContent = kittenInfo;` 는 왜 `displayCatInfo()` 함수의 내부에 있어야 하며, 스크립트 마지막에 오지 않는 것일까요? 이것은 비동기와 관련이 있습니다.

완료된 예제를 다시 만드려면, 아래 코드를 변경해보세요:

**경고:** 이번 테스트를 치를 때 코드를 위에 있는 편집기에 작성하세요. 로컬환경이나 CodePen 또는 JSFiddle 에서는 이 예제가 작동하지 않을 수 있는데, *cross-origin* 라고 불리는 보안정책 때문일 것입니다. 이는 현재 환경과 다른 출처의 리소스의 요청을 제한하는 정책입니다. 위 편집기는 JavaScript 코드와 요청된 JSON 파일을 모두 동일한 출처에서 요청하고 있습니다. (Github 저장소의 <iframe>에 내장되어 있습니다.) 하지만 예를 들어 CodePen에 기입하는 코드는 JSON을 호출하는 출처와는 다르기 때문에 오류가 발생할 수 있습니다. CORS를 사용하여 이런 제약사항을 해결할 수 있지만, 이번 장에서 가르치는 범위에는 해당하지 않습니다.

평가 또는 추가 도움말
------------

위에 있는 편집기를 이용해 예제를 연습해볼 수 있습니다.

만일 작업을 평가하고나, 막혀서 도움을 요청하고 싶다면:

1. MDN 학습 토론 카테고리에 평가 또는 도움을 요청하는 글을 작성하세요. 글에는 다음 사항이 포함되어야 합니다 :
    * "Assessment wanted for JSON skill test (JSON 기술 테스트에 대한 평가를 요청드립니다)" 와 같은 제목을 사용하세요.
    * 이미 시도해보았거나, 원하는 것(예를 들어, 막혀서 도움이 필요하다거나 평가가 필요하다는 것과 같은)에 대한 세부사항을 기입해주세요.
    * 작성한 코드를 삽입하세요.
    * 실제 작업 또는 평가 페이지에 대한 링크를 삽입하세요. 그래야 도움받고자 하는 질문을 확인할 수 있습니다.
실력을 평가해 보세요: 반복문
================

이 실력 테스트의 목적은 여러분이 우리의 반복문 문서를 이해했는지를 평가하기 위함입니다.

**참고:** 여러분은 코드를 다운로드하고, CodePen, jsFiddle, 또는 Glitch와 같은 온라인 툴(tool)에 넣고, 그리고서 과제에 도전해 봄으로써 아래의 과제들에 대한 해답을 시도해볼 수 있습니다. 무한 루프를 만들고 평가 페이지를 멈추게 하는 위험 때문에 우리는 이 과제들에 대해 실시간으로 수정 가능한 에디터를 제공하지 않았습니다!

만약 막히면, 도움을 요청하세요 — 이 페이지 아래의 Assessment or further help 섹션을 보세요.

DOM 조작: 유용하다고 생각됨
-----------------

아래의 몇몇 문제들은 여러분에게 문제 해결을 위해서 몇몇 DOM 조작 코드를 작성하기를 요구합니다 — 새로운 HTML 요소 생성하기, 특정한 문자열 값과 동일한 텍스트 콘텐츠 설정하기, 그리고 페이지에 존재하는 요소 내부에 중첩하기와 같은 — 모두 JavaScript를 통해서.

우리는 이것을 아직 이 코스에서 분명하게 가르치지 않았지만, 여러분은 이것을 사용하는 몇몇 예제를 보았고, 우리는 여러분이 문제에 성공적으로 답하기 위해 어떤 DOM API들이 필요한지에 대해 검색하기를 원합니다. 좋은 시작점은 우리의 문서 조작하기 (en-US)(Manipulating documents) 튜토리얼입니다.

반복문 1
-----

우리의 첫 반복문 과제에서 우리는 여러분이 제공된 `myArray` 내의 모든 요소를 순회하고, 제공된 `list`에 추가될 리스트 아이템 (예: `<li>` 요소) 내에서 화면에 그것들을 출력하는 간단한 반복문을 만듦으로써 시작하기를 원합니다.

**참고:** 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 이 과제의 시작점을 다운로드하세요.

반복문 2
-----

이 다음 과제에서, 우리는 여러분이, 이름이 주어지면 이름과 전화번호 (`phonebook`)를 포함하고 있는 객체 배열을 탐색하고, 만약 그 이름을 찾으면, 이름과 전화번호를 단락 (`para`)에 출력하고 그리고서 반복문이 다 실행되기 전에 반복문을 빠져나오는 간단한 프로그램을 작성하기를 원합니다.

3개의 변수가 주어집니다:

* `i` — 0의 값에서 시작합니다; 반복자(iterator)로써 쓰이게 의도되었습니다.
* `name` — 검색할 이름을 포함하고 있습니다.
* `para` — 단락에 대한 참조를 포함하고 있는데, 결과를 보이기 위해 사용될 것입니다.

여러분은 전 과제에서 사용하지 않은 유형의 반복문을 사용해야 합니다.

**참고:**

여러분의 에디터나 온라인 에디터에서 작업하기 위해서 이 과제의 시작점을 다운로드하세요.

반복문 3
-----

이 마지막 과제에서는, 다음의 것들이 제공됩니다:

* `i` — 500의 값으로 시작합니다; 반복자로써 쓰이게 의도되었습니다.
* `para` — 단락에 대한 참조를 포함하고 있는데, 결과를 보이기 위해 사용될 것입니다.
* `isPrime()` — 숫자가 전달되었을 때, 만약 숫자가 소수(prime number)면, `true`를 반환하고, 아니면 `false`를 반환하는 함수.

여러분은 숫자 2에서 500까지 뒤로 가는 반복문을 사용하고 (1은 소수에 포함되지 않습니다), 제공된 `isPrime()` 함수를 그 숫자들에서 실행할 필요가 있습니다. 소수가 아닌 각 숫자에 대해서는, 다음 반복으로 계속하세요. 소수인 각 숫자에 대해서는, 그것을 단락의 `textContent`에 몇몇 종류의 분리자(separator)에 덧붙여 추가하세요.

여러분은 이전의 두 과제에서 사용하지 않은 유형의 반복문을 사용해야 합니다.

**참고:** 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 이 과제의 시작점을 다운로드하세요.

평가 혹은 추가적인 도움
-------------

만약 여러분의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:

1. 여러분의 작업을 CodePen, jsFiddle, 또는 Glitch와 같은 온라인에서 공유 가능한 에디터에 올리세요. 여러분은 코드를 직접 작성할 수도 있고, 혹은 위 섹션에 링크된 시작 파일을 사용할 수도 있습니다.
2. MDN Discourse forum Learning category 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 여러분의 글은 다음을 포함해야만 합니다:
    * "반복문 1 실력 테스트에 대한 평가 원함"과 같은 서술적인 제목.
    * 여러분이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명. 예를 들자면, 막혀서 도움이 필요하다거나, 평가를 원한다거나 하는 설명을 포함해야 합니다.
    * (위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 여러분이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 습관입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.
    * 우리가 여러분이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.
실력을 평가해 보세요: 이벤트
================

이 실력 테스트의 목적은 여러분이 우리의 이벤트 입문 문서를 이해했는지 평가하기 위함입니다.

**참고:** 아래의 인터랙티브 에디터에서 해답을 시도해 볼 수도 있지만, 과제를 하기 위해 코드를 다운로드하고 CodePen, jsFiddle, 또는 Glitch와 같은 온라인 툴(tool)을 사용하는 것이 도움이 될 지도 모릅니다.

만약 막히면, 도움을 요청하세요 — 이 페이지 아래의 Assessment or further help 섹션을 보세요.

**참고:** 아래의 예제들에서, 만약 코드에 오류가 있다면, 답을 찾는 걸 돕기 위해 페이지의 결과 패널에 (또는 다운로드한 경우, 브라우저의 JavaScript 콘솔에) 오류가 출력될 것입니다.

DOM 조작: 유용하다고 생각됨
-----------------

아래의 몇몇 문제들은 여러분에게 문제 해결을 위해서 몇몇 DOM 조작 코드를 작성하기를 요구합니다 — 새로운 HTML 요소 생성하기, 특정한 문자열 값과 동일한 텍스트 콘텐츠 설정하기, 그리고 페이지에 존재하는 요소 내부에 중첩하기와 같은 — 모두 JavaScript를 통해서.

우리는 이것을 아직 이 코스에서 분명하게 가르치지 않았지만, 여러분은 이것을 사용하는 몇몇 예제를 보았고, 우리는 여러분이 문제에 성공적으로 답하기 위해 어떤 DOM API들이 필요한지에 대해 검색하기를 원합니다. 좋은 시작점은 우리의 문서 조작하기 (en-US)(Manipulating documents) 튜토리얼입니다.

이벤트 1
-----

우리의 첫 번째 이벤트에 관계된 과제에서, 여러분은 버튼 (`btn`) 내부의 텍스트가 버튼이 클릭되었을 때 바뀌고, 다시 클릭되었을 때 원상복귀되게 하는 간단한 이벤트 핸들러를 생성할 필요가 있습니다.

HTML은 변경되어서는 안 됩니다; JavaScript만 변경되어야 합니다.

완성된 예제를 다시 만들기 위해 아래의 코드를 업데이트해 보세요:

**참고:** 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 이 과제의 시작점을 다운로드하세요.

이벤트 2
-----

이제 우리는 키보드 이벤트를 살펴볼 것입니다. 이 평가를 통과하기 위해서 여러분은 WASD 키가 키보드에서 눌렸을 때 원을 제공된 캔버스 주위에서 움직이는 이벤트 핸들러를 만들 필요가 있습니다. 원은 `drawCircle()` 함수로 그려지는데, 이는 다음의 입력을 매개변수로 취합니다.

* `x` — 원의 x 좌표.
* `y` — 원의 y 좌표.
* `size` — 원의 반지름.

완성된 예제를 다시 만들기 위해 아래의 코드를 업데이트해 보세요:

**참고:** 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 이 과제의 시작점을 다운로드하세요.

이벤트 3
-----

우리의 마지막 이벤트에 관련된 과제에서, 여러분은 `<button>`들의 부모 요소 (`<div class="button-bar"> ... </div>`)에 이벤트 핸들러를 설정할 필요가 있는데, 이는 버튼을 클릭해서 호출했을 때 `button-bar`의 배경색을 버튼의 `data-color` 어트리뷰트 안에 포함된 색으로 설정합니다.

우리는 여러분이 모든 버튼을 순회하고 각 버튼에 이벤트 리스너를 주지 않고 이것을 해결하기를 원합니다.

완성된 예제를 다시 만들기 위해 아래의 코드를 업데이트해 보세요:

**참고:** 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 이 과제의 시작점을 다운로드하세요.

평가 혹은 추가적인 도움
-------------

여러분은 이 예제들을 위의 인터랙티브 에디터에서 연습할 수 있습니다.

만약 여러분의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:

1. 여러분의 작업을 CodePen, jsFiddle, 또는 Glitch와 같은 온라인에서 공유 가능한 에디터에 올리세요. 여러분은 코드를 직접 작성할 수도 있고, 혹은 위 섹션에 링크된 시작 파일을 사용할 수도 있습니다.
2. MDN Discourse forum Learning category 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 여러분의 글은 다음을 포함해야만 합니다:
    * "이벤트 1 실력 테스트에 대한 평가 원함"과 같은 서술적인 제목.
    * 여러분이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명. 예를 들자면, 막혀서 도움이 필요하다거나, 평가를 원한다거나 하는 설명을 포함해야 합니다.
    * (위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 여러분이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 습관입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.
    * 우리가 여러분이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.
실력을 평가해 보세요: 함수
===============

이 실력 테스트의 목적은 여러분이 우리의 함수 — 코드 재사용, 함수 만들기, 그리고 함수 반환 값 문서를 이해했는지 평가하기 위함입니다.

**참고:** 아래의 인터랙티브 에디터에서 해답을 시도해 볼 수도 있지만, 과제를 하기 위해 코드를 다운로드하고 CodePen, jsFiddle, 또는 Glitch와 같은 온라인 툴(tool)을 사용하는 것이 도움이 될 지도 모릅니다.

만약 막히면, 도움을 요청하세요 — 이 페이지 아래의 Assessment or further help 섹션을 보세요.

**참고:** 아래의 예제에서, 만약 코드에 오류가 있다면, 답을 찾는 걸 돕기 위해 페이지의 결과 패널에 (또는 다운로드한 경우, 브라우저의 JavaScript 콘솔에) 오류가 출력될 것입니다.

DOM 조작: 유용하다고 생각됨
-----------------

아래의 몇몇 문제들은 여러분에게 문제 해결을 위해서 몇몇 DOM 조작 코드를 작성하기를 요구합니다 — 새로운 HTML 요소 생성하기, 특정한 문자열 값과 동일한 텍스트 콘텐츠 설정하기, 그리고 페이지에 존재하는 요소 내부에 중첩하기와 같은 — 모두 JavaScript를 통해서.

우리는 이것을 아직 이 코스에서 분명하게 가르치지 않았지만, 여러분은 이것을 사용하는 몇몇 예제를 보았고, 우리는 여러분이 문제에 성공적으로 답하기 위해 어떤 DOM API들이 필요한지에 대해 검색하기를 원합니다. 좋은 시작점은 우리의 문서 조작하기 (en-US)(Manipulating documents) 튜토리얼입니다.

함수 1
----

첫 번째 과제에서, 여러분은 제공된 배열 (`names`)에서 무작위 이름을 제공된 단락(`para`)에 출력하고, 그리고서 한 번만 실행되는 간단한 함수 — `chooseName()` — 를 만들어야 합니다.

완성된 예제를 다시 만들기 위해 아래의 코드를 업데이트해 보세요:

**참고:** 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 이 과제의 시작점을 다운로드하세요.

함수 2
----

우리의 두 번째 함수에 관계된 과제에서, 여러분은 제공된 `<canvas>`에 (참조 변수 `canvas`, context는 `ctx`에서 이용가능), 다섯 개의 제공된 입력 변수를 기반으로 하여, 직사각형을 그리는 함수를 만들 필요가 있습니다.

* `x` — 직사각형의 x 좌표.
* `y` — 직사각형의 y 좌표.
* `width` — 직사각형의 너비.
* `height` — 직사각형의 높이.
* `color` — 직사각형의 색깔.

인터랙티브 에디터의 경우 코드가 업데이트될 때, 많은 직사각형들이 다른 직사각형 위에 그려지지 않도록, 여러분은 그리기 전에 캔버스를 지우기를 원할 것입니다.

완성된 예제를 다시 만들기 위해서 아래의 코드를 업데이트해 보세요:

**참고:** 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 이 과제의 시작점을 다운로드하세요.

함수 3
----

이 과제에서는, 여러분은 과제 1에서 제기된 문제를 개선시킬 목적으로 이 과제에 다시 돌아왔습니다. 우리가 여러분이 만들기를 원하는 세 가지 개선점은:

1. 무작위 숫자를 생성하는 코드를 별도의 함수 `random()`으로 리팩토링하는데, 이 함수는 매개변수로서 무작위 숫자가 사이에 위치할 두 기준점을 취하고, 결과를 반환합니다.
2. `chooseName()` 함수가 무작위 숫자 함수를 사용하고, 매개변수로서 선택할 배열을 취하고 (함수를 더 적응성 있게 만듭니다), 결과를 반환하도록 함수를 업데이트하세요.
3. 반환된 결과를 단락 (`para`)의 `textContent`에 출력하세요.

완성된 예제를 다시 만들기 위해 아래의 코드를 업데이트해 보세요:

**참고:** 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 이 과제의 시작점을 다운로드하세요.

평가 혹은 추가적인 도움
-------------

여러분은 이 예제들을 위의 인터랙티브 에디터에서 연습할 수 있습니다.

만약 여러분의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:

1. 여러분의 작업을 CodePen, jsFiddle, 또는 Glitch와 같은 온라인에서 공유 가능한 에디터에 올리세요. 여러분은 코드를 직접 작성할 수도 있고, 혹은 위 섹션에 링크된 시작 파일을 사용할 수도 있습니다.
2. MDN Discourse forum Learning category 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 여러분의 글은 다음을 포함해야만 합니다:
    * "함수 1 실력 테스트에 대한 평가 원함"과 같은 서술적인 제목.
    * 여러분이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명. 예를 들자면, 막혀서 도움이 필요하다거나, 평가를 원한다거나 하는 설명을 포함해야 합니다.
    * (위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 여러분이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 습관입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.
    * 우리가 여러분이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.
웹 작동방식
======

이 섹션에서는 웹 생태계 및 작동 방식에 대한 일반적인 지식과 관련된 질문을 다루고 있습니다.

인터넷은 어떻게 작동합니까?

**인터넷**은 웹의 근간을 이루며, 웹을 가능하게 하는 기술 인프라입니다.
 기본적으로, 인터넷은 서로 통신하는 컴퓨터의 거대한 네트워크입니다. 이 문서에서는 인터넷이 어떻게 작동하는지에 대해 설명합니다.


웹페이지, 웹사이트, 웹서버, 검색엔진의 차이점은 무엇인가요?

 이 도움말에서는 웹페이지, 웹사이트, 웹서버, 검색엔진 등 다양한 웹 관련 개념에 대해 설명합니다.
 이러한 용어는 웹을 처음 접하는 사람들에게 종종 혼란을 주거나, 잘못 사용되는 경우가 많습니다. 이 용어들이 실제로 무엇을 의미하는지 알아봅시다!


하이퍼링크란 무엇인가요?

이 글에서는, 하이퍼링크의 정의와 하이퍼링크가 중요한 이유에 대해 살펴봅니다.

URL이란 무엇인가요?

Hypertext 및 HTTP에서, URL은 인터넷에 관한 핵심 개념입니다. URL은 브라우저가 웹에 게시된 리소스를 검색하는 데 사용하는 방식입니다.

도메인 네임이란 무엇인가요? (en-US)

도메인 네임은 인터넷 인프라의 핵심 구성 요소입니다. 도메인 네임은 인터넷에서 사용할 수 있는 모든 웹 서버에 사람이 읽을 수 있는 주소를 제공합니다.

웹 서버란 무엇인가요?

"웹 서버"라는 용어는 웹을 통해 클라이언트에 웹 사이트를 제공하는 하드웨어 또는 소프트웨어, 또는 이 두 가지를 모두 의미할 수 있습니다. 이 글에서는 웹 서버의 작동 방식과 웹 서버가 중요한 이유에 대해 살펴봅니다.