Merge branch 'main' into indonesian-translation

2025-08-11 17:24:24 +02:00 · 2020-12-23 08:54:41 +07:00
parent 9be89e6256 5dbe7e8bd9
commit db69d1b17a
55 changed files with 5889 additions and 106 deletions
--- a/2-js-basics/1-data-types/README.md
+++ b/2-js-basics/1-data-types/README.md
@@ -162,7 +162,7 @@ let myString1 = "Hello";
 let myString2 = "World";

 `${myString1} ${myString2}!` //Hello World!
-`${myString1}, ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
 ```

 You can achieve your formatting goals with either method, but template literals will respect any spaces and line breaks.
@@ -193,4 +193,4 @@ Take a look at [this list of JavaScript exercises](https://css-tricks.com/snippe

 ## Assignment

-[Data Types Practice](assignment.md)
+[Data Types Practice](assignment.md)
--- a/2-js-basics/1-data-types/translations/README.de.md
+++ b/2-js-basics/1-data-types/translations/README.de.md
@@ -164,7 +164,7 @@ let myString1 = "Hello";
 let myString2 = "World";

 `${myString1} ${myString2}!` //Hello World!
-`${myString1}, ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
 ```

 Sie können Ihre Formatierungsziele mit beiden Methoden erreichen, aber Vorlagenliterale berücksichtigen alle Leerzeichen und Zeilenumbrüche.
@@ -194,4 +194,4 @@ Schauen Sie sich [diese Liste der JavaScript-Übungen](https://css-tricks.com/sn

 ## Zuordnung

-[Praxis für Datentypen](assignment.de.md)
+[Praxis für Datentypen](assignment.de.md)
--- a/2-js-basics/1-data-types/translations/README.es.md
+++ b/2-js-basics/1-data-types/translations/README.es.md
@@ -160,7 +160,7 @@ let myString1 = "Hello";
 let myString2 = "World";

 `${myString1} ${myString2}!` //Hello World!
-`${myString1}, ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
 ```

 Puede lograr sus objetivos de formato con cualquier método, pero los literales de plantilla respetarán los espacios y saltos de línea.
@@ -184,4 +184,4 @@ Los booleanos pueden tener solo dos valores: `true` o `false`. Los valores boole

 Eche un vistazo a [esta lista de ejercicios de JavaScript](https://css-tricks.com/snippets/javascript/) y pruebe uno. ¿Qué aprendiste?

-**Tarea**: [Práctica de tipos de datos](assignment.es.md)
+**Tarea**: [Práctica de tipos de datos](assignment.es.md)
--- a/2-js-basics/1-data-types/translations/README.ko.md
+++ b/2-js-basics/1-data-types/translations/README.ko.md
@@ -0,0 +1,196 @@
+# JavaScript 기초: 데이터 타입
+
+![JavaScript Basics - Data types](../images/webdev101-js-datatypes.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## 강의 전 퀴즈
+[Pre-lecture quiz](../.github/pre-lecture-quiz.md)
+
+해당 강의에서는 웹에서 상호작용을 제공하는 언어인 JavaScript의 기초를 다룹니다. 
+
+[![Data types in JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Data types in JavaScript")
+
+
+변수와 변수를 채워주는 데이터 타입부터 시작합니다!
+
+## 변수
+
+변수는 코드에서 사용하며 변경할 수 있는 값을 저장합니다.
+
+변수를 만들고 **선언** 하는 구문은 **[keyword] [name]** 입니다. 두 부분으로 이루어집니다:
+
+- **키워드**. 키워드는 `let` 또는 `var`로 지정할 수 있습니다.  
+
+   > Note, 키워드 `let`은 ES6에서 도입되었으며 변수에 _block scope_ 를 제공합니다. `var`보다` let`을 사용하는 것이 좋습니다. 향후 부분에서 블록 범위를 더 자세히 다룰 것입니다.
+- **변수 이름**, 스스로 선택한 이름입니다.
+
+### 작업 - 변수와 작업하기
+
+1. **변수 선언하기**. `let` 키워드를 사용하여 변수를 선언해봅시다:
+
+    ```javascript
+    let myVariable;
+    ```
+
+   이제 `myVariable`이 `let` 키워드를 사용하여 선언되었습니다. 현재는 값을 가지고 있지 않습니다.
+
+1. **값 할당하기**. `=` 연산자로 변수에 값을 저장합니다, 예상 값이 따릅니다.
+
+    ```javascript
+    myVariable = 123;
+    ```
+
+   > Note: 이 강의에서 `=`을 사용한다는 것은 변수에 값을 지정하는 데 사용되는 "할당 연산자" 로 사용되는 것을 의미합니다. 같다는 의미가 아닙니다.
+
+   `myVariable`는 이제 123 값으로 *초기화* 되었습니다.
+
+1. **리펙토링**. 코드를 다음 구문으로 바꿉니다.
+
+    ```javascript
+    let myVariable = 123;
+    ```
+
+    위는 변수가 선언되면서 동시에 값이 할당되는 순간을 _명시적 초기화_ 라고 합니다.
+
+1. **변수 값 변경하기**. 다음과 같이 변수 값을 변경합니다:
+
+   ```javascript
+   myVariable = 321;
+   ```
+
+   변수가 선언되면, `=` 연산자와 새 값을 사용하여 코드에서 언제든지 값을 변경할 수 있습니다.
+
+   ✅ 시도해보세요! 브라우저에서 바로 JavaScript를 작성할 수 있습니다. 브라우저 창을 열고 개발자 도구로 이동합니다. 콘솔에서, 프롬프트를 찾을 수 있습니다; `let myVariable = 123` 을 입력하고 Return 키를 누른 다음, `myVariable`을 입력합니다. 무슨 일이 일어났나요? 이후 강의에서 이러한 개념에 대해 자세히 알아볼 것 입니다.
+
+## 상수
+
+상수를 선언하고 초기화하는 것은 `const` 키워드를 제외하면 변수와 동일한 개념을 따릅니다. 상수는 일반적으로 모두 대문자로 선언됩니다.
+
+```javascript
+const MY_VARIABLE = 123;
+```
+
+상수는 변수와 유사하지만, 두 차이점이 있습니다:
+
+- **반드시 값이 있어야 합니다**. 상수는 초기화를 하지 않는다면, 코드 실행 중에 오류가 발생합니다.
+- **참조는 변경 불가합니다**. 상수 참조는 초기화된 후에는 변경할 수 없으며, 코드 실행 중에 오류가 발생합니다. 두 가지 예를 살펴 보겠습니다:
+   - **Simple value**. 허용하지 않습니다:
+   
+      ```javascript
+      const PI = 3;
+      PI = 4; // not allowed
+      ```
+ 
+   - **객체 참고는 보호됩니다**. 허용하지 않습니다:
+   
+      ```javascript
+      const obj = { a: 3 };
+      obj = { b: 5 } // not allowed
+      ```
+
+    - **객체 값은 보호되지 않습니다**. 허용합니다:
+    
+      ```javascript
+      const obj = { a: 3 };
+      obj.a = 5;  // allowed
+      ```
+
+      위는 객체의 값을 변경하지만 참조 자체는 변경하지 않으므로, 허용됩니다.
+
+   > Note, `const`는 참조가 다시 할당되지 않도록 보호한다는 점을 의미합니다. 값은 _immutable_ 이 아니며 객체와 같은 복잡한 구조인 경우, 변경될 수 있습니다.
+
+## 데이터 타입
+
+변수는 숫자 및 텍스트와 같은, 다양한 타입의 값을 저장할 수 있습니다. 이러한 다양한 타입의 값을 **데이터 타입**이라고 합니다. 데이터 타입은 개발자가 코드 작성 방법과 소프트웨어 실행 방법에 대한 결정을 내리는 데 도움이 되므로 소프트웨어 개발의 중요한 부분입니다. 또한 일부 데이터 타입에는 값에서 추가 정보를 변환하거나 추출하는 데 도움이 되는 기능이 있습니다.
+
+✅ 데이터 타입은 언어에서 제공하는 저수준 데이터 타입이기 때문에 JavaScript data primitives 라고 합니다. 6개의 기본 데이터 유형이 있습니다: 문자열, 숫자, bigint, 논리 자료형, undefined 그리고 심볼. 몇 분을 투자하여 각 기본 요소가 무엇을 나타낼 수 있는지 시각화하십시오. `zebra`은 무엇입니까? `0`? `true`는 어떤가요?
+
+### 숫자
+
+이전 세션에서, `myVariable`의 값은 숫자 데이터 유형입니다.
+
+`let myVariable = 123;`
+
+변수는 소수 또는 음수를 포함하여 모든 유형의 숫자를 저장할 수 있습니다. 숫자는 [next section](#operators)에서 다룰 산술 연산자와 함께 사용할 수도 있습니다.
+
+### 산술 연산자
+
+산술 함수를 수행할 때 사용할 여러 유형의 연산자가 있으며, 일부는 다음과 같습니다:
+
+| Symbol | Description                                                              | Example                          |
+| ------ | ------------------------------------------------------------------------ | -------------------------------- |
+| `+`    | **Addition**: Calculates the sum of two numbers                          | `1 + 2 //expected answer is 3`   |
+| `-`    | **Subtraction**: Calculates the difference of two numbers                | `1 - 2 //expected answer is -1`  |
+| `*`    | **Multiplication**: Calculates the product of two numbers                | `1 * 2 //expected answer is 2`   |
+| `/`    | **Division**: Calculates the quotient of two numbers                     | `1 / 2 //expected answer is 0.5` |
+| `%`    | **Remainder**: Calculates the remainder from the division of two numbers | `1 % 2 //expected answer is 1`   |
+
+✅ 시도해보세요! 브라우저의 콘솔에서 산술 연산을 시도하십시오. 놀라운 결과인가요?
+
+### 문자열
+
+문자열은 작은 따옴표 또는 큰 따옴표 사이에 있는 문자의 세트입니다.
+
+- `'This is a string'`
+- `"This is also a string"`
+- `let myString = 'This is a string value stored in a variable';`
+
+문자열을 만들 때 따옴표를 사용해야합니다. 그렇지 않으면 JavaScript가 변수명으로 간주합니다.
+
+### 문자열 서식
+
+문자열은 텍스트이며, 때때로 포맷팅이 필요합니다.
+
+둘 이상의 문자열을 **연결**하거나 결합하려면 `+` 연산자를 사용하세요.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+
+```
+
+✅ 왜 JavaScript에서 `1 + 1 = 2`이지만, `'1'+ '1'= 11` 일까요?  `'1' + 1`은 어떻습니까?
+
+**템플릿 리터럴** 따옴표 대신 backtick이 사용된다는 점을 제외하면, 문자열을 형식화하는 또 다른 방법입니다. 일반 텍스트가 아닌 모든 것은 placeholders `${ }`안에 배치해야합니다. 여기에는 문자열일 수도 있는 모든 변수가 포함됩니다.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello World!
+```
+
+어느 방법이든지 포맷팅 목표를 달성할 수 있지만, 템플릿 리터럴은 모든 공백과 줄 바꿈을 고려합니다.
+
+✅ 템플릿 리터럴과 일반적인 문자열은 언제 사용합니까?
+
+### 논리 자료형
+
+논리 자료형은 `true` 또는 `false` 두 가지 값만 가능합니다. 논리 자료형은 특정 조건이 충족되며 실행할 코드 라인을 결정하는 순간 도움이 될 수 있습니다. 대부분의 경우, [operators](#operators)는 논리 연산자 값을 설정하는 데 도움이 되며, 변수 초기화되거나 해당 값이 연산자로 업데이트되는 것을 알고 쓰는 경우가 많습니다.
+
+- `let myTrueBool = true`
+- `let myFalseBool = false`
+
+✅ 변수가 논리 자료형이 `true`로 설정되면 '참'으로 간주될 수 있습니다. 흥미롭게도, JavaScript에서는 [거짓으로 정의되지 않는다면 모든 값은 참입니다](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
+
+---
+
+## 🚀 도전
+
+JavaScript는 때때로 놀라운 방법으로 데이터 타입을 처리하는 것으로 유명합니다. 'gotchas'에 대해 약간 알아보세요. 예시: 대소문자 구분은 물릴 수 있습니다! 콘솔에서 다음을 시도하십시오: `let age = 1; let Age = 2; age == Age` (resolves `false` -- why?). 다른 문제를 찾을 수 있습니까?
+
+## 강의 후 퀴즈
+[Post-lecture quiz](../.github/post-lecture-quiz.md)
+
+## 리뷰 & 자기주도 학습
+
+[이 JavaScript 실습 목록](https://css-tricks.com/snippets/javascript/)을 살펴보고 시도해보십시오. 무엇을 배울 수 있나요?
+
+## 과제
+
+[Data Types Practice](../assignment.md)
--- a/2-js-basics/2-functions-methods/translations/README.ko.md
+++ b/2-js-basics/2-functions-methods/translations/README.ko.md
@@ -0,0 +1,192 @@
+# JavaScript 기초: 메소드와 함수
+
+![JavaScript Basics - Functions](../images/webdev101-js-functions.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## 강의 전 퀴즈
+[Pre-lecture quiz](../.github/pre-lecture-quiz.md)
+
+코드 작성에 대해 생각할 때 항상 코드를 읽을 수 있도록 해야합니다. 직설적이지 않지만, 코드는 작성된 것보다 더 많이 읽힙니다. 개발자의 툴 박스에서 유지관리 가능한 코드를 보장하는 핵심 도구는 **함수**입니다.
+
+[![Methods and Functions](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
+
+## 함수
+
+핵심으로, 함수는 요청 시 실행할 수 있는 코드 블록입니다. 동일한 작업을 여러 번 수행하는 시나리오에 적합합니다; 로직을 여러 위치에 복사하는 대신(특정 시기에 업데이트하기 어렵게 만들 수 있음), 한 위치에 로직을 집중하고, 작업이 필요할 때마다 호출할 수 있습니다. 다른 함수에서 함수를 호출할 수도 있습니다!.
+
+함수의 이름을 지정하는 능력도 중요합니다. 사소할 수 있지만, 이름은 코드 문서화를 빠르게 해줍니다. 버튼의 레이블로 생각할 수도 있습니다. "타이머 취소"라는 버튼을 클릭하면, 시계가 중지된다는 것을 알 수 있습니다.
+
+## 함수 만들고 호출하기
+
+함수 구문은 다음과 같습니다:
+
+```javascript
+function nameOfFunction() { // function definition
+ // function definition/body
+}
+```
+
+인사말 출력하는 함수를 만들고 싶다면, 다음과 같이 보일 수 있습니다:
+
+```javascript
+function displayGreeting() {
+  console.log('Hello, world!');
+}
+```
+
+함수를 호출(또는 invoke)할 때마다, 함수 이름 뒤에 `()`를 사용합니다. 함수를 호출하기 전후에 정의할 수 있다는 사실에 주목할 가치가 있습니다; JavaScript 컴파일러가 찾을 것입니다.
+
+```javascript
+// calling our function
+displayGreeting();
+```
+
+> **NOTE:** 이미 사용하고 있는 **메소드**라는 특별한 타입의 함수가 있습니다! 실제로, 데모에서 `console.log`를 사용할 때 보았습니다. 메소드가 함수와 다른 점은 메소드가 객체(`console`)에 연결되어있는 반면에, 함수는 free floating 상태라는 것입니다. 많은 개발자들이 같은 의미로 사용하는 걸 듣게 될 것입니다.
+
+### 좋은 함수 예시
+
+함수를 만들 때 알아야 할 몇 가지 좋은 사례가 있습니다
+
+- 항상 그렇듯이, 설명이 포함된 이름을 사용해서 함수가 수행하는 작업을 알 수 있습니다
+- **camelCasing** 를 사용하여 단어 결합
+- 특정 작업에 맞춘 함수 유지
+
+## 함수에 정보 전달하기
+
+함수를 더 재사용하기 위해 종종 정보를 전달하고 싶을 것입니다. 아래의 `displayGreeting` 예시를 고려하면 **Hello, world!** 만 출력됩니다. 만들 수 있는 가장 유용한 함수는 아닙니다. 인사할 사람의 이름을 정하는 것 처럼 더 유연하게 만들고 싶다면, 매개 변수를 추가할 수 있습니다. 매개 변수(**인수**)는 함수에 전달되는 추가 정보입니다.
+
+매개 변수는 괄호 안에 나열되며 쉼표로 구분됩니다.
+
+```javascript
+function name(param, param2, param3) {
+
+}
+```
+
+`displayGreeting` 함수를 업데이트해서 이름을 받아 출력할 수 있습니다.
+
+```javascript
+function displayGreeting(name) {
+  const message = `Hello, ${name}!`;
+  console.log(message);
+}
+```
+
+함수를 호출하고 매개 변수를 전달하려면, 괄호 안에 지정합니다.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher!" when run
+```
+
+## 기본 값
+
+더 많은 매개 변수를 추가하여 힘수를 유연하게 만들 수 있습니다. 그러나 모든 값을 지정하지 않으려면 어떻게 해야할까요? 인사 예시를 유지하면서 필요하면 이름을 남길 수 있지만 (인사말하는 사람을 알아야 합니다), 원하는대로 인사를 커스터마이징할 수 있습니다. 누군가 커스터마이징을 원하지 않는 경우에는 대신 기본값을 제공합니다. 매개 변수에 기본값을 제공하기 위해서는 변수에 대한 값을 지정하는 것과 같은 방식으로 설정합니다 - `parameterName = 'defaultValue'`. 전체 예시를 보십시오:
+
+```javascript
+function displayGreeting(name, salutation='Hello') {
+  console.log(`${salutation}, ${name}`);
+}
+```
+
+함수를 호출할 때, `salutation`에 대한 값을 설정할 것인지 결정할 수 있습니다.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher"
+
+displayGreeting('Christopher', 'Hi');
+// displays "Hi, Christopher"
+```
+
+## 반환 값
+
+지금까지 만든 함수는 항상 [console](https://developer.mozilla.org/en-US/docs/Web/API/console)에 출력됩니다. 특히 다른 서비스를 호출할 함수를 만들 때도 이것이 찾고 있을 수 있습니다. 하지만 계산을 하고 값을 다른 곳에 다시 제공하고자 헬퍼 함수를 만들고 싶으면 어떻게 해야합니까?
+
+**반환 값**을 사용하면 할 수 있습니다. 반환 값은 함수에 의해 반환되며, 문자열이나 숫자와 같은 리터럴 값을 저장할 수 있고 똑같은 변수에 저장할 수 있습니다.
+
+함수가 무언가 반환하면 `return` 키워드가 사용됩니다. `return` 키워드는 다음과 같이 반환되는 항목의 값 또는 참조를 예상합니다:
+
+```javascript
+return myVariable;
+```  
+
+인사 메시지를 만들고 호출하는 곳에 값을 반환해주는 함수를 만들 수 있습니다.
+
+```javascript
+function createGreetingMessage(name) {
+  const message = `Hello, ${name}`;
+  return message;
+}
+```
+
+이 함수를 호출하면 값을 변수에 저장합니다. 변수를 정적 값(`const name = 'Christopher'`)으로 지정하는 것과 거의 동일합니다.
+
+```javascript
+const greetingMessage = createGreetingMessage('Christopher');
+```
+
+## 함수의 파라미터에서 함수
+
+프로그래밍 경력을 쌓으면서, 함수를 매개 변수로 받는 함수를 보게 될 것 입니다. 이 깔끔한 트릭은 일반적으로 어떤 일이 발생되거나 완료되는 때를 알지 못하지만, 이에 반응하여 작업해야 한다는 것을 알고있을 때 사용됩니다.
+
+예시로, 타이머를 시작하고 완료되면 코드를 실행하는 [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)을 고려해보세요. 실행하려는 코드를 먼저 알려줘야 합니다. 함수에 대한 완벽한 직업인 것 같습니다!
+
+아래 코드를 실행하면, 3초 후에 **3 seconds has elapsed**는 메시지가 표시됩니다.
+
+```javascript
+function displayDone() {
+  console.log('3 seconds has elapsed');
+}
+// timer value is in milliseconds
+setTimeout(3000, displayDone);
+```
+
+### 익명 함수
+
+우리가 만든 것을 다시 보겠습니다. 한 번 사용할 이름으로 함수를 만들고 있습니다. 애플리케이션이 점점 복잡해지면서 한 번만 호출되는 함수를 많이 생성하는 것을 볼 수 있습니다. 이상적이지 않습니다. 결과적으로 항상 이름을 제공 할 필요가 없습니다!
+
+함수를 매개 변수로 전달할 때 미리 하나를 생성하지 않고 대신 매개 변수의 일부로 만들 수 있습니다. 동일한 `function` 키워드를 사용하지만 대신 매개 변수로 작성합니다.
+
+익명 함수를 사용하도록 위 코드를 다시 작성해 보겠습니다:
+
+```javascript
+setTimeout(3000, function() {
+  console.log('3 seconds has elapsed');
+});
+```
+
+새 코드를 실행해도 동일한 결과를 얻을 수 있습니다. 함수를 만들었지만, 이름을 지정할 필요가 없어졌습니다!
+
+### 화살표 함수
+
+많은 프로그래밍 언어(JavaScript 등)에서 흔히 볼 수 있는 한 가지 단축키는 **화살표** 또는 **fat 화살표** 함수를 사용하는 능력입니다. 화살표처럼 보이는 `=>`의 특수 인디케이터를 사용합니다. `=>` 를 사용하면, `function` 키워드를 건너 뛸 수 있습니다.
+
+화살표 함수를 사용하기 위해 코드를 다시 작성해봅니다:
+
+```javascript
+setTimeout(3000, () => {
+  console.log('3 seconds has elapsed');
+});
+```
+
+### 각 strategy를 사용하는 경우
+
+이제 매개 변수로 함수에 전달하는 세 가지 방법이 있으며 각자 언제 사용하는 지 궁금할 것입니다. 함수를 두번 이상 사용한다는 것을 알고 있다면 정상적으로 만들게 됩니다. 한 위치에만 사용하는 경우, 일반적으로 익명 함수를 사용하는 것이 가장 좋습니다. 화살표 함수를 사용하거나 더 전통적인 `함수` 구문을 사용하거나 안하거나 대부분의 요즘 개발자들이 `=>`를 선호한다는 것을 알게 될 것입니다.
+
+---
+
+## 🚀 도전
+
+함수와 메소드의 차이점을 한 문장으로 표현할 수 있나요? 시도해보세요!
+
+## 강의 후 퀴즈
+[Post-lecture quiz](../.github/post-lecture-quiz.md)
+
+## 리뷰 & 자기주도 학습
+
+화살표 함수는 코드 베이스에서 점점 많이 사용되고 있으므로, [읽어 볼 가치](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)가 있습니다. 함수 작성을 연습한 다음에 syntax로 다시 작성하십시오.
+
+## 과제
+
+[Fun with Functions](../assignment.md)
--- a/2-js-basics/3-making-decisions/translations/README.ko.md
+++ b/2-js-basics/3-making-decisions/translations/README.ko.md
@@ -0,0 +1,173 @@
+# JavaScript 기초: 결정하기
+
+![JavaScript Basics - Making decisions](../images/webdev101-js-decisions.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## 강의 전 퀴즈
+[Pre-lecture quiz](../.github/pre-lecture-quiz.md)
+
+결정을 내리고 코드가 실행되는 순서를 제어하면 코드를 재사용하며 강력하게 만들 수 있습니다. 이 강의에서는 JavaScript에서 데이터 흐름을 제어하기 위한 구문과 논리 자료형 데이터 타입을 함께 사용하는 중요성을 다룹니다.
+
+[![Making Decisions](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Making Decisions")
+
+## 논리 자료형에 대한 간략한 요약
+
+논리 자료형은 `true` 또는 `false` 두 가지 값만 가능합니다. 논리 자료형은 조건이 충족하는 순간 실행하는 코드 라인을 결정하는 데 도움 줄 수 있습니다.
+
+이렇게 참 또는 거짓으로 논리 자료형을 지정합니다:
+
+`let myTrueBool = true`
+`let myFalseBool = false`
+
+✅ Booleans(=논리 자료형)은 영국의 수학자, 철학자이자 논리 학자인 George Boole (1815-1864)의 이름에서 유래되었습니다.
+
+## 비교 연산자와 논리 연산자
+
+연산자는 논리 자료형 값을 비교하여 조건을 평가하는 데 사용합니다. 자주 사용되는 연산자 목록입니다.
+
+| Symbol | Description                                                                                                                                                   | Example            |
+| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `<`    | **Greater than**: Compares two values and returns the `true` Boolean data type if the value on the right side is larger than the left                         | `5 < 6 // true`    |
+| `<=`   | **Greater than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the right side is larger than or equal to the left | `5 <= 6 // true`   |
+| `>`    | **Less than**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right                            | `5 > 6 // false`   |
+| `>=`   | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than or equal to the right    | `5 >= 6 // false`  |
+| `===`  | **Strict equality**: Compares two values and returns the `true` Boolean data type if values on the right and left are equal AND are the same data type.       | `5 === 6 // false` |
+| `!==`  | **Inequality**: Compares two values and returns the opposite Boolean value of what a strict equality operator would return                                    | `5 !== 6 // true`  |
+
+✅ 브라우저 콘솔에서 비교문을 작성하여 복습해보십시오. 반환된 데이터가 놀랍나요?
+
+## If 문
+
+조건이 참이면 if 문은 블록 사이에서 코드를 실행합니다.
+
+```javascript
+if (condition){
+    //Condition was true. Code in this block will run.
+}
+```
+
+논리 연산자는 조건을 만들 때 종종 사용됩니다.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice){
+    //Condition was true. Code in this block will run.
+    console.log("Getting a new laptop!");
+}
+```
+
+## IF..Else 문
+
+`else` 문은 조건이 거짓일 때만 블록 사이에서 코드를 실행합니다. `if` 문와 함께 사용하는 것은 선택 사항입니다.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice){
+    //Condition was true. Code in this block will run.
+    console.log("Getting a new laptop!");
+}
+else{
+    //Condition was true. Code in this block will run.
+    console.log("Can't afford a new laptop, yet!");
+}
+```
+
+✅ 위 코드들을 브라우저 콘솔에서 실행하여 이해했는지 테스트하십시오. currentMoney 및 laptopPrice 변수 값이 변경하여 반환된 `console.log ()`가 변경됩니다.
+
+## 논리 연산자와 논리 자료형
+
+결정에는 두개 이상의 비교문이 필요할 수 있으며, 논리 연산자과 합쳐서 논리 자료형 값을 생성할 수 있습니다.
+
+| Symbol | Description                                                                                     | Example                                                                 |
+| ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `&&`   | **Logical AND**: Compares two Boolean expressions. Returns true **only** if both sides are true | `(5 > 6) && (5 < 6 ) //One side is false, other is true. Returns false` |
+| `||`   | **Logical OR**: Compares two Boolean expressions. Returns true if at least one side is true     | `(5 > 6) || (5 < 6) //One side is false, other is true. Returns true`   |
+| `!`    | **Logical NOT**: Returns the opposite value of a Boolean expression                             | `!(5 > 6) // 5 is not greater than 6, but "!" will return true`         |
+
+## 논리 연산자의 조건 및 결정
+
+논리 연산자는 if..else 문에서 조건을 만들 때 사용됩니다.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //Laptop price at 20 percent off
+
+if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
+    //Condition was true. Code in this block will run.
+    console.log("Getting a new laptop!");
+}
+else {
+    //Condition was true. Code in this block will run.
+    console.log("Can't afford a new laptop, yet!");
+}
+```
+
+### 부정 연산자
+
+`if...else` 문으로 사용하여 조건부 로직을 만드는 방법을 살펴 보았습니다. `if`에 들어가는 모든 것은 참/거짓으로 평가되어야 합니다. `!` 연산자를 사용하여 표현식을 _부정_ 할 수 있습니다. 이렇게 보입니다:
+
+```javascript
+if (!condition) {
+  // runs if condition is false
+} else {
+  // runs if condition is true
+}
+```
+
+### 삼항식
+
+`if...else`가 결정 로직을 표현하는 유일한 방법은 아닙니다. 삼항 연산자라는 것을 사용할 수 있습니다. 구문은 다음과 같습니다:
+
+```javascript
+let variable = condition ? <return this if true> : <return this if false>`
+```
+
+다음은 확실한 예시입니다:
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10
+let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;
+```
+
+✅ 잠시 시간을 내서 코드를 몇 번 읽으시기 바랍니다. 연산자가 어떻게 작동하는지 이해하나요?
+
+위의 내용은
+- `firstNumber`가 `secondNumber`보다 큰 경우
+- `biggestNumber`에 `firstNumber`를 할당하고
+- 그렇지 않으면 `secondNumber`를 할당한다는 내용입니다.
+  
+삼항 표현식은 아래 코드를 간단히 작성했습니다.
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+---
+
+## 🚀 도전
+
+논리 연산자로 프로그램을 먼저 만든 뒤, 삼항 표현식을 사용하여 다시 작성하십시오. 어떤 구문을 선호합니까?
+
+## 강의 후 퀴즈
+[Post-lecture quiz](../.github/post-lecture-quiz.md)
+
+## 리뷰 & 자기주도 학습
+
+[MDN에서](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) 사용할 수 있는 많은 연산자에 대해 자세히 알아보십시오.
+
+Josh Comeau'의 wonderful [operator lookup](https://joshwcomeau.com/operator-lookup/)을 통할 수 있습니다!
+
+## 과제
+
+[Operators](../assignment.md)
--- a/2-js-basics/4-arrays-loops/translations/README.ko.md
+++ b/2-js-basics/4-arrays-loops/translations/README.ko.md
@@ -0,0 +1,124 @@
+# JavaScript 기초: 배열과 반복
+
+![JavaScript Basics - Arrays](../images/webdev101-js-arrays.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## 강의 전 퀴즈
+[Pre-lecture quiz](../.github/pre-lecture-quiz.md)
+
+이 강의에서는 웹에서 상호 작용을 제공하는 언어인 JavaScript의 기본 사항을 다룹니다. 데이터를 컨트롤하는 데 사용하는 배열과 반복문에 대해 알아 봅니다.
+
+[![Arrays and Loops](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "Arrays and Loops")
+
+## 배열
+
+데이터 작업은 모든 언어의 일반적인 작업이며, 데이터가 배열과 같은 구조으로 구성되면 훨씬 더 쉬운 작업입니다. 배열을 사용하면, 데이터가 리스트와 유사한 구조로 저장됩니다. 배열의 주요 장점 중 하나는 한 배열에 다양한 타입의 데이터를 저장할 수 있다는 것입니다.
+
+✅ 배열은 우리 주변에 있습니다! 태양광 패널 배열과 같이 실생활의 사례를 생각할 수 있습니까?
+
+배열 구문은 대괄호 쌍으로 이루어져 있습니다.
+
+`let myArray = [];`
+
+빈 배열이지만, 이미 데이터가 채워진 배열로 선언할 수 있습니다. 배열에 들어있는 여러가지 값들은 쉼표로 구분합니다.
+
+`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
+
+배열 값에는 **index**라는 고유 값이 할당됩니다. 이 값은 배열 시작부터 측정한 길이를 기준으로 할당되는 정수입니다. 예시에서, 문자열 값 "Chocolate"의 인덱스는 0이고, "Rocky Road"의 인덱스는 4입니다. 배열 값을 검색하고, 변경하거나 넣으려면 대괄호가 있는 인덱스를 사용합니다.
+
+✅ 배열이 0 인덱스에서 시작하는 것이 놀랍나요? 일부 프로그래밍 언어에서 인덱스는 1부터 시작합니다. 이와 관련된 흥미로운 기록이 있습니다, [Wikipedia에서 읽을 수 있습니다](https://en.wikipedia.org/wiki/Zero-based_numbering).
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors[2]; //"Vanilla"
+```
+
+인덱스를 활용하여 값을 변경할 수 있습니다:
+
+```javascript
+iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
+```
+
+그리고 주어진 인덱스에 새로운 값을 넣을 수 있습니다:
+
+```javascript
+iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
+```
+
+✅ 값을 배열에 밀어 넣는 것보다 일반적인 방법은 array.push()와 같이 배열 연산자를 사용하는 것입니다.
+
+배열에 있는 아이템 개수를 확인하려면, `length` 속성을 사용합니다.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors.length; //5
+```
+
+✅ 스스로 시도해보세요! 브라우저의 콘솔을 사용하여 직접 배열을 만들고 조작하십시오.
+
+## 반복문
+
+루프는 반복적이거나 **반복하는** 작업을 허용하며, 많은 시간과 코드를 절약할 수 있습니다. 각 iteration은 변수, 값 그리고 조건에서 다룰 수 있습니다. JavaScript에는 여러 유형의 반복문이 있으며, 약간의 차이가 있지만 기본적으로 동일한 작업을 수행합니다: 데이터 반복입니다.
+
+### For 반복문
+
+`for` 반복문으로 반복하려면 세 부분이 필요합니다:
+    - `카운터` 일반적으로 반복 횟수를 세는 숫자로 초기화되는 변수입니다.
+    - `조건` 비교 연산자를 사용하여 `true` 일 때 반복을 중단시키는 표현식
+    - `반복-표현식` 각 반복의 마무리에 실행되며, 일반적으로 값을 세면서 변경할 떄 사용됩니다
+  
+```javascript
+    //Counting up to 10
+    for (let i = 0; i < 10; i++) {
+        console.log(i);
+    }
+```
+
+✅ 브라우저 콘솔에서 코드를 실행하십시오. 카운터, 조건 혹은 반복 표현식을 약간 변경하면 어떻게 되나요? 돌아와서 카운트 다운할 수 있습니까?
+
+### While 반복문
+
+`for` 반복문과 달리 `while` 반복문은 `true`일 때 반복을 중지하는 조건만 필요합니다. 반복의 조건은 일반적으로 카운터와 같이 다른 값에 의존하며, 반복하는 도중에 관리해야 합니다. 카운터의 시작 값은 반복문 밖에서 만들어야하며, 카운터 변경을 포함하여 조건을 충족하는 모든 표현식은 반복문 안에서 유지되어야 합니다.
+
+```javascript
+//Counting up to 10
+let i = 0;
+while (i < 10) {
+ console.log(i);
+ i++;
+}
+```
+
+✅ for 반복문과 while 반복문 중에 선택하는 이유는 무엇입니까? StackOverflow에 방문한 17K 명에게 동일한 질문을 했으며, 일부 의견은 [흥미로울 수 있습니다](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+
+## 반복문과 배열
+
+대부분의 조건문에서 반복을 그만하기 위해서는 배열 길이가 필요하고, 인덱스는 카운터 값이 될 수도 있기 때문에 배열은 반복문과 자주 사용됩니다.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+
+for (let i = 0; i < iceCreamFlavors.length; i++) {
+  console.log(iceCreamFlavors[i]);
+} //Ends when all flavors are printed
+```
+
+✅ 브라우저 콘솔에서 직접 만든 배열을 반복하여 실험해보세요.
+
+---
+
+## 🚀 도전
+
+for문과 while문 외에 배열을 반복하는 다른 방법이 있습니다. [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) 그리고 [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)도 있습니다. 해당 기술 중 하나를 사용하여 배열 반복을 다시 작성하십시오.
+
+## 강의 후 퀴즈
+[Post-lecture quiz](../.github/post-lecture-quiz.md)
+
+
+## 리뷰 & 자기주도 학습
+
+JavaScript의 배열에는 많은 메서드를 가져서 데이터 조작에 매우 유용합니다. [이 방법에 대해 읽어보고](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) 만든 배열에서 몇 가지(push, pop, slice 그리고 splice와 같은) 방식을 시도해보십시오.
+
+## 과제
+
+[Loop an Array](../assignment.md)
--- a/2-js-basics/translations/README.de.md
+++ b/2-js-basics/translations/README.de.md
@@ -11,4 +11,4 @@ JavaScript ist die Sprache des Webs. In diesen vier Lektionen lernen Sie die Gru

 ### Credits

-Diese Lektionen wurden mit ♥ ️von [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) und [Chris Noring](https://twitter.com/chris_noring)
+Diese Lektionen wurden mit ♥ ️von [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) und [Chris Noring](https://twitter.com/chris_noring) erstellt.
--- a/2-js-basics/translations/README.ko.md
+++ b/2-js-basics/translations/README.ko.md
@@ -0,0 +1,14 @@
+# JavaScript 소개하기
+
+JavaScript는 웹의 언어입니다. 이 네 가지 강의에서 기초를 배우게됩니다.
+
+### 주제
+
+1. [변수와 데이터 타입](../1-data-types/translations/README.ko.md)
+2. [함수와 메소드](../2-functions-methods/translations/README.ko.md)
+3. [JavaScript로 결정하기](../3-making-decisions/translations/README.ko.md)
+4. [배열과 반복](../4-arrays-loops/translations/README.ko.md)
+
+### 크레딧
+
+These lessons were written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) and [Chris Noring](https://twitter.com/chris_noring)