2025-01-26T02:15:33

doc/00_javascript.md

@@ -67,70 +67,3 @@ function changeColor() {
 * defer 속성을 사용하면 스크립트가 HTML 파싱이 완료된 후에 실행됩니다.
 * async 속성을 사용하면 스크립트가 다른 작업과 병렬로 실행됩니다.
 
-
-
-
----
-
-자바스크립트 기본 문법
-
-2.3 제어문
-조건문 (if, else if, else)
-반복문 (for, while, do while)
-2.4 함수
-함수 선언과 호출
-매개변수와 반환값
-화살표 함수
-3. 객체지향 프로그래밍
-3.1 객체와 프로토타입
-객체 생성
-프로퍼티와 메소드
-프로토타입 체인
-3.2 생성자 함수와 클래스
-생성자 함수 작성
-클래스 문법
-상속
-3.3 this 키워드
-this의 의미와 활용
-함수 호출 방식에 따른 this의 값
-4. DOM 조작
-4.1 DOM 소개
-DOM 트리
-노드 종류
-4.2 DOM 선택
-getElementById
-querySelector
-querySelectorAll
-4.3 DOM 조작
-요소 추가, 삭제, 수정
-스타일 변경
-이벤트 처리
-5. 비동기 프로그래밍
-5.1 비동기의 필요성
-동기와 비동기의 차이
-5.2 콜백 함수
-콜백 함수의 개념
-콜백 지옥
-5.3 Promise
-Promise 생성과 처리
-then, catch, finally
-5.4 async/await
-비동기 코드 동기화
-await 키워드
-6. 고급 자바스크립트
-6.1 모듈
-모듈 시스템 (CommonJS, ES Modules)
-import, export
-6.2 클로저
-클로저의 개념과 활용
-6.3 고차 함수
-map, filter, reduce 등
-6.4 디자인 패턴
-자주 사용되는 디자인 패턴 소개
-7. 실전 예제
-7.1 웹 페이지 동적 구성
-AJAX를 이용한 데이터 가져오기
-웹 페이지 요소 동적으로 변경
-7.2 간단한 웹 애플리케이션 만들기
-To-Do List 만들기
-간단한 게임 만들기

doc/01_변수와_데이터_타입.md

@@ -1,71 +0,0 @@
-# 자바스크립트의 변수와 자료형
-자바스크립트에서 변수는 데이터를 저장하는 공간입니다. 우리가 프로그램을 만들 때 다양한 종류의 데이터(숫자, 문자, 등)를 사용하게 되는데, 이러한 데이터를 변수에 저장하여 필요할 때마다 사용할 수 있습니다.
-
-## 변수 선언
-변수를 선언할 때는 let, const, var 키워드를 사용합니다.
-
-* let: 가장 많이 사용되는 키워드로, 변수의 값을 재할당할 수 있습니다.
-* const: 상수를 선언할 때 사용하며, 한 번 값을 할당하면 변경할 수 없습니다.
-* var: 예전부터 사용되던 키워드이지만, let과 const의 등장으로 인해 사용이 줄어들었습니다. var로 선언된 변수는 함수 범위 내에서 유효하며, 재할당이 가능합니다.
-
-```javascript
-let age = 30; // let 키워드로 변수 선언
-const name = "홍길동"; // const 키워드로 상수 선언
-var city = "서울"; // var 키워드로 변수 선언
-```
-
-## 자료형
-자바스크립트에서 사용되는 주요 자료형은 다음과 같습니다.
-
-* Number: 숫자를 나타냅니다. 정수, 소수점, 무한대 등을 표현할 수 있습니다.
-* String: 문자열을 나타냅니다. 작은따옴표(')나 큰따옴표(")로 감싸서 표현합니다.
-* Boolean: 참(true) 또는 거짓(false)을 나타냅니다.
-* null: 값이 없음을 나타내는 특별한 키워드입니다.
-* undefined: 변수가 선언되었지만 값이 할당되지 않은 상태를 나타냅니다.
-* Object: 복잡한 데이터를 저장하기 위한 객체를 나타냅니다.
-* Symbol: 고유한 값을 생성하기 위한 자료형입니다.
-
-```javascript
-let num = 10; // 숫자
-let str = "hello"; // 문자열
-let isTrue = true; // 불리언
-let person = { name: "홍길동", age: 30 }; // 객체
-```
-
-## 자료형 변환
-자바스크립트는 동적 타이핑 언어이므로, 변수의 자료형이 실행 중에 변경될 수 있습니다.
-```javascript
-let x = 10; // x는 숫자
-x = "Hello"; // x는 문자열로 변환
-```
-
-## typeof 연산자
-변수의 자료형을 확인하려면 typeof 연산자를 사용합니다.
-```javascript
-let num = 10;
-console.log(typeof num); // "number" 출력
-```
-
-## 변수 범위
-* 전역 변수: 어디서든 접근 가능한 변수입니다.
-* 지역 변수: 함수 내에서만 사용 가능한 변수입니다.
-
-```javascript
-let globalVar = "전역 변수"; // 전역 변수
-
-function myFunction() {
-  let localVar = "지역 변수"; // 지역 변수
-  console.log(localVar); // 지역 변수 출력
-  console.log(globalVar); // 전역 변수 출력
-}
-```
-
-## 상수 (const)
-한 번 값을 할당하면 변경할 수 없는 값을 저장하는 데 사용됩니다.
-
-```javascript
-const PI = 3.14159;
-// PI = 3.1416; // 오류 발생 (상수의 값을 변경할 수 없음)
-```
-
-

doc/01_변수와_상수.md

@@ -0,0 +1,96 @@
+# 자바스크립트의 변수와 상수
+자바스크립트에서 **변수(variable)**와 **상수(constant)**는 데이터를 저장하고 다루는 핵심 개념입니다. 이 둘을 제대로 이해하는 것은 자바스크립트 프로그래밍의 기초를 닦는 데 필수적입니다.
+
+## 변수 
+변수는 데이터를 저장할 수 있는 이름 붙은 컨테이너입니다. 이를 통해 프로그래머는 프로그램 실행 중 데이터를 동적으로 변경하거나 활용할 수 있습니다.
+자바스크립트에서는 변수를 선언하기 위해 `var`, `let`, `const` 키워드를 사용합니다.
+
+* const: 값을 변경할 필요가 없는 경우, 예를 들어 상수나 불변 데이터를 선언할 때 사용합니다.
+* let: 값이 변할 가능성이 있는 변수에 사용합니다.
+* var: 가능한 사용을 피합니다. (호이스팅과 함수 스코프 문제가 디버깅을 어렵게 만듭니다.)
+
+```javascript
+// 상수를 사용해 변하지 않는 값을 저장
+const PI = 3.14159;
+
+// 변수를 사용해 변하는 값 저장
+let radius = 5;
+
+// 원의 면적 계산
+let area = PI * radius * radius;
+console.log(`원의 면적은 ${area}입니다.`);
+
+// 반지름을 변경
+radius = 7;
+area = PI * radius * radius;
+console.log(`반지름이 바뀐 후 면적은 ${area}입니다.`);
+```
+
+## var
+var는 ES6 이전부터 사용되던 변수 선언 키워드입니다.
+* 함수 스코프를 가집니다. 즉, 변수는 함수 내부에서만 유효하며 블록({})을 무시합니다.
+* 선언 전에 사용할 수 있지만, 이는 **호이스팅(hoisting)**에 의해 `undefined`로 초기화됩니다.
+
+```javascript
+console.log(x); // undefined
+var x = 10;
+console.log(x); // 10
+```
+
+## let
+let은 ES6에서 도입된 변수 선언 방식으로, 기존 `var`의 단점을 보완했습니다.
+
+* 블록 스코프를 가집니다. 변수는 선언된 블록({}) 내에서만 유효합니다.
+* 같은 스코프 내에서 동일한 이름의 변수를 중복 선언할 수 없습니다.
+* 선언 전에 접근하려 하면 **참조 에러(ReferenceError)**가 발생합니다.
+
+```javascript
+{
+  let y = 20;
+  console.log(y); // 20
+}
+// console.log(y); // ReferenceError
+```
+
+## const
+const는 **상수(constant)**를 선언할 때 사용합니다.
+
+* 선언 이후 값을 변경할 수 없습니다. 하지만 객체나 배열은 내부 데이터를 수정할 수 있습니다.
+* 블록 스코프를 가집니다.
+* 선언과 동시에 초기화를 해야 합니다.
+
+```javascript
+const z = 30;
+console.log(z); // 30
+// z = 40; // TypeError: Assignment to constant variable
+
+const obj = { a: 1 };
+obj.a = 2; // 객체의 속성은 변경 가능
+console.log(obj); // { a: 2 }
+```
+
+## 호이스팅(Hoisting)
+
+* var로 선언된 변수는 선언이 코드의 최상단으로 끌어올려진 것처럼 동작합니다.
+* let과 const는 호이스팅되지만, 초기화가 되지 않아 선언 전에 접근 시 에러가 발생합니다.
+
+```javascript
+console.log(a); // undefined
+var a = 10;
+
+console.log(b); // ReferenceError
+let b = 20;
+```
+
+## 중복 선언 금지
+
+let과 const는 동일한 스코프 내에서 동일한 이름의 변수를 선언할 수 없습니다.
+```javascript
+let x = 1;
+let x = 2; // SyntaxError
+```
+
+## 선언과 초기화의 타이밍
+
+* const는 선언과 동시에 초기화가 필요합니다.
+* let은 선언 후 초기화가 가능합니다.

doc/02_데이터_타입과_형변환.md

@@ -0,0 +1,141 @@
+# 데이터 타입과 형 변환
+
+자바스크립트에서 **데이터 타입(Data Type)**은 값의 종류를 정의하며, 프로그래밍 언어의 기본 요소입니다. 또한, 동적 타이핑(dynamically typed) 언어인 자바스크립트에서는 값의 타입이 실행 중에 변경될 수 있기 때문에 **형 변환(Type Conversion)**에 대한 이해가 중요합니다.
+
+## 자바스크립트의 데이터 타입
+자바스크립트의 데이터 타입은 크게 **원시 타입(Primitive Type)**과 **참조 타입(Reference Type)**으로 나뉩니다.
+
+### 원시 타입(Primitive Type)
+값 자체가 메모리에 저장되는 데이터 타입입니다.
+
+* 숫자(Number): 모든 숫자는 64비트 부동소수점으로 저장됩니다. 정수와 실수를 구분하지 않습니다.
+    - 예: 42, 3.14, -10
+    - 특별한 값: NaN(Not a Number), Infinity, -Infinity
+* 문자열(String): 텍스트 데이터로, 작은따옴표(')나 큰따옴표(") 또는 백틱(`)으로 묶어 표현합니다.
+    - 예: "Hello", 'World', \`Template ${value}\`
+* 불리언(Boolean): 참과 거짓을 나타냅니다.
+    - 예: true, false
+* undefined: 변수가 선언되었으나 값이 할당되지 않은 상태.
+    - 예: let x; console.log(x); // undefined
+* null: 값이 없음을 명시적으로 나타냄.
+    - 예: let y = null;
+* 심볼(Symbol): 고유한 식별자를 생성하기 위해 사용됩니다.
+    - 예: const sym = Symbol("unique");
+
+#### 템플릿 리터럴 (ES6)
+백틱(`)으로 감싸서 문자열을 표현하는 방법으로, 변수를 직접 삽입하거나 여러 줄의 문자열을 간편하게 작성할 수 있습니다.
+```javascript
+let name = "Alice";
+let age = 30;
+let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
+```
+
+### 참조 타입(Reference Type)
+값이 메모리 주소(참조)에 저장되며, 복잡한 데이터 구조를 표현합니다.
+
+* 객체(Object): 키-값 쌍으로 이루어진 데이터 구조.
+    - 예: { name: "Alice", age: 25 }
+* 배열(Array): 순서가 있는 데이터 리스트.
+    - 예: [1, 2, 3, 4]
+* 함수(Function): 실행 가능한 코드 블록.
+    - 예: function add(a, b) { return a + b; }
+* 날짜(Date)
+* 정규표현식(RegExp)
+
+
+## 데이터 타입 확인
+
+### typeof 연산자
+
+데이터 타입을 문자열로 반환합니다.
+```javascript
+console.log(typeof 42); // "number"
+console.log(typeof "Hello"); // "string"
+console.log(typeof true); // "boolean"
+console.log(typeof undefined); // "undefined"
+console.log(typeof null); // "object" (버그로 인해 이렇게 반환됨)
+console.log(typeof Symbol()); // "symbol"
+console.log(typeof { key: "value" }); // "object"
+```
+
+### Array.isArray 메서드
+
+배열인지 확인하는 방법입니다.
+
+```javascript
+console.log(Array.isArray([1, 2, 3])); // true
+console.log(Array.isArray({})); // false
+```
+
+## 형 변환(Type Conversion)
+### 암시적 형 변환 (Implicit Type Coercion)
+자바스크립트가 특정 상황에서 자동으로 데이터 타입을 변환하는 경우입니다.
+
+#### 문자열과 숫자의 결합
+```javascript
+console.log("5" + 2); // "52" (숫자가 문자열로 변환)
+console.log("5" - 2); // 3 (문자열이 숫자로 변환)
+```
+#### 불리언 변환
+자바스크립트는 조건문에서 값을 불리언으로 암시적으로 변환합니다.
+    - falsy 값: false, 0, "", null, undefined, NaN
+    - 나머지는 모두 truthy 값으로 평가됩니다.
+```javascript
+console.log(Boolean(0)); // false
+console.log(Boolean("Hello")); // true
+```
+
+### 명시적 형 변환 (Explicit Type Conversion)
+개발자가 명시적으로 데이터 타입을 변환하는 방법입니다.
+
+#### 숫자로 변환
+`Number(string)` 또는 `parseInt(string)`, `parseFloat(string)`를 사용합니다.
+
+```javascript
+console.log(Number("123")); // 123
+console.log(Number("Hello")); // NaN
+console.log(Number(true)); // 1
+console.log(Number(false)); // 0
+```
+
+#### 문자열로 변환
+`String(number)` 또는 `${number}` 또는 `toString()` 메서드를 사용합니다.
+
+```javascript
+console.log(String(123)); // "123"
+console.log((123).toString()); // "123"
+console.log(String(true)); // "true"
+```
+
+#### 불리언으로 변환
+`Boolean()` 함수를 사용합니다.
+
+```javascript
+console.log(Boolean(1)); // true
+console.log(Boolean(0)); // false
+console.log(Boolean("")); // false
+console.log(Boolean("Text")); // true
+```
+
+## 데이터 타입의 특이한 사례
+### null과 undefined
+null은 "값이 없음"을 명시적으로 나타내지만, undefined는 "값이 할당되지 않음"을 나타냅니다.
+
+```javascript
+console.log(null == undefined); // true
+console.log(null === undefined); // false
+```
+### NaN (Not a Number)
+숫자가 아닌 값을 연산하려 할 때 발생하며, 자기 자신과도 같지 않은 유일한 값입니다.
+
+```javascript
+console.log(NaN === NaN); // false
+console.log(Number.isNaN(NaN)); // true
+```
+### 객체와 배열의 형 변환
+객체는 문자열로 변환될 때 "[object Object]"를 반환합니다.
+```javascript
+const obj = { a: 1 };
+console.log(String(obj)); // "[object Object]"
+console.log(obj + ""); // "[object Object]"
+```

doc/02_연산자.md

@@ -1,75 +0,0 @@
-# 연산자
-
-자바스크립트에서 연산자는 데이터를 가지고 다양한 연산을 수행하는 데 사용됩니다. 덧셈, 뺄셈과 같은 간단한 계산부터 복잡한 논리 연산까지, 연산자는 프로그램의 핵심적인 역할을 합니다.
-
-자바스크립트에서 사용되는 연산자는 크게 다음과 같이 분류할 수 있습니다.
-
-## 산술 연산자
-* 덧셈: +
-* 뺄셈: -
-* 곱셈: *
-* 나눗셈: /
-* 나머지: %
-* 증가: ++
-* 감소: --
-
-```javascript
-let x = 10;
-let y = 5;
-
-console.log(x + y); // 15
-console.log(x - y); // 5
-console.log(x * y); // 50
-console.log(x / y); // 2
-console.log(x % y); // 0
-```
-
-## 할당 연산자
-* 단순 할당: =
-* 복합 할당: +=, -=, *=, /=, %=
-
-```javascript
-let a = 10;
-a += 5; // a = a + 5; 와 같음
-console.log(a); // 15
-```
-
-## 비교 연산자
-* 같음: == (형 변환 후 비교), === (형 변환 없이 비교)
-* 다름: !=, !==
-* 크다: >
-* 작다: <
-* 크거나 같다: >=
-* 작거나 같다: <=
-
-```javascript
-let b = 10;
-console.log(b == "10"); // true (형 변환 후 비교)
-console.log(b === "10"); // false (형 변환 없이 비교)
-```
-
-## 논리 연산자
-* AND: &&
-* OR: ||
-* NOT: !
-
-```javascript
-let c = true;
-let d = false;
-console.log(c && d); // false
-console.log(c || d); // true
-console.log(!c); // false
-```
-
-## 문자열 연결 연산자
-* 문자열 연결: +
-```javascript
-let str1 = "Hello";
-let str2 = " World";
-console.log(str1 + str2); // Hello World
-```
-
-## 연산자 우선순위
-연산자는 각각 우선순위가 있으며, 우선순위가 높은 연산자가 먼저 계산됩니다.
-
-괄호를 사용하여 연산 순서를 변경할 수 있습니다.

doc/03_내장_객체.md

@@ -0,0 +1,433 @@
+# 내장 객체
+
+자바스크립트는 프로그래머가 효율적으로 코드를 작성할 수 있도록 다양한 **내장 객체(Built-in Objects)**를 제공합니다. 내장 객체는 브라우저나 Node.js 환경에서 기본적으로 사용할 수 있는 객체이며, 자바스크립트의 기능을 확장하거나 데이터 처리를 간편하게 만들어줍니다.
+
+내장 객체는 크게 **기본 객체(Core Objects)**와 **호스트 객체(Host Objects)**로 나뉩니다.
+
+* 기본 객체: ECMAScript 표준에 정의된 객체로, 모든 환경에서 동일하게 사용 가능.
+    - 예: Object, Array, String, Math
+* 호스트 객체: 실행 환경(브라우저, Node.js 등)에서 제공하는 객체.
+    - 브라우저 예: window, document, fetch
+    - Node.js 예: process, fs
+
+## Object 객체
+모든 객체의 부모 역할을 하는 최상위 객체입니다. 객체를 생성하거나 조작할 때 사용됩니다.
+
+```javascript
+const obj = { name: "Alice", age: 25 };
+console.log(Object.keys(obj)); // ["name", "age"]
+console.log(Object.values(obj)); // ["Alice", 25]
+console.log(Object.entries(obj)); // [["name", "Alice"], ["age", 25]]
+```
+
+## Array 객체
+배열은 순서가 있는 데이터 리스트를 다루기 위한 객체입니다.
+
+### 메서드
+* push(): 배열의 끝에 새로운 요소를 추가합니다.
+* pop(): 배열의 마지막 요소를 제거하고 반환합니다.
+* shift(): 배열의 첫 번째 요소를 제거하고 반환합니다.
+* unshift(): 배열의 처음에 새로운 요소를 추가합니다.
+* splice(): 배열의 특정 위치에 요소를 추가, 삭제, 교체합니다.
+* slice(): 배열의 일부분을 잘라서 새로운 배열을 반환합니다.
+* concat(): 두 개 이상의 배열을 합쳐 새로운 배열을 만듭니다.
+* join(): 배열의 모든 요소를 문자열로 연결합니다.
+* indexOf(): 배열에서 특정 요소의 인덱스를 찾습니다.
+* includes(): 배열에 특정 요소가 포함되어 있는지 확인합니다.
+* forEach(): 배열의 모든 요소를 순회하며 함수를 실행합니다.
+* map(): 배열의 각 요소를 변환하여 새로운 배열을 생성합니다.
+* filter(): 특정 조건을 만족하는 요소만 추출하여 새로운 배열을 생성합니다.
+* reduce(): 배열의 모든 요소를 하나의 값으로 축소합니다.
+
+```javascript
+const arr = [1, 2, 3, 4];
+arr.push(5); // [1, 2, 3, 4, 5]
+const squared = arr.map(x => x ** 2); // [1, 4, 9, 16, 25]
+console.log(squared);
+```
+```javascript
+let numbers = [1, 2, 3, 4, 5];
+
+// 배열의 길이
+console.log(numbers.length); // 5
+
+// 요소 추가
+numbers.push(6);
+console.log(numbers); // [1, 2, 3, 4, 5, 6]
+
+// 요소 삭제
+numbers.splice(2, 1); // 인덱스 2부터 1개 요소 삭제
+console.log(numbers); // [1, 2, 4, 5, 6]
+
+// 모든 요소를 더하기
+let sum = numbers.reduce((total, num) => total + num, 0);
+console.log(sum); // 18
+
+// 짝수만 추출
+let evenNumbers = numbers.filter(num => num % 2 === 0);
+console.log(evenNumbers); // [2, 4, 6]
+```
+
+## String 객체
+**문자열(String)**은 텍스트 데이터를 나타내는 자바스크립트의 기본적인 데이터형입니다. 문자열은 작은따옴표(')나 큰따옴표(")로 감싸서 표현합니다.
+
+* 불변성: 한번 생성된 문자열은 변경할 수 없습니다. 새로운 문자열을 만들어 할당해야 합니다.
+* 인덱스: 문자열의 각 문자는 0부터 시작하는 숫자로 접근할 수 있는 인덱스를 가집니다.
+
+### 메서드
+* slice(): 문자열의 일부분을 추출
+* substring(): 문자열의 일부분을 추출 (slice와 유사하지만 음수 인덱스를 지원하지 않음)
+* substr(): 문자열의 일부분을 추출 (deprecated)
+* replace(): 문자열의 일부분을 다른 문자열로 대체
+* trim(): 문자열 양쪽의 공백을 제거
+* toLowerCase(): 문자열을 모두 소문자로 변환
+* toUpperCase(): 문자열을 모두 대문자로 변환
+
+```javascript
+const str = "Hello, World!";
+console.log(str.length); 
+console.log(str.charAt(0));
+console.log(str.indexOf("World"));
+console.log(str.toUpperCase()); // "HELLO, WORLD!"
+console.log(str.slice(0, 5)); // "Hello"
+console.log(str.split(", ")); // ["Hello", "World!"]
+```
+
+## Number 객체
+숫자를 다루기 위한 객체로, 정수와 실수 연산을 지원합니다. 
+
+매우 정확한 계산이 필요한 경우에는 BigInt를 사용하거나 별도의 라이브러리를 활용해야 합니다.
+
+### 속성
+* Number.MAX_VALUE: JavaScript에서 표현할 수 있는 가장 큰 양수
+* Number.MIN_VALUE: JavaScript에서 표현할 수 있는 가장 작은 양수 (0보다 크지만 0에 가장 가까운 수)
+* Number.POSITIVE_INFINITY: 양의 무한대
+* Number.NEGATIVE_INFINITY: 음의 무한대
+* Number.NaN: Not a Number. NaN을 처리할 때는 isNaN() 함수를 사용하는 것이 좋습니다.
+* Number.EPSILON: 두 개의 표현 가능한 숫자 사이의 최소 간격
+
+### 메서드
+* toFixed(): 소수점 이하 자릿수를 지정하여 반올림한 문자열을 반환합니다.
+* toExponential(): 지수 표기법으로 변환합니다.
+* toPrecision(): 유효 자릿수를 지정하여 반올림한 문자열을 반환합니다.
+* toString(): 숫자를 문자열로 변환합니다.
+* parseInt(): 문자열을 정수로 변환합니다.
+* parseFloat(): 문자열을 부동소수점 숫자로 변환합니다.
+
+```javascript
+const num = 123.456;
+console.log(num.toFixed(2)); // "123.46"
+console.log(Number.isNaN(NaN)); // true
+```
+
+## Boolean 객체
+불리언 값을 다룹니다.
+
+```javascript
+const bool = new Boolean(false); // 객체 생성 (잘 사용하지 않음)
+console.log(bool.valueOf()); // false
+```
+
+## Math 객체
+수학 계산을 위한 정적 메서드와 속성을 제공합니다.
+
+### 메서드
+* Math.abs(x): 숫자 x의 절댓값을 반환합니다.
+* Math.ceil(x): x보다 크거나 같은 가장 작은 정수를 반환합니다. (올림)
+* Math.floor(x): x보다 작거나 같은 가장 큰 정수를 반환합니다. (버림)
+* Math.round(x): x를 반올림하여 정수를 반환합니다.
+* Math.random(): 0 이상 1 미만의 난수를 생성합니다.
+* Math.max(x, y, ...): 여러 개의 숫자 중 가장 큰 값을 반환합니다.
+* Math.min(x, y, ...): 여러 개의 숫자 중 가장 작은 값을 반환합니다.
+* Math.pow(x, y): x의 y승을 계산합니다.
+* Math.sqrt(x): x의 제곱근을 계산합니다.
+* sin(), cos(), tan(), asin(), acos(), atan() 등 : 다양한 삼각함수를 제공합니다.
+
+```javascript
+// 원의 넓이 계산
+const radius = 5;
+const area = Math.PI * radius * radius;
+console.log(area); // 78.53981633974483
+
+// 0부터 10 사이의 랜덤 정수 생성
+const randomNum = Math.floor(Math.random() * 11);
+console.log(randomNum);
+
+// 두 수 중 큰 수 찾기
+const maxNumber = Math.max(10, 5, 20);
+console.log(maxNumber); // 20
+```
+
+## Date 객체
+날짜와 시간을 처리하는 데 사용됩니다.
+
+```javascript
+// 현재 시각을 나타내는 Date 객체 생성
+const now = new Date();
+
+// 특정 날짜를 나타내는 Date 객체 생성
+const specificDate = new Date(2023, 11, 25); // 월은 0부터 시작하므로 12월은 11
+```
+
+### Date 생성자에 전달할 수 있는 인수:
+* 년, 월, 일, 시, 분, 초, 밀리초: 각각의 값을 숫자로 지정하여 날짜를 생성합니다.
+* 문자열: ISO 8601 형식의 문자열 또는 자바스크립트에서 이해할 수 있는 다른 날짜/시간 표현식을 사용할 수 있습니다.
+* 타임스탬프: 1970년 1월 1일 00:00:00 UTC부터 경과된 밀리초를 나타내는 숫자입니다.
+
+### 메서드
+* getFullYear(): 연도를 반환합니다.
+* getMonth(): 월을 반환합니다. (0: 1월, 11: 12월)
+* getDate(): 일을 반환합니다.
+* getDay(): 요일을 반환합니다. (0: 일요일, 6: 토요일)
+* getHours(): 시를 반환합니다.
+* getMinutes(): 분을 반환합니다.
+* getSeconds(): 초를 반환합니다.
+* getMilliseconds(): 밀리초를 반환합니다.
+* getTime(): 1970년 1월 1일 00:00:00 UTC부터 경과된 밀리초를 반환합니다.
+* toDateString(): 날짜를 문자열로 변환합니다.
+* toTimeString(): 시간을 문자열로 변환합니다.
+* toISOString(): ISO 8601 형식의 문자열로 변환합니다.
+* toLocaleString(): 지역 설정에 맞는 문자열로 변환합니다.
+
+```javascript
+const now = new Date();
+console.log(now.getFullYear()); // 현재 연도
+console.log(now.getMonth()); // 현재 월 (0부터 시작)
+console.log(now.toISOString()); // ISO 형식의 날짜 문자열
+```
+
+* UTC 시간: getUTCXXX() 메서드를 사용하여 UTC 시간을 가져올 수 있습니다.
+* 현지 시간: 기본적으로 getXXX() 메서드는 시스템의 현지 시간을 반환합니다.
+* 월: 월은 0부터 시작하므로 1월은 0으로 표현합니다.
+* 시간대: Date 객체는 시스템의 시간대 설정에 따라 다른 값을 반환할 수 있습니다.
+* 타임존 오프셋: getTimezoneOffset() 메서드를 사용하여 UTC와의 시간 차이를 확인할 수 있습니다.
+
+## JSON 객체
+JSON(JavaScript Object Notation) 데이터를 다루는 데 사용됩니다.
+
+### 메서드
+* JSON.stringify(): 객체를 JSON 문자열로 변환
+* JSON.parse(): JSON 문자열을 객체로 변환
+
+```javascript
+const obj = { name: "Alice", age: 25 };
+const json = JSON.stringify(obj); // '{"name":"Alice","age":25}'
+console.log(json);
+
+const parsed = JSON.parse(json);
+console.log(parsed.name); // "Alice"
+```
+
+## RegExp 객체
+정규표현식을 다루는 객체입니다. 문자열 검색과 패턴 매칭에 사용됩니다.
+
+```javascript
+let str = "The quick brown fox jumps over the lazy dog.";
+let re = /brown/;
+
+// test() 메서드 사용
+console.log(re.test(str)); // true
+
+// exec() 메서드 사용
+let result = re.exec(str);
+console.log(result); // ["brown"]
+
+// replace() 메서드 사용
+let newStr = str.replace(re, "red");
+console.log(newStr); // The quick red fox jumps over the lazy dog.
+```
+
+### 생성
+* 리터럴 표기법 : 슬래시(/) 사이에 정규 표현식 패턴을 직접 작성하는 방법입니다. 간단한 패턴을 정의할 때 주로 사용합니다.
+```javascript
+let re = /pattern/;
+```
+* 생성자 함수 : RegExp 생성자 함수를 사용하여 정규 표현식을 생성하는 방법입니다. 동적으로 패턴을 생성해야 할 때 유용합니다.
+```javascript
+let re = new RegExp('pattern');
+```
+### 메서드
+* test(): 주어진 문자열이 정규 표현식과 일치하는지 여부를 반환합니다. (boolean)
+* exec(): 주어진 문자열에서 정규 표현식과 일치하는 첫 번째 부분을 배열로 반환합니다.
+* match(): 주어진 문자열에서 정규 표현식과 일치하는 모든 부분을 배열로 반환합니다.
+* search(): 주어진 문자열에서 정규 표현식과 일치하는 첫 번째 인덱스를 반환합니다.
+* replace(): 주어진 문자열에서 정규 표현식과 일치하는 부분을 다른 문자열로 치환합니다.
+
+## Map
+키-값 쌍을 저장하는 객체. ES6에서 추가된 데이터 구조로, 보다 효율적인 데이터 관리가 가능합니다.
+
+* 다양한 데이터 타입의 키: 일반 객체는 문자열만 키로 사용할 수 있지만, Map은 문자열뿐만 아니라 숫자, 객체 등 어떤 타입의 데이터든 키로 사용할 수 있습니다.
+* 순서 유지: Map은 요소가 추가된 순서를 기억합니다.
+* 중복된 키 허용하지 않음: 하나의 키에 대해 여러 개의 값을 저장할 수 없습니다.
+* 크기 속성: size 속성을 통해 Map 객체에 저장된 요소의 개수를 쉽게 확인할 수 있습니다.
+
+```javascript
+// Map 객체 생성
+const myMap = new Map();
+
+// 키-값 쌍 추가
+myMap.set('name', '홍길동');
+myMap.set(1, '숫자 값');
+myMap.set({ a: 1 }, '객체 키');
+
+// 값 가져오기
+console.log(myMap.get('name')); // 홍길동
+console.log(myMap.get(1)); // 숫자 값
+
+// 키 존재 여부 확인
+console.log(myMap.has('name')); // true
+
+// 모든 요소 순회
+for (let [key, value] of myMap) {
+  console.log(key, value);
+}
+
+// Map 객체의 크기
+console.log(myMap.size);
+```
+
+### 메서드
+* set(key, value): Map에 새로운 키-값 쌍을 추가합니다.
+* get(key): 지정된 키에 해당하는 값을 반환합니다.
+* has(key): 지정된 키가 Map에 존재하는지 확인합니다.
+* delete(key): 지정된 키와 값을 삭제합니다.
+* clear(): Map의 모든 요소를 삭제합니다.
+* keys(): 모든 키를 포함하는 Iterator를 반환합니다.
+* values(): 모든 값을 포함하는 Iterator를 반환합니다.
+* entries(): 모든 키-값 쌍을 포함하는 Iterator를 반환합니다.
+
+## Set
+중복되지 않는 값들의 집합. ES6에서 추가된 데이터 구조로, 보다 효율적인 데이터 관리가 가능합니다.
+
+* 중복 허용 X: 같은 값이 여러 번 추가되어도 한 번만 저장됩니다.
+* 순서 유지: 값이 추가된 순서대로 유지됩니다.
+* 다양한 데이터 타입 지원: 숫자, 문자열, 객체 등 다양한 데이터 타입을 저장할 수 있습니다.
+* 크기 속성: size 속성을 통해 Set 객체에 저장된 요소의 개수를 쉽게 확인할 수 있습니다.
+
+```javascript
+// 빈 Set 생성
+const mySet = new Set();
+
+// 값 추가
+mySet.add(1);
+mySet.add('hello');
+mySet.add(true);
+
+// 중복된 값 추가 시 무시
+mySet.add(1); // 이미 존재하므로 추가되지 않음
+
+// 값 존재 여부 확인
+console.log(mySet.has(1)); // true
+
+// 값 삭제
+mySet.delete(1);
+console.log(mySet.has(1)); // false
+
+// 모든 값 순회
+for (const value of mySet) {
+  console.log(value);
+}
+```
+
+### 메서드
+* add(value): Set에 새로운 값을 추가합니다.
+* delete(value): Set에서 특정 값을 삭제합니다.
+* has(value): Set에 특정 값이 존재하는지 확인합니다.
+* clear(): Set의 모든 값을 삭제합니다.
+* size: Set의 크기(요소의 개수)를 나타냅니다.
+
+## WeakMap
+WeakMap은 Map과 유사하게 키-값 쌍을 저장하는 객체지만, 몇 가지 중요한 차이점이 있습니다.
+
+* 약한 참조: WeakMap의 키는 약한 참조를 가지므로, 더 이상 다른 곳에서 참조되지 않는 키 객체는 가비지 컬렉션의 대상이 됩니다. 즉, 메모리 누수를 방지하는 데 효과적입니다.
+* 키 제한: WeakMap의 키는 반드시 객체여야 합니다. 원시 값(숫자, 문자열 등)은 키로 사용할 수 없습니다.
+* 크기 속성 없음: WeakMap은 size 속성이 없어 저장된 요소의 개수를 직접 확인할 수 없습니다.
+* 순회 불가: WeakMap은 for...of 문과 같은 반복문으로 순회할 수 없습니다.
+
+```javascript
+const weakmap = new WeakMap();
+const obj = {};
+weakmap.set(obj, 'value');
+
+// obj가 더 이상 참조되지 않으면, weakmap에서도 자동으로 삭제됩니다.
+```
+
+## WeakSet
+WeakSet은 Set과 유사하지만, 값(요소)이 반드시 객체여야 하고 약한 참조를 가진다는 점이 다릅니다.
+
+* 약한 참조: WeakSet의 값은 약한 참조를 가지므로, 더 이상 다른 곳에서 참조되지 않는 값은 가비지 컬렉션의 대상이 됩니다.
+* 값 제한: WeakSet의 값은 반드시 객체여야 합니다. 원시 값은 값으로 사용할 수 없습니다.
+* 크기 속성 없음: WeakSet은 size 속성이 없어 저장된 요소의 개수를 직접 확인할 수 없습니다.
+* 순회 불가: WeakSet은 for...of 문과 같은 반복문으로 순회할 수 없습니다.
+
+```javascript
+const weakset = new WeakSet();
+const obj1 = {};
+const obj2 = {};
+weakset.add(obj1);
+weakset.add(obj2);
+
+// obj1이 더 이상 참조되지 않으면, weakset에서도 자동으로 삭제됩니다.
+```
+
+## Symbol
+Symbol 객체는 ES6에서 새롭게 도입된 원시 값(primitive type)으로, 고유한 식별자를 생성하는 데 사용됩니다. 즉, Symbol은 다른 어떤 값과도 절대 일치하지 않는, 유일한 값을 만들어낼 수 있습니다.
+
+* 유일성: 동일한 방법으로 생성된 Symbol이라도 서로 다른 값을 가집니다.
+* 변경 불가능: 한번 생성된 Symbol은 변경할 수 없습니다.
+* 객체의 프로퍼티 키로 사용: 일반 문자열 키와 달리, Symbol을 키로 사용하면 다른 코드와의 충돌을 방지하고, 객체 내부의 프로퍼티를 더 안전하게 관리할 수 있습니다.
+
+```javascript
+const sym1 = Symbol();
+const sym2 = Symbol('description'); // description은 설명을 위한 문자열이며, 실제 값에 영향을 주지 않습니다.
+```
+* Symbol.for(key): 전역 심볼 레지스트리에서 해당 키에 해당하는 심볼을 찾거나, 없으면 새로운 심볼을 생성하고 등록합니다.
+* Symbol.keyFor(sym): 전역 심볼 레지스트리에서 주어진 심볼에 해당하는 키를 찾습니다.
+
+## BigInt 객체
+BigInt는 자바스크립트에서 아주 큰 정수를 표현하기 위해 도입된 새로운 자료형입니다.
+
+* BigInt 리터럴: 정수 뒤에 n을 붙여 BigInt를 생성합니다.
+* BigInt 생성자: BigInt() 함수를 사용하여 숫자나 문자열을 BigInt로 변환합니다.
+
+```javascript
+const bigInt = 123456789012345678901234567890n;
+const bigInt = BigInt("9007199254740991");
+```
+
+BigInt는 일반적인 숫자와 비슷하게 사칙연산, 비교 연산 등을 지원합니다. 하지만 BigInt와 Number를 직접 혼용해서 사용할 수는 없으며, 필요에 따라 형 변환을 해줘야 합니다.
+
+```javascript
+const bigInt1 = 10n;
+const bigInt2 = 5n;
+console.log(bigInt1 + bigInt2); // 15n
+
+// BigInt와 Number를 직접 더하면 에러 발생
+// console.log(bigInt1 + 2);
+```
+
+## Intl
+Intl 객체는 자바스크립트에서 다양한 언어와 지역 설정에 맞춰 날짜, 시간, 숫자, 통화 등을 표현하고 처리할 수 있도록 지원하는 국제화 API입니다. 
+
+* 날짜와 시간 포맷팅: Intl.DateTimeFormat을 사용하여 다양한 형식으로 날짜와 시간을 표현할 수 있습니다.
+* 숫자 포맷팅: Intl.NumberFormat을 사용하여 숫자를 지역별로 다양한 형식으로 표현할 수 있습니다.
+* 통화 포맷팅: Intl.NumberFormat을 사용하여 통화를 지역별로 다양한 형식으로 표현할 수 있습니다.
+* 문자열 비교: Intl.Collator를 사용하여 문자열을 지역별 정렬 규칙에 따라 비교할 수 있습니다.
+
+```javascript
+// 날짜 포맷팅 (한국어)
+const date = new Date();
+const formatter = new Intl.DateTimeFormat('ko-KR');
+console.log(formatter.format(date)); // 예: 2023년 5월 15일 (월요일)
+
+// 숫자 포맷팅 (미국)
+const number = 12345.67;
+const formatter = new Intl.NumberFormat('en-US');
+console.log(formatter.format(number)); // 12,345.67
+
+// 통화 포맷팅 (일본)
+const price = 10000;
+const formatter = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' });
+console.log(formatter.format(price)); // ¥10,000
+```
+

doc/04_연산자.md

@@ -0,0 +1,142 @@
+# 연산자와 표현식
+
+자바스크립트에서 **연산자(Operator)**와 **표현식(Expression)**는 데이터를 처리하고 동작을 수행하는 기본 구성 요소입니다. 연산자는 값을 조작하거나 연산을 수행하는 기호이며, 표현식은 하나의 값으로 평가될 수 있는 코드입니다. 
+
+## 연산자
+연산자는 특정 작업을 수행하기 위해 사용하는 기호나 키워드입니다.
+자바스크립트의 연산자는 크게 다음과 같이 분류할 수 있습니다:
+
+### 산술 연산자
+숫자 데이터를 연산할 때 사용됩니다.
+* 덧셈: +
+* 뺄셈: -
+* 곱셈: *
+* 나눗셈: /
+* 나머지: %
+* 거듭제곱: **
+* 증가: ++
+* 감소: --
+
+```javascript
+let x = 10;
+let y = 5;
+
+console.log(x + y); // 15
+console.log(x - y); // 5
+console.log(x * y); // 50
+console.log(x / y); // 2
+console.log(x % y); // 0
+```
+
+### 할당 연산자
+변수에 값을 할당하거나 연산 결과를 저장할 때 사용합니다.
+* 단순 할당: =
+* 복합 할당: +=, -=, *=, /=, %=
+
+```javascript
+let a = 10;
+a += 5; // a = a + 5; 와 같음
+console.log(a); // 15
+```
+
+### 비교 연산자
+두 값을 비교하고 결과를 불리언 값(true 또는 false)으로 반환합니다.
+* 같음: == (형 변환 후 비교), === (형 변환 없이 비교)
+* 다름: !=, !==
+* 크다: >
+* 작다: <
+* 크거나 같다: >=
+* 작거나 같다: <=
+
+```javascript
+let b = 10;
+console.log(b == "10"); // true (형 변환 후 비교)
+console.log(b === "10"); // false (형 변환 없이 비교)
+```
+
+### 논리 연산자
+불리언 값을 조합하거나 조작할 때 사용됩니다.
+* AND: &&
+* OR: ||
+* NOT: !
+
+```javascript
+let c = true;
+let d = false;
+console.log(c && d); // false
+console.log(c || d); // true
+console.log(!c); // false
+```
+
+### 비트 연산자
+* `&` (AND)	두 비트가 모두 1일 때만 1을 반환합니다.
+* `|` (OR)
+* `^` (XOR)	두 비트가 다를 때 1을 반환합니다.
+* `~` (NOT)	비트를 반전시킵니다. (0 -> 1, 1 -> 0)
+* `<<` (왼쪽 시프트)	숫자를 왼쪽으로 특정 비트만큼 이동시킵니다. 빈 자리는 0으로 채워집니다.
+* `>>` (오른쪽 시프트)	숫자를 오른쪽으로 특정 비트만큼 이동시킵니다. 부호가 유지됩니다.
+* `>>>` (무부호 오른쪽 시프트)
+
+### 조건부 연산자
+조건에 따라 다른 값을 반환합니다.
+```javascript
+let age = 20;
+let result = age >= 18 ? "성인" : "미성년자";
+console.log(result); // "성인"
+```
+
+### 문자열 연결 연산자
+`+`는 숫자와 문자열을 연결하는 데도 사용됩니다.
+* 문자열 연결: +
+```javascript
+let str1 = "Hello";
+let str2 = " World";
+console.log(str1 + str2); // Hello World
+```
+
+### typeof 연산자
+데이터 타입을 반환합니다.
+```javascript
+console.log(typeof 42); // "number"
+console.log(typeof "Hello"); // "string"
+```
+
+### delete 연산자
+객체의 속성을 삭제합니다.
+```javascript
+const obj = { name: "Alice", age: 25 };
+delete obj.age;
+console.log(obj); // { name: "Alice" }
+```
+
+### spread 연산자 (...)
+배열이나 객체를 펼칩니다.
+```javascript
+const arr = [1, 2, 3];
+const newArr = [...arr, 4];
+console.log(newArr); // [1, 2, 3, 4]
+```
+
+### 연산자 우선순위
+연산자는 각각 우선순위가 있으며, 우선순위가 높은 연산자가 먼저 계산됩니다.
+
+괄호를 사용하여 연산 순서를 변경할 수 있습니다.
+
+## 표현식
+표현식은 하나의 값으로 평가될 수 있는 코드입니다.
+* 리터럴 표현식: 값을 직접 나타냄
+* 연산식: 연산자를 사용한 표현
+* 함수 호출식: 함수의 결과를 반환
+
+```javascript
+// 리터럴 표현식
+10; // 숫자 리터럴
+"Hello"; // 문자열 리터럴
+
+// 연산식
+5 + 10; // 15
+x * 2; // x 값에 따라 달라짐
+
+// 함수 호출식
+Math.max(10, 20); // 20
+```

doc/05_제어문.md

@@ -0,0 +1,110 @@
+# 제어문
+자바스크립트에서 조건문과 반복문은 프로그램의 흐름을 제어하는 데 사용되는 필수 요소입니다. 조건문은 특정 조건에 따라 실행할 코드를 결정하고, 반복문은 동일한 작업을 여러 번 실행할 수 있도록 도와줍니다. 
+
+## 조건문
+조건문은 주어진 조건이 참(true)인지 거짓(false)인지에 따라 다른 코드를 실행하도록 합니다.
+
+* if 문: 가장 기본적인 조건문으로, if문은 조건이 참일 때 실행할 코드를 정의합니다.
+```javascript
+let age = 25;
+if (age >= 18) {
+    console.log("성인입니다.");
+}
+```
+* if...else 문: 조건이 참일 때와 거짓일 때 각각 다른 코드를 실행합니다.
+```javascript
+let isRaining = true;
+if (isRaining) {
+    console.log("우산을 챙기세요.");
+} else {
+    console.log("날씨가 좋네요.");
+}
+```
+* if...else if 문: 여러 조건을 처리하려면 else if를 사용합니다.
+```javascript
+let score = 85;
+
+if (score >= 90) {
+  console.log("A등급");
+} else if (score >= 80) {
+  console.log("B등급");
+} else if (score >= 70) {
+  console.log("C등급");
+} else {
+  console.log("F등급");
+}
+```
+* switch 문: 여러 값을 조건으로 검사해야 할 때는 switch문을 사용할 수 있습니다.
+```javascript
+let day = "Sunday";
+switch (day) {
+    case "Monday":
+        console.log("월요일입니다.");
+        break;
+    case "Sunday":
+        console.log("일요일입니다.");
+        break;
+    default:
+        console.log("다른 요일입니다.");
+}
+```
+* 삼항연산자: if-else의 간단한 대안으로, 한 줄로 조건문을 작성할 수 있습니다.
+```javascript
+let age = 20;
+let message = age >= 18 ? "성인입니다." : "미성년자입니다.";
+console.log(message);
+```
+
+## 반복문
+반복문은 특정 코드를 반복적으로 실행합니다.
+* for 문: 반복 횟수가 정해져 있을 때 사용합니다.
+```javascript
+for (let i = 0; i < 5; i++) {
+    console.log(i);
+}
+```
+* while 문: 조건이 참인 동안 계속 반복합니다.
+```javascript
+let i = 0;
+while (i < 5) {
+    console.log(i);
+    i++;
+}
+```
+* do...while 문: do-while문은 조건을 나중에 검사하므로, 최소 한 번은 실행하고 조건을 검사합니다.
+```javascript
+let i = 0;
+do {
+    console.log(i);
+    i++;
+} while (i < 5);
+```
+* for...of 문: 배열이나 이터러블 객체의 값을 반복할 때 사용합니다.
+```javascript
+const fruits = ["사과", "바나나", "포도"];
+
+for (const fruit of fruits) {
+  console.log(fruit);
+}
+```
+* for...in 문: 객체의 속성을 반복할 때 사용합니다.
+```javascript
+const person = { name: "Alice", age: 25 };
+
+for (const key in person) {
+  console.log(`${key}: ${person[key]}`);
+}
+```
+
+## break와 continue
+* break: 반복문을 즉시 종료합니다.
+* continue: 현재 반복을 건너뛰고 다음 반복으로 이동합니다.
+```javascript
+for (let i = 0; i < 10; i++) {
+    if (i === 5) {
+        break; // i가 5일 때 반복 종료
+    }
+    console.log(i);
+}
+```
+

doc/06_함수.md

@@ -0,0 +1,215 @@
+# 함수
+자바스크립트에서 함수는 코드의 재사용성과 모듈화를 높이는 가장 기본적인 단위입니다. 함수는 특정 작업을 수행하거나 값을 반환하는 독립된 코드 블록입니다. 
+
+함수는 특정 작업을 수행하는 코드 블록으로, 필요할 때 호출할 수 있습니다. 함수를 사용하면 다음과 같은 장점이 있습니다:
+
+* 재사용성: 동일한 작업을 여러 번 실행할 때 반복적인 코드를 줄일 수 있습니다.
+* 가독성: 코드가 구조화되어 더 이해하기 쉬워집니다.
+* 유지보수성: 코드를 변경하거나 확장하기 용이합니다.
+
+## 함수 선언과 호출
+
+함수를 선언하려면 function 키워드를 사용합니다.
+```javascript
+function greet(name) {
+  console.log(`안녕하세요, ${name}!`);
+}
+```
+
+함수를 호출하려면 함수 이름 뒤에 괄호를 붙이고 필요한 인수를 전달합니다.
+```javascript
+greet("철수"); // 출력: 안녕하세요, 철수!
+greet("영희"); // 출력: 안녕하세요, 영희!
+```
+
+## 함수의 구성 요소
+* 함수 이름 (Function Name): 함수를 식별하는 데 사용됩니다.
+* 매개변수 (Parameters): 함수가 입력값을 받을 수 있도록 정의합니다.
+* 함수 본문 (Body): 함수가 실행할 코드 블록입니다.
+* 반환값 (Return Value): 함수가 작업 후 반환하는 값입니다.
+
+```javascript
+function add(a, b) {
+  return a + b; // 반환값
+}
+
+let result = add(2, 3);
+console.log(result); // 출력: 5
+```
+
+## 함수의 반환값과 return 키워드
+함수는 작업 결과를 반환하기 위해 return 키워드를 사용할 수 있습니다.
+
+반환값이 없는 함수는 undefined를 반환합니다.
+
+```javascript
+function noReturn() {}
+console.log(noReturn()); // 출력: undefined
+```
+
+## 함수 표현식 (Function Expression)
+함수는 변수에 할당할 수도 있습니다. 이를 함수 표현식이라고 합니다.
+```javascript
+const multiply = function (x, y) {
+  return x * y;
+};
+
+console.log(multiply(4, 5)); // 출력: 20
+```
+
+## 스프레드 연산자
+스프레드 연산자는 자바스크립트 ES6에서 도입된 문법으로, 세 개의 점(`...`)으로 표현됩니다. 이 연산자는 반복 가능한(iterable) 객체의 요소들을 펼쳐서 개별 요소로 만들어주는 역할을 합니다.
+
+### 배열 결합
+```javascript
+const arr1 = [1, 2, 3];
+const arr2 = [4, 5, 6];
+const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
+```
+
+```javascript
+const arr = [1, 2, 3];
+const newArr = [...arr, 4, 5]; // [1, 2, 3, 4, 5]
+```
+
+### 객체 얕은 복사
+```javascript
+const person = { name: '홍길동', age: 30 };
+const newPerson = { ...person };
+```
+
+### 함수의 인자 전달
+```javascript
+function sum(...numbers) {
+    return numbers.reduce((total, num) => total + num, 0);
+}
+const result = sum(...[1, 2, 3]); // 6
+```
+
+### 함수 호출 시 인자 전달
+함수의 매개변수로 사용되어, 남은 인수들을 배열로 모아줍니다.
+```javascript
+const numbers = [1, 2, 3];
+Math.max(...numbers); // 3
+```
+
+## 화살표 함수 (Arrow Function)
+ES6부터 도입된 화살표 함수는 간결한 문법으로 함수를 작성할 수 있습니다.
+```javascript
+const subtract = (a, b) => a - b;
+
+console.log(subtract(10, 4)); // 출력: 6
+```
+* 중괄호 {}를 생략하면 암묵적으로 값을 반환합니다.
+* 중괄호는 본문 여러 줄로 구성되어 있음을 알려주며, 중괄호를 사용했다면 return으로 결괏값을 반환해주어야 합니다.
+* 매개변수가 하나라면 괄호 ()도 생략할 수 있습니다.
+
+```javascript
+const square = x => x * x;
+
+console.log(square(5)); // 출력: 25
+```
+
+## 함수의 다양한 유형
+* 기본 함수 (Regular Function)
+    ```javascript
+    function sayHello() {
+    console.log("안녕하세요!");
+    }
+
+    sayHello(); // 출력: 안녕하세요!
+    ```
+
+* 매개변수가 있는 함수
+    ```javascript
+    function greetUser(name, age) {
+    console.log(`이름: ${name}, 나이: ${age}`);
+    }
+
+    greetUser("철수", 25); // 출력: 이름: 철수, 나이: 25
+    ```
+
+* 기본값을 가진 매개변수 (Default Parameters) : 매개변수의 기본값을 설정할 수 있습니다.
+    ```javascript
+    function welcome(name = "사용자") {
+    console.log(`환영합니다, ${name}!`);
+    }
+
+    welcome(); // 출력: 환영합니다, 사용자!
+    welcome("민수"); // 출력: 환영합니다, 민수!
+    ```
+
+* 익명 함수 (Anonymous Function) : 익명 함수는 이름이 없는 함수입니다. 주로 콜백 함수로 사용됩니다.
+    ```javascript
+    setTimeout(function () {
+    console.log("3초 후 실행됩니다.");
+    }, 3000);
+    ```
+
+## 고급 함수 활용
+
+### 재귀 함수 (Recursive Function)
+함수 내에서 자기 자신을 호출하는 함수입니다.
+```javascript
+function factorial(n) {
+  if (n === 1) return 1; // 종료 조건
+  return n * factorial(n - 1);
+}
+
+console.log(factorial(5)); // 출력: 120
+```
+
+### 콜백 함수 (Callback Function)
+다른 함수의 인수로 전달되는 함수입니다.
+```javascript
+function processUserInput(callback) {
+  const name = "영희";
+  callback(name);
+}
+
+processUserInput(function (name) {
+  console.log(`안녕하세요, ${name}!`);
+});
+```
+
+### 클로저 (Closure)
+클로저는 함수와 해당 함수가 선언된 렉시컬 환경(Lexical Environment)을 기억하는 특성입니다.
+```javascript
+function makeMultiplier(multiplier) {
+  return function (x) {
+    return x * multiplier;
+  };
+}
+
+const double = makeMultiplier(2);
+console.log(double(5)); // 출력: 10
+```
+
+### 즉시 실행 함수 (Immediately Invoked Function Expression, IIFE) 
+IIFE는 선언과 동시에 실행되는 함수입니다.
+```javascript
+(function () {
+console.log("즉시 실행 함수입니다.");
+})();
+```
+
+## 활용 사례
+```javascript
+// 배열 요소의 합계
+const numbers = [1, 2, 3, 4, 5];
+
+function sumArray(arr) {
+  return arr.reduce((sum, num) => sum + num, 0);
+}
+
+console.log(sumArray(numbers)); // 출력: 15
+```
+
+```javascript
+// 문자열 반전
+function reverseString(str) {
+  return str.split("").reverse().join("");
+}
+
+console.log(reverseString("hello")); // 출력: olleh
+```

doc/07_객체와_배열.md

@@ -0,0 +1,222 @@
+# 객체와 배열
+자바스크립트에서 객체와 배열은 데이터를 저장하고 관리하는 데 사용되는 두 가지 기본적인 데이터 구조입니다.
+
+* **객체(Object)**는 키-값 쌍으로 데이터를 저장합니다.
+* **배열(Array)**은 순서가 있는 리스트로 데이터를 저장합니다.
+
+## 객체(Object)
+객체는 키-값 쌍(key-value pair)으로 구성된 데이터 구조입니다.
+
+* 키는 문자열 또는 심볼로, 고유한 식별자 역할을 합니다.
+* 값은 키에 할당된 데이터로, 어떤 데이터 타입도 가능합니다.
+
+### 객체 생성
+#### 객체 리터럴 방식
+```javascript
+const person = {
+  name: "홍길동",
+  age: 25,
+  isStudent: true,
+};
+```
+
+#### Object 생성자 방식
+```javascript
+const car = new Object();
+car.brand = "Tesla";
+car.model = "Model S";
+car.year = 2023;
+```
+### 객체 속성에 접근하기
+객체의 속성에 접근하는 방법은 두 가지입니다.
+
+#### 점 표기법 (Dot Notation)
+```javascript
+console.log(person.name); // 출력: 홍길동
+```
+
+#### 대괄호 표기법 (Bracket Notation)
+대괄호 표기법은 키가 동적으로 결정될 때 유용합니다.
+```javascript
+console.log(person["age"]); // 출력: 25
+```
+
+### 객체의 속성 추가, 수정, 삭제
+* 속성 추가
+```javascript
+person.gender = "남성";
+console.log(person.gender); // 출력: 남성
+```
+* 속성 수정
+```javascript
+person.age = 30;
+console.log(person.age); // 출력: 30
+```
+* 속성 삭제
+```javascript
+delete person.isStudent;
+console.log(person.isStudent); // 출력: undefined
+```
+
+### 메서드
+객체는 함수도 값으로 가질 수 있으며, 이를 메서드라고 합니다.
+
+```javascript
+const calculator = {
+  add: function (a, b) {
+    return a + b;
+  },
+  subtract(a, b) {
+    return a - b;
+  }, // 최신 문법 (ES6)
+};
+
+console.log(calculator.add(5, 3)); // 출력: 8
+console.log(calculator.subtract(5, 3)); // 출력: 2
+```
+
+### 객체 순회
+for...in문을 사용하여 객체의 속성을 순회할 수 있습니다.
+
+```javascript
+for (const key in person) {
+  console.log(`${key}: ${person[key]}`);
+}
+// 출력:
+// name: 홍길동
+// age: 30
+// gender: 남성
+```
+
+## 배열(Array)
+배열은 순서가 있는 리스트로, 여러 값을 하나의 변수에 저장할 수 있습니다.
+
+배열의 각 값은 **요소(element)**라고 하며, 0부터 시작하는 인덱스를 가집니다.
+
+### 배열 생성
+#### 배열 리터럴 방식
+```javascript
+const fruits = ["사과", "바나나", "포도"];
+```
+#### Array 생성자 방식
+```javascript
+const numbers = new Array(1, 2, 3, 4, 5);
+```
+
+### 배열 요소에 접근하기
+배열 요소는 인덱스를 사용하여 접근합니다.
+```javascript
+console.log(fruits[0]); // 출력: 사과
+console.log(fruits[2]); // 출력: 포도
+```
+
+### 배열 요소 추가, 수정, 삭제
+* 추가
+```javascript
+fruits.push("오렌지"); // 배열 끝에 추가
+console.log(fruits); // 출력: ["사과", "바나나", "포도", "오렌지"]
+
+fruits.unshift("딸기"); // 배열 앞에 추가
+console.log(fruits); // 출력: ["딸기", "사과", "바나나", "포도", "오렌지"]
+```
+
+* 수정
+```javascript
+fruits[1] = "키위";
+console.log(fruits); // 출력: ["딸기", "키위", "바나나", "포도", "오렌지"]
+```
+
+* 삭제
+```javascript
+fruits.pop(); // 배열 끝 요소 삭제
+console.log(fruits); // 출력: ["딸기", "키위", "바나나", "포도"]
+
+fruits.shift(); // 배열 앞 요소 삭제
+console.log(fruits); // 출력: ["키위", "바나나", "포도"]
+```
+
+### 메서드
+* forEach() : 배열의 각 요소에 대해 반복 작업을 수행합니다.
+```javascript
+fruits.forEach(fruit => console.log(fruit));
+// 출력:
+// 키위
+// 바나나
+// 포도
+```
+* map()
+배열의 각 요소를 변환하여 새로운 배열을 생성합니다.
+```javascript
+const upperFruits = fruits.map(fruit => fruit.toUpperCase());
+console.log(upperFruits); // 출력: ["키위", "바나나", "포도"]
+```
+* filter()
+조건을 만족하는 요소만 반환합니다.
+```javascript
+const filteredFruits = fruits.filter(fruit => fruit.length > 2);
+console.log(filteredFruits); // 출력: ["바나나", "포도"]
+```
+* reduce()
+배열의 요소를 누적하여 하나의 값으로 반환합니다.
+```javascript
+const numbers = [1, 2, 3, 4, 5];
+const sum = numbers.reduce((acc, num) => acc + num, 0);
+console.log(sum); // 출력: 15 
+```
+### 배열 순회
+* for...of : for...of문을 사용하여 배열을 순회할 수 있습니다.
+```javascript
+for (const fruit of fruits) {
+  console.log(fruit);
+}
+// 출력:
+// 키위
+// 바나나
+// 포도
+```
+* 전통적인 for문
+```javascript
+for (let i = 0; i < fruits.length; i++) {
+  console.log(fruits[i]);
+}
+// 출력:
+// 키위
+// 바나나
+// 포도
+```
+
+## 객체와 배열의 결합
+객체와 배열은 종종 함께 사용됩니다. 예를 들어, 객체의 배열을 만들어 데이터를 관리할 수 있습니다.
+
+```javascript
+const users = [
+  { id: 1, name: "홍길동", age: 25 },
+  { id: 2, name: "김영희", age: 30 },
+  { id: 3, name: "이철수", age: 28 },
+];
+
+users.forEach(user => console.log(user.name));
+// 출력:
+// 홍길동
+// 김영희
+// 이철수
+```
+
+## 구조분해할당 (destructing)
+구조 분해 할당은 배열이나 객체의 속성을 분해하여 각각의 값을 개별 변수에 할당하는 자바스크립트의 편리한 문법입니다. 
+
+```javascript
+const colors = ['red', 'green', 'blue'];
+const [firstColor, secondColor] = colors;
+
+console.log(firstColor); // 'red'
+console.log(secondColor); // 'green'
+```
+
+```javascript
+const person = { name: '홍길동', age: 30 };
+const { name, age } = person;
+
+console.log(name); // 홍길동
+console.log(age); // 30
+```

doc/08_객체_지향_프로그래밍.md

@@ -0,0 +1,165 @@
+# 객체 지향 프로그래밍(Object-Oriented Programming, OOP)
+자바스크립트는 객체 지향 프로그래밍(OOP)의 패러다임을 지원합니다. OOP는 프로그램을 **객체(object)**라는 독립적인 단위로 나누고, 이 객체들 간의 상호작용으로 문제를 해결하는 방법론입니다. 자바스크립트는 클래스와 프로토타입 기반 객체 지향 프로그래밍을 모두 지원합니다.
+
+## OOP
+**객체 지향 프로그래밍(OOP)**의 핵심은 데이터를 **객체(object)**로 구조화하는 것입니다. 객체는 **속성(property)**과 **메서드(method)**를 가지며, 현실 세계의 개념을 코드로 추상화합니다.
+
+### OOP의 주요 원칙
+- 캡슐화 (Encapsulation): 객체 내부의 데이터를 외부로부터 숨기고, 필요한 인터페이스만 노출합니다.
+- 상속 (Inheritance): 기존 객체(클래스)의 속성과 메서드를 재사용하여 새로운 객체를 생성합니다.
+- 다형성 (Polymorphism): 같은 메서드 이름이 다른 객체에서 다르게 동작하도록 합니다.
+- 추상화 (Abstraction): 복잡한 구현을 감추고, 필요한 핵심만 노출합니다.
+
+### OOP의 주요 장점
+- 코드 재사용성: 상속과 클래스 설계를 통해 동일한 코드를 반복하지 않고 재사용할 수 있습니다.
+- 유지보수 용이성: 캡슐화와 모듈화를 통해 코드의 구조가 명확해지고 수정이 쉬워집니다.
+- 확장성: 새로운 클래스나 메서드를 쉽게 추가할 수 있습니다.
+- 가독성: 객체를 통해 프로그램의 논리를 현실 세계와 유사하게 표현할 수 있습니다.
+
+### OOP와 자바스크립트의 유연성
+자바스크립트는 객체 지향 프로그래밍 외에도 함수형 프로그래밍이나 절차적 프로그래밍을 지원합니다. 즉, 필요에 따라 객체 지향적인 스타일과 함수형 스타일을 혼합하여 사용할 수 있는 멀티 패러다임 언어입니다.
+
+## 자바스크립트의 객체 지향 구현 방법
+### 객체 리터럴
+가장 기본적인 객체 생성 방식은 객체 리터럴을 사용하는 것입니다.
+```javascript
+const person = {
+  name: "홍길동",
+  age: 30,
+  greet: function () {
+    console.log(`안녕하세요, 제 이름은 ${this.name}입니다.`);
+  },
+};
+
+person.greet(); // 출력: 안녕하세요, 제 이름은 홍길동입니다.
+```
+
+### 생성자 함수 (Constructor Function)
+생성자 함수는 객체를 생성하는 데 사용됩니다.
+```javascript
+function Person(name, age) {
+  this.name = name;
+  this.age = age;
+  this.greet = function () {
+    console.log(`안녕하세요, 저는 ${this.name}이고, 나이는 ${this.age}살입니다.`);
+  };
+}
+
+const person1 = new Person("김철수", 25);
+const person2 = new Person("박영희", 28);
+
+person1.greet(); // 출력: 안녕하세요, 저는 김철수이고, 나이는 25살입니다.
+person2.greet(); // 출력: 안녕하세요, 저는 박영희이고, 나이는 28살입니다.
+```
+
+### 프로토타입 (Prototype)
+자바스크립트는 프로토타입 기반 언어로, 모든 객체는 자신의 프로토타입을 참조합니다. 프로토타입은 객체가 상속받을 수 있는 속성과 메서드를 정의합니다.
+```javascript
+function Person(name, age) {
+  this.name = name;
+  this.age = age;
+}
+
+Person.prototype.greet = function () {
+  console.log(`안녕하세요, 저는 ${this.name}이고, 나이는 ${this.age}살입니다.`);
+};
+
+const person1 = new Person("김철수", 25);
+const person2 = new Person("박영희", 28);
+
+person1.greet(); // 출력: 안녕하세요, 저는 김철수이고, 나이는 25살입니다.
+person2.greet(); // 출력: 안녕하세요, 저는 박영희이고, 나이는 28살입니다.
+```
+### 클래스 (Class)
+ES6부터 클래스를 사용하여 객체 지향 프로그래밍을 더욱 간단하고 직관적으로 구현할 수 있습니다. 클래스는 생성자 함수의 문법적 설탕(Syntactic Sugar)입니다.
+
+* 클래스를 선언하려면 class 키워드와 함께 클래스의 이름을 작성합니다.
+* 클래스 선언은 let과 const처럼 블록 스코프에 선언되며, 호이스팅(hoisting)이 일어나지 않는다. 클래스는 반드시 정의한 뒤에 사용해야 합니다.
+* 클래스의 메소드 안에서 super 키워드를 사용할 수 있습니다.
+* static 키워드를 메소드 이름 앞에 붙여주면 해당 메소드는 정적 메소드가 됩니다.
+* Getter 혹은 Setter를 정의하고 싶을 때는 메소드 이름 앞에 get 또는 set을 붙여주면 된다.
+* extends 키워드를 사용하여 클래스에서 다른 클래스로 상속하면서 클래스의 기능을 확장해 나갈수 있습니다.
+* 클래스에서 일반적인 방식으로 프로퍼티를 선언하고 할당하면 Public Property(공개 프로퍼티)입니다.
+* 클래스에서 프로퍼티 앞에 # 키워드를 작성하여 선언하면 Private Property (비공개 프로퍼티)가 됩니다.
+
+#### 클래스 선언
+```javascript
+class Person {
+  constructor(name, age) {
+    this.name = name;
+    this.age = age;
+  }
+
+  greet() {
+    console.log(`안녕하세요, 저는 ${this.name}이고, 나이는 ${this.age}살입니다.`);
+  }
+}
+
+const person1 = new Person("이철수", 40);
+const person2 = new Person("한지민", 35);
+
+person1.greet(); // 출력: 안녕하세요, 저는 이철수이고, 나이는 40살입니다.
+person2.greet(); // 출력: 안녕하세요, 저는 한지민이고, 나이는 35살입니다.
+```
+* class 키워드: 클래스를 선언하는 데 사용됩니다.
+* constructor(): 객체 생성 시 호출되는 생성자 메서드입니다.
+* 메서드: 클래스 내에 정의된 함수를 의미합니다.
+* new 키워드를 사용하여 클래스의 인스턴스를 생성합니다.
+
+#### 상속 (Inheritance)
+클래스 간 상속을 통해 코드를 재사용할 수 있습니다. 자바스크립트에서 클래스는 extends 키워드를 사용하여 상속을 구현합니다.
+
+```javascript
+class Animal {
+  constructor(name) {
+    this.name = name;
+  }
+
+  sound() {
+    console.log(`${this.name}가 소리를 냅니다.`);
+  }
+}
+
+class Dog extends Animal {
+  sound() {
+    console.log(`${this.name}가 멍멍 짖습니다.`);
+  }
+}
+
+const dog = new Dog("강아지");
+dog.sound(); // 출력: 강아지가 멍멍 짖습니다.
+```
+* extends 키워드: 다른 클래스를 상속받아 새로운 클래스를 정의합니다.
+* super(): 부모 클래스의 생성자를 호출합니다.
+
+#### 다형성 (Polymorphism)
+다형성은 상속 관계에서 메서드를 재정의(오버라이딩)하여 구현됩니다.
+```javascript
+class Animal {
+  speak() {
+    console.log("동물이 소리를 냅니다.");
+  }
+}
+
+class Cat extends Animal {
+  speak() {
+    console.log("고양이가 야옹합니다.");
+  }
+}
+
+class Dog extends Animal {
+  speak() {
+    console.log("강아지가 멍멍 짖습니다.");
+  }
+}
+
+const animals = [new Cat(), new Dog(), new Animal()];
+
+animals.forEach(animal => animal.speak());
+// 출력:
+// 고양이가 야옹합니다.
+// 강아지가 멍멍 짖습니다.
+// 동물이 소리를 냅니다.
+```
+
+

doc/09_DOM_조작과_이벤트_처리.md

@@ -0,0 +1,214 @@
+# DOM 조작과 이벤트 처리
+DOM(Document Object Model)은 HTML 문서를 구조화하고 이를 자바스크립트를 통해 조작할 수 있게 하는 인터페이스입니다. DOM을 활용하면 HTML 요소를 생성하거나 수정하며, 이벤트 처리(Event Handling)를 통해 사용자와 상호작용하는 동적인 웹 페이지를 만들 수 있습니다.
+
+## DOM(Document Object Model)
+HTML 문서는 브라우저에서 DOM 트리라는 계층적 구조로 변환됩니다.
+
+* DOM은 HTML 요소를 **노드(Node)**로 표현합니다.
+* 자바스크립트를 통해 DOM의 요소를 읽거나 수정할 수 있습니다.
+
+DOM 조작은 브라우저의 document 객체를 사용하여 이루어집니다.
+
+### DOM 요소 선택
+자바스크립트로 HTML 요소를 선택하는 방법은 여러 가지가 있습니다.
+
+#### 단일 요소 선택
+```javascript
+// ID로 선택
+const title = document.getElementById("main-title");
+
+// CSS 선택자로 선택
+const heading = document.querySelector(".heading");
+```
+
+#### 다중 요소 선택
+```javascript
+// 클래스 이름으로 여러 요소 선택
+const items = document.getElementsByClassName("list-item");
+
+// 태그 이름으로 여러 요소 선택
+const paragraphs = document.getElementsByTagName("p");
+
+// CSS 선택자로 여러 요소 선택
+const allButtons = document.querySelectorAll("button");
+```
+
+### DOM 조작 방법
+#### 텍스트 내용 변경
+```javascript
+const title = document.getElementById("main-title");
+title.textContent = "새로운 제목입니다!"; // 텍스트 업데이트
+```
+#### HTML 내용 변경
+```javascript
+const container = document.querySelector(".container");
+container.innerHTML = "<p>새로운 HTML 내용입니다.</p>";
+```
+#### 속성(Attribute) 변경
+```javascript
+const link = document.querySelector("a");
+link.setAttribute("href", "https://example.com");
+console.log(link.getAttribute("href")); // 속성 값 읽기
+```
+#### 스타일 변경
+```javascript
+const button = document.querySelector(".btn");
+button.style.backgroundColor = "blue"; // 배경색 변경
+button.style.color = "white";          // 글자색 변경
+```
+#### 클래스 추가/삭제
+```javascript
+const box = document.querySelector(".box");
+
+// 클래스 추가
+box.classList.add("active");
+
+// 클래스 제거
+box.classList.remove("hidden");
+
+// 클래스 토글
+box.classList.toggle("highlight");
+```
+### DOM 요소 생성 및 삭제
+#### 요소 생성 및 추가
+```javascript
+const newItem = document.createElement("li");
+newItem.textContent = "새로운 리스트 아이템";
+
+// 부모 요소에 추가
+const list = document.querySelector(".list");
+list.appendChild(newItem);
+```
+#### 요소 삭제
+```javascript
+const itemToRemove = document.querySelector(".list-item");
+itemToRemove.remove();
+```
+
+## 이벤트 처리(Event Handling)
+이벤트는 사용자가 웹 페이지와 상호작용할 때 발생하는 사건입니다.
+
+* 예: 클릭, 입력, 스크롤, 키보드 입력 등.
+
+자바스크립트로 이벤트를 처리하려면 **이벤트 리스너(Event Listener)**를 사용합니다.
+
+### 이벤트 리스너 등록
+
+#### addEventListener 사용
+```javascript
+const button = document.querySelector(".btn");
+
+button.addEventListener("click", () => {
+  alert("버튼이 클릭되었습니다!");
+});
+```
+
+#### HTML 속성으로 등록
+이 방식은 코드 유지보수가 어렵기 때문에 권장되지 않습니다.
+```html
+<button onclick="alert('버튼 클릭!')">클릭</button>
+```
+
+### 주요 이벤트 종류
+#### 마우스 이벤트
+* click: 클릭 이벤트
+* mouseover: 마우스가 요소 위로 올라왔을 때
+* mouseout: 마우스가 요소 밖으로 나갔을 때
+
+```javascript
+const box = document.querySelector(".box");
+
+// 클릭 이벤트
+box.addEventListener("click", () => {
+  console.log("박스를 클릭했습니다!");
+});
+
+// 마우스 오버 이벤트
+box.addEventListener("mouseover", () => {
+  console.log("박스 위로 마우스가 올라왔습니다.");
+});
+```
+#### 키보드 이벤트
+* keydown: 키를 눌렀을 때
+* keyup: 키에서 손을 뗐을 때
+```javascript
+document.addEventListener("keydown", event => {
+  console.log(`키가 눌렸습니다: ${event.key}`);
+});
+```
+#### 입력 및 폼 이벤트
+* input: 입력 필드의 값이 변경될 때
+* submit: 폼 제출 시 발생
+```javascript
+const input = document.querySelector("#name-input");
+input.addEventListener("input", () => {
+  console.log(`입력 값: ${input.value}`);
+});
+
+const form = document.querySelector("form");
+form.addEventListener("submit", event => {
+  event.preventDefault(); // 기본 동작 막기
+  console.log("폼이 제출되었습니다!");
+});
+```
+
+### 이벤트 객체(Event Object)
+이벤트 핸들러 함수는 기본적으로 이벤트 객체를 인수로 받습니다.
+이 객체를 통해 이벤트에 대한 다양한 정보를 얻을 수 있습니다.
+```javascript
+const button = document.querySelector(".btn");
+
+button.addEventListener("click", event => {
+  console.log("클릭된 요소:", event.target); // 클릭된 요소
+  console.log("이벤트 타입:", event.type);    // 이벤트 타입
+  console.log("마우스 좌표:", event.clientX, event.clientY); // 클릭 위치
+});
+```
+
+### 이벤트 전파(Event Propagation)
+#### 이벤트 버블링 (Bubbling)
+이벤트가 가장 안쪽 요소에서 시작해 부모 요소로 전파되는 현상.
+```javascript
+const child = document.querySelector(".child");
+const parent = document.querySelector(".parent");
+
+child.addEventListener("click", () => {
+  console.log("Child 클릭!");
+});
+
+parent.addEventListener("click", () => {
+  console.log("Parent 클릭!");
+});
+// 위 코드를 실행하면 Child 클릭! → Parent 클릭! 순서로 출력됩니다.
+```
+#### 이벤트 캡처링 (Capturing)
+이벤트가 부모 요소에서 자식 요소로 전파되는 현상.
+```javascript
+parent.addEventListener(
+  "click",
+  () => {
+    console.log("Parent (캡처링 단계)");
+  },
+  true // 캡처링 단계에서 실행
+);
+```
+
+## DOM 조작과 이벤트 처리의 결합
+```javascript
+const list = document.querySelector(".list");
+const addButton = document.querySelector(".add-item");
+
+// 새로운 리스트 아이템 추가
+addButton.addEventListener("click", () => {
+  const newItem = document.createElement("li");
+  newItem.textContent = "새로운 아이템";
+  newItem.classList.add("list-item");
+
+  // 클릭 이벤트 추가
+  newItem.addEventListener("click", () => {
+    alert("새로운 아이템이 클릭되었습니다!");
+  });
+
+  list.appendChild(newItem);
+});
+```

doc/10_비동기_프로그래밍.md

@@ -0,0 +1,136 @@
+# 비동기 프로그래밍 (Asynchronous Programming)
+
+자바스크립트는 단일 스레드 기반의 언어로, 한 번에 하나의 작업만 실행할 수 있는 싱글 스레드 모델을 따릅니다. 하지만 비동기 프로그래밍을 통해 여러 작업을 동시에 처리할 수 있는 것처럼 보이게 하고, 효율적인 프로그램을 만들 수 있습니다.
+
+비동기 프로그래밍은 **시간이 오래 걸리는 작업(예: 파일 읽기, 데이터베이스 요청, API 호출)**을 실행하는 동안 다른 작업을 멈추지 않고 동시에 처리할 수 있도록 합니다.
+
+자바스크립트의 **이벤트 루프(Event Loop)**와 **콜백 큐(Callback Queue)**는 비동기 작업을 가능하게 하는 핵심 메커니즘입니다.
+
+## 이벤트 루프(Event Loop)
+이벤트 루프는 비동기 작업이 완료되었을 때 콜백 함수를 호출하여 실행할 수 있도록 관리합니다.
+
+* 콜 스택(Call Stack): 실행할 함수가 저장되는 공간.
+* 콜백 큐(Callback Queue): 비동기 작업이 완료된 후 실행 대기 중인 콜백 함수들이 대기하는 공간.
+
+이벤트 루프는 **콜 스택이 비어 있을 때** 콜백 큐에서 작업을 가져와 실행합니다.
+
+## 비동기 처리 방식 비교
+* 콜백 함수	
+    - 간단한 비동기 작업에 적합	
+    - 콜백 지옥 발생 가능
+* Promise	
+    - 가독성이 좋고 에러 처리가 간편	
+    - 체인 길어질 경우 가독성 저하
+* async/await	
+    - 동기식 코드처럼 작성 가능, 가독성 뛰어남
+    - 여러 개의 비동기 처리 병렬 실행은 불편
+
+## 콜백 함수 (Callback Function)
+콜백 함수는 함수의 인자로 전달되어 특정 작업이 완료된 후 실행됩니다.
+```javascript
+console.log("시작");
+
+setTimeout(() => {
+  console.log("3초 후 실행");
+}, 3000);
+
+console.log("끝");
+// 시작
+// 끝
+// 3초 후 실행
+```
+
+### 콜백 지옥 (Callback Hell)
+콜백 함수가 중첩되면서 코드가 복잡하고 읽기 어려워지는 문제를 콜백 지옥이라고 합니다.
+```javascript
+setTimeout(() => {
+  console.log("1단계");
+  setTimeout(() => {
+    console.log("2단계");
+    setTimeout(() => {
+      console.log("3단계");
+    }, 1000);
+  }, 1000);
+}, 1000);
+```
+
+## 프로미스 (Promise)
+ES6에서 도입된 Promise는 비동기 작업을 보다 깔끔하게 처리할 수 있는 방법입니다.
+Promise는 대기(Pending) → 성공(Fulfilled) → 실패(Rejected) 상태를 가집니다.
+```javascript
+const myPromise = new Promise((resolve, reject) => {
+  const success = true;
+  if (success) {
+    resolve("작업 성공!");
+  } else {
+    reject("작업 실패!");
+  }
+});
+
+myPromise
+  .then(result => {
+    console.log(result); // 출력: 작업 성공!
+  })
+  .catch(error => {
+    console.error(error);
+  });
+```
+* resolve: 비동기 작업이 성공적으로 완료되었을 때 호출되는 함수입니다.
+* reject: 비동기 작업이 실패했을 때 호출되는 함수입니다.
+* then: Promise가 성공적으로 완료되었을 때 실행될 함수를 전달합니다.
+* catch: Promise가 실패했을 때 실행될 함수를 전달합니다.
+
+
+* Promise.resolve: 이미 완료된 값을 가지는 Promise를 생성합니다.
+* Promise.reject: 실패한 Promise를 생성합니다.
+
+### Promise 체이닝
+then 메서드는 새로운 Promise를 반환하므로, 여러 개의 then 메서드를 연결하여 비동기 작업을 순차적으로 실행할 수 있습니다.
+```javascript
+promise
+  .then(result => {
+    return result + ' 추가 작업';
+  })
+  .then(result => {
+    console.log(result); // '작업 완료! 추가 작업' 출력
+  })
+  .catch(error => {
+    console.error(error);
+  });
+```
+
+### 병렬 처리
+비동기 작업을 병렬로 실행하려면 **Promise.all**이나 **Promise.allSettled**을 사용할 수 있습니다.
+```javascript
+const promise1 = new Promise(resolve => setTimeout(() => resolve("1초 후 완료"), 1000));
+const promise2 = new Promise(resolve => setTimeout(() => resolve("2초 후 완료"), 2000));
+
+Promise.all([promise1, promise2]).then(results => {
+  console.log(results); // 출력: ["1초 후 완료", "2초 후 완료"]
+});
+```
+* Promise.all: 여러 개의 Promise를 동시에 실행하고, 모든 Promise가 완료되었을 때 결과를 반환합니다.
+* Promise.race: 여러 개의 Promise 중 가장 먼저 완료된 Promise의 결과를 반환합니다.
+
+## async와 await
+Promise를 더욱 간결하게 사용할 수 있는 방법입니다. async와 await는 비동기 작업을 동기적인 코드처럼 읽기 쉽게 작성할 수 있도록 도와줍니다.
+
+```javascript
+function fetchData() {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve("데이터 로드 완료!");
+    }, 2000);
+  });
+}
+
+async function getData() {
+  console.log("데이터 요청 중...");
+  const result = await fetchData();
+  console.log(result); // 출력: 데이터 로드 완료!
+}
+
+getData();
+```
+* async: 함수가 비동기 함수임을 나타냅니다.
+* await: Promise가 완료될 때까지 기다리고, 그 결과를 반환합니다.

doc/11_모듈.md

@@ -0,0 +1,158 @@
+# 모듈
+
+자바스크립트의 모듈은 코드를 여러 파일로 나누어 관리하고 재사용성을 높이기 위한 기능입니다. 모듈은 기능별로 코드를 분리하고 서로 필요한 부분만 연결하여 유지보수성과 가독성을 크게 향상시킵니다.
+
+모듈은 프로그램의 특정 기능이나 데이터를 캡슐화한 독립적인 코드 단위입니다.
+
+* 목적: 코드를 더 체계적으로 관리하고, 재사용성과 협업의 효율성을 높이기 위함.
+* 자바스크립트는 **ECMAScript 2015 (ES6)**부터 공식적으로 모듈 시스템을 도입했습니다.
+
+## 모듈 내보내기 (Export)
+모듈에서 함수를 정의하거나 데이터를 외부에서 사용할 수 있도록 export 키워드를 사용합니다.
+### Named Export
+여러 값을 내보낼 때 사용합니다.
+```javascript
+// math.js
+export const add = (a, b) => a + b;
+export const subtract = (a, b) => a - b;
+```
+### Default Export
+모듈에서 하나의 기본(default) 값을 내보낼 때 사용합니다.
+```javascript
+// greet.js
+export default function greet(name) {
+  return `Hello, ${name}!`;
+}
+```
+
+## 모듈 가져오기 (Import)
+다른 파일에서 import 키워드를 사용해 모듈을 가져올 수 있습니다.
+### Default Import
+내보낸 이름과 동일한 이름으로 가져옵니다.
+```javascript
+// main.js
+import { add, subtract } from "./math.js";
+import greet from "./greet.js";
+
+console.log(add(2, 3));        // 5
+console.log(subtract(5, 2));   // 3
+console.log(greet("Alice"));   // Hello, Alice!
+```
+
+### Named Import
+내보낸 기본 값을 원하는 이름으로 가져올 수 있습니다.
+```javascript
+import { 변수1 as 별칭1 } from '모듈 경로';
+```
+
+### 전체 가져오기
+모든 내보낸 값을 하나의 객체에 담아 가져옵니다.
+```javascript
+// main.js
+import * as math from "./math.js";
+
+console.log(math.add(2, 3));       // 5
+console.log(math.subtract(5, 2));  // 3
+```
+
+## 모듈 스코프 (Module Scope)
+모듈 내부에 선언된 변수는 기본적으로 모듈 스코프를 가집니다.
+
+다른 파일에서 접근할 수 없으며, 명시적으로 export해야 외부에서 사용할 수 있습니다.
+
+```javascript
+// secret.js
+const secret = "이 변수는 외부에서 접근할 수 없습니다.";
+export const publicInfo = "이 변수는 외부에서 사용할 수 있습니다.";
+```
+
+## 모듈 의존성 관리
+모듈은 필요한 모듈을 가져오고(import) 불필요한 의존성을 제거하면서 코드를 최적화할 수 있습니다.
+
+## 모듈 사용 환경
+### 브라우저에서 모듈 사용
+HTML 파일에서 `<script>` 태그에 `type="module"`을 추가해야 합니다.
+```html
+<script type="module" src="main.js"></script>
+```
+
+### Node.js에서 모듈 사용
+Node.js에서는 CommonJS 모듈 시스템을 기본으로 사용하지만, ES 모듈도 지원합니다.
+#### CommonJS 방식
+```javascript
+// math.js
+exports.add = (a, b) => a + b;
+exports.subtract = (a, b) => a - b;
+
+// main.js
+const math = require("./math.js");
+console.log(math.add(2, 3));   // 5
+```
+#### ES 모듈 방식
+Node.js에서도 `type: "module"`을 설정하여 ES 모듈을 사용할 수 있습니다.
+```json
+// package.json
+{
+  "type": "module"
+}
+```
+
+## 모듈의 장단점
+### 장점
+* 코드 구조화: 코드의 기능별로 분리하여 가독성과 유지보수성을 향상시킴.
+* 재사용성: 한 번 작성한 모듈을 여러 프로젝트에서 재사용 가능.
+* 의존성 관리: 명시적인 import/export로 필요한 모듈만 가져올 수 있음.
+* 스코프 분리: 전역 스코프 오염을 방지하여 안전한 코드 작성 가능.
+
+### 단점
+* 브라우저 지원: 모든 브라우저에서 모듈을 완전히 지원하지 않을 수 있으므로 번들러(Webpack, Rollup 등)를 사용하는 것이 일반적입니다.
+* 모듈 로딩 시간: 많은 모듈을 로드하면 초기 로딩 시간이 증가할 수 있습니다.
+
+## 번들러와 모듈 시스템
+현대적인 웹 애플리케이션 개발에서는 여러 모듈을 하나의 파일로 묶어주는 번들러를 사용합니다.
+
+* Webpack: 가장 널리 사용되는 번들러.
+* Rollup: 간결한 설정으로 효율적인 번들링 제공.
+* Vite: 빠른 개발 환경을 제공하며 ES 모듈을 기본으로 사용.
+
+## 사용 예
+```
+project/
+│
+├── index.html
+├── main.js
+├── math.js
+└── greet.js
+```
+```javascript
+// math.js
+export const add = (a, b) => a + b;
+export const multiply = (a, b) => a * b;
+```
+```javascript
+// greet.js
+export default function greet(name) {
+  return `Hello, ${name}!`;
+}
+```
+```javascript
+// main.js
+import { add, multiply } from "./math.js";
+import greet from "./greet.js";
+
+console.log(add(2, 3));        // 5
+console.log(multiply(4, 5));   // 20
+console.log(greet("Alice"));   // Hello, Alice!
+```
+```html
+<!DOCTYPE html>
+<!-- index.html -->
+<html>
+<head>
+  <title>JavaScript Modules Example</title>
+</head>
+<body>
+  <script type="module" src="main.js"></script>
+</body>
+</html>
+```

doc/12_BOM.md

@@ -0,0 +1,386 @@
+# 브라우저 내장 객체
+브라우저 내장 객체는 브라우저 환경에서 기본적으로 제공되는 객체들로, 웹 애플리케이션을 작성할 때 사용됩니다. 이 객체들은 DOM(Document Object Model), BOM(Browser Object Model), 그리고 웹 API를 통해 제공됩니다.
+
+* window
+    - document
+    - navigator
+    - location
+    - history
+    - screen
+    
+
+## window
+window 객체는 브라우저의 전역 객체로, 브라우저 창 또는 탭 자체를 나타냅니다.
+모든 브라우저 환경에서 window는 최상위 객체로 존재하며, 전역 변수와 함수는 기본적으로 window 객체의 속성으로 등록됩니다.
+```javascript
+console.log(window); // window 객체 출력
+console.log(window === this); // true (전역 컨텍스트에서는 this가 window를 참조)
+```
+
+* 브라우저 전역 객체 : 모든 브라우저에서 제공되며, DOM, BOM, 그리고 자바스크립트 핵심 기능을 포함합니다.
+* 전역 변수와 함수 관리 : 전역으로 선언된 변수와 함수는 window 객체의 속성으로 자동 추가됩니다.
+* 다양한 내장 메서드 및 속성 제공 : 사용자 상호작용, DOM 조작, 타이머 설정, 브라우저 제어 등을 수행할 수 있는 메서드와 속성을 제공합니다.
+
+### 브라우저 정보
+* window.navigator : 브라우저와 사용자의 정보 제공
+* window.location : 현재 URL 정보와 관련된 작업을 수행
+* window.history : 브라우저의 방문 기록을 제어
+
+### 화면 및 디바이스 정보
+* window.screen : 화면 해상도와 관련된 정보를 제공
+* window.innerWidth / window.innerHeight : 브라우저 뷰포트(viewport)의 크기를 반환
+* window.devicePixelRatio : 디바이스 픽셀 밀도를 나타냄
+* window.scrollX / window.scrollY
+
+### 사용자 상호작용
+* window.alert() : 경고창을 표시
+* window.confirm() : 확인 및 취소 버튼이 있는 대화 상자를 표시
+* window.prompt() : 사용자로부터 입력을 받을 수 있는 대화 상자 표시
+
+### 타이머 메서드
+* window.setTimeout() : 일정 시간이 지난 후 함수를 실행
+* window.setInterval() : 일정 시간 간격으로 함수를 반복 실행
+* window.clearTimeout()
+* window.clearInterval()
+
+```javascript
+window.setTimeout(() => {
+  console.log("3초 후 실행");
+}, 3000);
+```
+```javascript
+const intervalId = window.setInterval(() => {
+  console.log("1초마다 실행");
+}, 1000);
+
+// 5초 후 반복 종료
+window.setTimeout(() => {
+  window.clearInterval(intervalId);
+}, 5000);
+```
+### DOM 조작
+* window.document : 현재 HTML 문서를 나타내는 객체로 DOM 조작의 핵심
+
+### 이벤트 처리
+* resize 이벤트 : 브라우저 창 크기 변경 시 실행
+* scroll 이벤트 : 사용자가 페이지를 스크롤할 때 실행
+* load 이벤트 : 페이지가 완전히 로드된 후 실행
+```javascript
+window.addEventListener("resize", () => {
+  console.log(`너비: ${window.innerWidth}, 높이: ${window.innerHeight}`);
+});
+
+window.addEventListener("scroll", () => {
+  console.log(`스크롤 위치: ${window.scrollY}`);
+});
+
+window.addEventListener("load", () => {
+  console.log("페이지가 로드되었습니다!");
+});
+```
+
+## document
+document 객체는 현재 HTML 문서를 나타내는 객체로, DOM(Document Object Model)을 통해 웹 페이지의 콘텐츠를 조작하고 구조에 접근할 수 있도록 합니다.
+브라우저가 HTML 코드를 파싱하여 트리 형태로 변환한 DOM의 루트 객체이며, 자바스크립트를 사용하여 페이지를 동적으로 변경할 수 있게 합니다.
+
+### HTML 요소 선택
+* getElementById() : id 속성을 기준으로 특정 요소를 선택
+* getElementsByClassName() : 클래스 이름을 기준으로 요소 집합을 선택
+* getElementsByTagName() : 태그 이름을 기준으로 요소 집합을 선택
+* querySelector() : CSS 선택자를 기반으로 첫 번째 요소를 선택
+* querySelectorAll() : CSS 선택자를 기반으로 모든 요소를 선택
+
+### 문서 정보 확인
+* document.title : 문서의 제목을 반환하거나 수정
+* document.URL : 현재 문서의 URL을 반환
+* document.domain : 문서의 도메인을 반환
+* document.lastModified : 문서가 마지막으로 수정된 날짜와 시간
+
+### 콘텐츠 조작
+* innerHTML : 요소의 HTML 콘텐츠를 가져오거나 설정
+* textContent : 요소의 텍스트 콘텐츠를 가져오거나 설정
+* createElement() : 새로운 HTML 요소를 생성
+* appendChild() : 부모 요소에 자식 요소를 추가
+* removeChild() : 특정 자식 요소를 제거
+
+```javascript
+const div = document.querySelector("#container");
+div.innerHTML = "<p>새로운 콘텐츠</p>";
+
+const heading = document.querySelector("h1");
+console.log(heading.textContent); // 텍스트 출력
+heading.textContent = "새로운 텍스트"; // 텍스트 변경
+
+const list = document.querySelector("ul");
+const newItem = document.createElement("li");
+newItem.textContent = "새 항목";
+list.appendChild(newItem);
+const firstItem = list.firstElementChild;
+list.removeChild(firstItem);
+```
+
+### 문서 구조 탐색
+* document.body : 문서의 `<body>` 요소를 반환
+* document.head : 문서의 `<head>` 요소를 반환
+* parentNode: 부모 노드
+* childNodes: 자식 노드 리스트
+* firstChild, lastChild: 첫 번째/마지막 자식 노드
+* previousSibling, nextSibling: 이전/다음 형제 노드
+
+```javascript
+const container = document.getElementById("container");
+console.log(container.parentNode); // 부모 노드
+console.log(container.childNodes); // 자식 노드 리스트
+
+const firstItem = document.querySelector("li");
+console.log(firstItem.nextSibling); // 다음 형제 노드
+console.log(firstItem.previousSibling); // 이전 형제 노드
+```
+
+### 클래스 조작
+* classList : 요소의 클래스를 추가, 제거, 토글, 확인
+```javascript
+const element = document.querySelector("div");
+element.classList.add("highlight"); // 클래스 추가
+element.classList.remove("highlight"); // 클래스 제거
+element.classList.toggle("hidden"); // 클래스 토글
+console.log(element.classList.contains("hidden")); // 클래스 포함 여부
+```
+### 이벤트 처리
+* addEventListener() : 요소에 이벤트 리스너를 추가
+* removeEventListener() : 요소에서 이벤트 리스너를 제거
+```javascript
+const button = document.querySelector("button");
+button.addEventListener("click", () => {
+  alert("버튼 클릭!");
+});
+```
+
+### 폼 및 입력 요소
+* forms : 문서의 모든 `<form>` 요소를 반환
+* elements : 특정 폼의 모든 입력 요소를 반환
+```javascript
+const form = document.forms[0];
+console.log(form.elements["username"].value); // 이름이 "username"인 입력값
+```
+
+### 이벤트
+* DOMContentLoaded : 문서의 HTML이 모두 로드된 후 실행
+* readystatechange : 문서의 준비 상태가 변경될 때 실행
+```javascript
+document.addEventListener("DOMContentLoaded", () => {
+  console.log("DOM이 완전히 로드되었습니다!");
+});
+```
+
+## navigator
+navigator 객체는 브라우저 및 사용자 디바이스에 대한 정보를 제공하는 브라우저 내장 객체입니다.
+
+### 브라우저 및 사용자 정보
+* navigator.userAgent : 브라우저 및 운영 체제에 대한 정보를 포함한 문자열
+* navigator.platform : 사용자의 운영 체제를 나타냄
+
+### 네트워크 상태 및 연결
+* navigator.onLine : 디바이스의 온라인 상태를 나타냄. (인터넷 연결이 되어 있으면 true, 그렇지 않으면 false)
+* navigator.connection : 네트워크 연결 속성(타입, 대역폭 등)을 제공. 일부 브라우저에서만 지원됨.
+
+### 사용자 설정
+* navigator.language : 사용자가 설정한 기본 언어를 반환
+* navigator.languages : 브라우저에서 지원하는 언어 배열
+
+### 디바이스 및 하드웨어 정보
+* navigator.geolocation : 사용자의 위치 정보를 제공. GPS와 같은 기술을 활용
+* navigator.hardwareConcurrency : 사용자의 CPU 논리 프로세서 코어 수를 반환
+* navigator.deviceMemory : 디바이스의 RAM 용량(GB 단위, 일부 브라우저만 지원)
+* navigator.maxTouchPoints : 디바이스에서 지원하는 최대 터치 포인트 개수를 반환
+
+```javascript
+navigator.geolocation.getCurrentPosition(
+  (position) => {
+    console.log(`위도: ${position.coords.latitude}, 경도: ${position.coords.longitude}`);
+  },
+  (error) => {
+    console.error("위치 정보를 가져오지 못했습니다.", error);
+  }
+);
+```
+### 보안 관련 정보
+* navigator.cookieEnabled : 브라우저에서 쿠키가 활성화되어 있는지 확인
+* navigator.credentials : 사용자 인증 정보를 관리하는 API. 패스워드 관리자나 인증 토큰 관련 작업에 사용
+* navigator.permissions : 브라우저 권한 상태를 확인
+```javascript
+navigator.credentials.get({
+  password: true,
+  federated: { providers: ["https://accounts.google.com"] },
+});
+
+navigator.permissions.query({ name: "geolocation" }).then((result) => {
+  console.log(result.state); // "granted", "denied", "prompt"
+});
+```
+
+### 미디어 및 브라우저 기능
+* navigator.mediaDevices : 디바이스의 카메라, 마이크, 스피커 등 미디어 장치에 접근
+* navigator.clipboard : 클립보드에 텍스트를 복사하거나 읽기
+```javascript
+navigator.mediaDevices.getUserMedia({ video: true, audio: true })
+  .then((stream) => {
+    console.log("미디어 스트림:", stream);
+  })
+  .catch((error) => {
+    console.error("미디어 장치 접근 실패:", error);
+  });
+
+navigator.clipboard.writeText("클립보드에 복사할 내용").then(() => {
+  console.log("클립보드에 복사 완료!");
+});
+
+navigator.clipboard.readText().then((text) => {
+  console.log("클립보드에서 읽은 내용:", text);
+});  
+```
+
+### 설치 및 실행 환경 정보
+* navigator.serviceWorker : 서비스 워커를 등록하거나 관리
+* navigator.standalone : 웹 앱이 독립 실행형 모드로 실행 중인지 여부를 나타냄. (iOS에서만 사용 가능)
+```javascript
+if ("serviceWorker" in navigator) {
+  navigator.serviceWorker.register("/service-worker.js").then((registration) => {
+    console.log("서비스 워커 등록 완료:", registration);
+  });
+}
+```
+### 이벤트
+* online / offline : 인터넷 연결 상태가 변경될 때 발생
+```javascript
+window.addEventListener("online", () => {
+  console.log("온라인 상태입니다.");
+});
+
+window.addEventListener("offline", () => {
+  console.log("오프라인 상태입니다.");
+});
+```
+
+## screen
+screen 객체는 **사용자의 화면(디스플레이)**에 대한 정보를 제공하는 브라우저 내장 객체입니다.
+이 객체를 통해 사용자의 디바이스 화면 크기, 가로·세로 해상도, 색상 깊이 등과 같은 정보를 얻을 수 있습니다.
+
+* screen.width / screen.height : 사용자의 화면(디스플레이)의 전체 너비 / 높이(픽셀 단위)
+* screen.availWidth / screen.availHeight : 사용 가능한 화면 너비/ 높이(픽셀 단위). 브라우저 인터페이스(UI) 요소(예: 작업 표시줄)가 차지하는 영역을 제외한 크기입니다.
+* screen.devicePixelRatio : 물리적 픽셀과 CSS 픽셀의 비율. 고해상도 디스플레이에서는 이 값이 1보다 큽니다.
+* screen.colorDepth : 디스플레이의 색상 깊이(컬러 비트 수). 일반적으로 24(16,777,216 색상) 또는 32비트입니다.
+* screen.pixelDepth : 픽셀 깊이를 반환. colorDepth와 동일한 값을 반환합니다.
+* screen.orientation : 화면의 현재 방향(가로 또는 세로)에 대한 정보를 제공. type 속성을 사용하여 방향 정보를 확인할 수 있습니다.
+* screen.orientation.lock() / screen.orientation.unlock() : 화면 방향을 특정 방향으로 고정/해제. 브라우저가 이를 지원하는 경우 사용 가능합니다.
+
+```javascript
+if (screen.width < 768) {
+  console.log("모바일 화면 레이아웃 적용");
+} else {
+  console.log("데스크톱 화면 레이아웃 적용");
+}
+```
+
+```javascript
+screen.orientation.addEventListener("change", () => {
+  console.log("현재 화면 방향:", screen.orientation.type);
+});
+```
+
+```javascript
+if (window.devicePixelRatio > 1) {
+  console.log("고해상도 디스플레이입니다.");
+} else {
+  console.log("표준 해상도 디스플레이입니다.");
+}
+```
+
+## location
+location 객체는 브라우저의 현재 URL 정보를 읽거나 수정할 수 있는 객체입니다.
+주로 웹 페이지의 URL을 확인, 변경하거나 리다이렉트(페이지 이동)를 수행하는 데 사용됩니다.
+
+* location.href : 현재 페이지의 전체 URL을 문자열로 반환하거나 변경합니다.
+* location.protocol : URL의 프로토콜 부분(http: 또는 https:).
+* location.host : 도메인 이름과 포트 번호를 포함한 URL의 호스트 부분.
+* location.hostname : 도메인 이름만 반환. 포트 번호는 제외됩니다.
+* location.port : URL의 포트 번호를 반환. 포트가 명시되지 않으면 빈 문자열("")을 반환.
+* location.pathname : URL의 경로 부분을 반환.
+* location.search : URL의 쿼리 문자열(물음표 ? 이후 부분)을 반환.
+* location.hash : URL의 해시 값(샤프 기호 # 이후 부분)을 반환
+* location.origin : URL의 원본(origin)을 반환. (프로토콜 + 호스트 + 포트 번호로 구성)
+* location.assign() : 지정된 URL로 이동.
+* location.replace() : 지정된 URL로 이동하되, 히스토리에 기록되지 않음(뒤로 가기 불가).
+* location.reload() : 현재 페이지를 다시 로드.
+    - 기본 동작은 캐시된 데이터를 사용하여 리로드.
+    - true를 전달하면 서버에서 최신 데이터를 다시 로드.
+
+```javascript
+console.log("전체 URL:", location.href);
+console.log("프로토콜:", location.protocol);
+console.log("호스트:", location.host);
+console.log("경로:", location.pathname);
+console.log("쿼리 문자열:", location.search);
+console.log("해시:", location.hash);
+```
+```javascript
+// 새로운 페이지로 이동
+location.href = "https://example.com/new-page";
+
+// 히스토리를 남기지 않고 이동
+location.replace("https://example.com/replace-page");
+
+// 3초 후 다른 페이지로 이동
+setTimeout(() => {
+  location.assign("https://example.com/delayed-page");
+}, 3000);
+```
+```javascript
+const queryString = location.search; // 예: "?query=123&name=John"
+const params = new URLSearchParams(queryString);
+
+// 쿼리 매개변수 읽기
+console.log(params.get("query")); // "123"
+console.log(params.get("name")); // "John"
+
+// 모든 매개변수 출력
+for (const [key, value] of params.entries()) {
+  console.log(`${key}: ${value}`);
+}
+```
+
+## history
+history 객체는 브라우저의 세션 히스토리를 관리하는 객체입니다.
+사용자가 브라우저의 뒤로 가기, 앞으로 가기, 새로운 페이지 추가 같은 탐색 기록과 관련된 동작을 프로그래밍적으로 제어할 수 있습니다.
+
+* history.length : 현재 세션 히스토리의 길이(기록된 페이지 수)를 반환합니다.
+* history.back() : 사용자의 브라우저에서 "뒤로 가기" 동작을 실행합니다.
+* history.forward() : 사용자의 브라우저에서 "앞으로 가기" 동작을 실행합니다.
+* history.go() : 히스토리에서 특정 위치로 이동합니다.
+    - history.go(-1)은 뒤로 가기와 동일.
+    - history.go(1)은 앞으로 가기와 동일.
+    - history.go(0)은 현재 페이지를 다시 로드합니다.
+* history.pushState() : 세션 히스토리에 새 기록을 추가합니다. 페이지를 이동하지 않고도 브라우저의 URL을 변경할 수 있습니다.
+    - state (object): 상태 데이터(저장할 객체).
+    - title (string): 페이지의 제목(현재 대부분 무시됨).
+    - url (string): URL(상대 경로나 절대 경로).
+* history.replaceState() : 세션 히스토리의 현재 기록을 변경합니다.
+
+## console
+console 객체는 자바스크립트에서 디버깅과 로깅을 위한 강력한 도구입니다.
+주로 브라우저의 개발자 도구(Developer Tools)에 접근해 로그를 출력하거나, 디버깅 정보를 확인하는 데 사용됩니다.
+
+* console.log() : 일반적인 메시지 또는 데이터를 출력. 가장 기본적인 출력 메서드입니다.
+* console.info()
+* console.warn()
+* console.error()
+* console.table() : 객체나 배열 데이터를 표 형태로 출력. 데이터의 구조를 한눈에 파악할 수 있어 유용합니다.
+* console.dir() : 객체의 속성과 프로퍼티를 트리 형태로 출력. DOM 요소나 복잡한 객체의 구조를 확인할 때 유용합니다.
+* console.assert() : 특정 조건이 거짓일 경우에만 메시지를 출력. 테스트용으로 많이 사용.
+* console.trace() : 현재 코드의 호출 스택(Call Stack)을 출력. 코드 실행 경로를 추적하는 데 유용.
+* console.time() / console.timeEnd() : 코드 실행 시간을 측정. 성능 테스트에 유용합니다.
+* console.group() / console.groupEnd() : 로그 메시지를 그룹화하여 출력. 중첩된 그룹도 생성 가능.
+* console.groupCollapsed() : console.group()와 동일하지만, 그룹이 축소된 상태로 시작.
+* console.clear() : 콘솔 내용을 모두 지웁니다.
+* console.count() : 특정 메시지가 호출된 횟수를 카운트.
+* console.countReset() : console.count()의 카운터를 초기화.

doc/13_Storage_API.md

@@ -0,0 +1,73 @@
+# 웹 스토리지(Web Storage) API
+
+localStorage와 sessionStorage는 웹 스토리지(Web Storage) API의 두 가지 주요 객체로, 브라우저에 데이터를 저장하는 데 사용됩니다.
+둘 다 키-값(key-value) 쌍으로 데이터를 저장하며, 데이터를 브라우저에 클라이언트 측에 영구적으로 저장하거나 일시적으로 저장할 수 있도록 합니다.
+
+## localStorage와 sessionStorage의 공통점
+
+* 키-값 기반 저장
+    - 데이터를 문자열 형태로 저장.
+    - 저장 시 데이터를 자동으로 문자열로 변환.
+    - 숫자, 객체 등도 저장할 수 있지만 문자열로 변환하여 저장해야 합니다.
+* 동기적(Synchronous) 동작
+    - 저장 및 읽기 작업은 동기적으로 처리됩니다.
+* 브라우저 한정
+    - 데이터는 브라우저에 저장되며, 브라우저 간 공유되지 않습니다.
+* 인터페이스
+    - setItem(key, value): 데이터를 저장.
+    - getItem(key): 데이터를 읽음.
+    - removeItem(key): 특정 데이터를 삭제.
+    - clear(): 저장된 모든 데이터를 삭제.
+    - key(index): 인덱스로 키를 가져옴.
+    - length: 저장된 항목 수 반환.
+
+## 차이점
+* 데이터 지속성	
+    - localStorage: 데이터를 영구적으로 저장하며, 브라우저를 닫아도 유지됨.	
+    - sessionStorage: 데이터를 일시적으로 저장하며, 브라우저 탭이나 창을 닫으면 사라짐.
+* 탭/창 간 공유	
+    - localStorage: 동일한 출처(origin)에서는 브라우저의 모든 탭에서 데이터 공유.	
+    - sessionStorage: 동일한 출처(origin)이라도 각 탭/창에서 데이터가 독립적.
+* 사용 사례	
+    - localStorage: 사용자 설정, 즐겨찾기, 쇼핑 카트 등의 영구 데이터 저장.	
+    - sessionStorage: 임시 데이터, 폼 입력값, 특정 세션 데이터 관리.
+
+```javascript
+// 데이터 저장
+localStorage.setItem("username", "philosopher");
+localStorage.setItem("age", 30);
+
+sessionStorage.setItem("sessionId", "abc123");
+```
+
+```javascript
+// 데이터 읽기
+const username = localStorage.getItem("username");
+console.log(username); // "philosopher"
+
+const sessionId = sessionStorage.getItem("sessionId");
+console.log(sessionId); // "abc123"
+```
+
+```javascript
+// 데이터 삭제
+localStorage.removeItem("username");
+
+sessionStorage.removeItem("sessionId");
+```
+
+```javascript
+// 모든 데이터 삭제
+localStorage.clear();
+
+sessionStorage.clear();
+```
+
+```javascript
+// 저장된 키와 값 확인
+for (let i = 0; i < localStorage.length; i++) {
+  const key = localStorage.key(i);
+  const value = localStorage.getItem(key);
+  console.log(`${key}: ${value}`);
+}
+```

doc/14_네트워크_통신.md

@@ -0,0 +1,130 @@
+# 네트워크 통신
+
+* fetch:
+    최신 HTTP 요청 처리 방식으로 간단하고 Promise 기반이며, 대부분의 API 호출에 적합.
+* XMLHttpRequest:
+    오래된 HTTP 요청 방식으로 여전히 지원되지만, 가독성과 유지보수 측면에서 권장되지 않음.
+* WebSocket:
+    서버와 클라이언트 간 실시간 양방향 통신을 처리하며, 채팅 애플리케이션, 게임, 실시간 알림 등에 적합.
+
+필요에 따라 단방향 API 호출에는 fetch를, 실시간 데이터 통신에는 WebSocket을 사용하는 것이 가장 적합합니다.
+
+## fetch API
+
+fetch는 네트워크 요청을 보내고 응답을 처리하기 위한 최신 JavaScript API입니다.
+이전의 XMLHttpRequest보다 간결하고 Promise 기반으로 작성되어 비동기 처리가 더 쉽습니다.
+
+* Promise 기반 : .then()과 async/await를 사용하여 비동기 요청을 처리.
+* JSON 및 텍스트 처리 간편 : 응답 데이터를 간편하게 JSON으로 변환 가능.
+* 더 직관적이고 간결한 문법 : 코드 가독성이 높음.
+
+### GET 요청
+```javascript
+fetch("https://api.example.com/data")
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error("Network response was not ok");
+    }
+    return response.json(); // JSON 데이터 변환
+  })
+  .then((data) => console.log(data)) // 데이터 처리
+  .catch((error) => console.error("Fetch error:", error));
+```
+### POST 요청
+```javascript
+fetch("https://api.example.com/data", {
+  method: "POST",
+  headers: {
+    "Content-Type": "application/json",
+  },
+  body: JSON.stringify({ name: "Alice", age: 25 }),
+})
+  .then((response) => response.json())
+  .then((data) => console.log(data))
+  .catch((error) => console.error("Fetch error:", error));
+```
+
+## XMLHttpRequest
+XMLHttpRequest는 자바스크립트의 오래된 네트워크 요청 API입니다.
+AJAX 기술의 핵심 요소로, 웹 애플리케이션에서 서버와 비동기적으로 데이터를 교환할 수 있게 해줍니다.
+
+* 오래된 기술
+    - 2000년대 초반부터 사용된 API.
+    - 아직도 일부 프로젝트에서 사용되지만, 새로운 프로젝트에는 fetch를 권장.
+* 비교적 복잡한 문법
+    - 이벤트 기반 방식으로 동작하여 코드가 장황해질 수 있음.
+
+### GET 요청
+```javascript
+const xhr = new XMLHttpRequest();
+xhr.open("GET", "https://api.example.com/data", true);
+
+xhr.onload = function () {
+  if (xhr.status === 200) {
+    console.log(JSON.parse(xhr.responseText)); // JSON 데이터 처리
+  } else {
+    console.error("Request failed with status:", xhr.status);
+  }
+};
+
+xhr.onerror = function () {
+  console.error("Network error occurred");
+};
+
+xhr.send();
+```
+### POST 요청
+
+```javascript
+const xhr = new XMLHttpRequest();
+xhr.open("POST", "https://api.example.com/data", true);
+xhr.setRequestHeader("Content-Type", "application/json");
+
+xhr.onload = function () {
+  if (xhr.status === 200) {
+    console.log(JSON.parse(xhr.responseText));
+  }
+};
+
+xhr.onerror = function () {
+  console.error("Network error occurred");
+};
+
+xhr.send(JSON.stringify({ name: "Alice", age: 25 }));
+```
+
+## WebSocket
+WebSocket은 서버와 클라이언트 간의 양방향, 실시간 통신을 위한 프로토콜입니다.
+HTTP는 요청-응답 기반으로 작동하지만, WebSocket은 연결이 유지되면서 데이터를 주고받을 수 있습니다.
+
+* 양방향 통신
+    - 클라이언트와 서버가 서로 데이터를 실시간으로 주고받을 수 있음.
+* 상태 유지(Connection)
+    - 연결이 유지되는 동안 빠르고 효율적인 데이터 전송 가능.
+* 낮은 대기 시간
+    - 실시간 애플리케이션(채팅, 게임 등)에 적합.
+
+```javascript
+const socket = new WebSocket("wss://example.com/socket");
+
+// 연결 성공 시 호출
+socket.onopen = function () {
+  console.log("WebSocket connection established");
+  socket.send("Hello, Server!");
+};
+
+// 메시지 수신 시 호출
+socket.onmessage = function (event) {
+  console.log("Message from server:", event.data);
+};
+
+// 에러 발생 시 호출
+socket.onerror = function (error) {
+  console.error("WebSocket error:", error);
+};
+
+// 연결 종료 시 호출
+socket.onclose = function () {
+  console.log("WebSocket connection closed");
+};
+```

doc/15_인증.md

@@ -0,0 +1,31 @@
+# 인증(Authentication)
+인증은 사용자가 누구인지 확인하는 과정을 의미합니다.
+일반적으로 로그인 과정을 통해 사용자 신원을 확인하며, 이후 세션을 통해 인증 상태를 유지합니다.
+
+## 세션 기반 인증
+* 서버에 세션 정보를 저장하고, 클라이언트는 세션 ID를 쿠키로 저장.
+* 서버에서 세션 ID를 확인하여 사용자를 인증.
+
+### 세션 기반 인증 흐름
+1. 클라이언트가 로그인 요청을 보냄.
+2. 서버는 사용자를 인증한 후 세션을 생성하고, 세션 ID를 쿠키로 설정하여 클라이언트에 반환.
+3. 클라이언트는 이후 요청마다 해당 세션 ID를 쿠키에 포함하여 보냄.
+4. 서버는 세션 ID를 기반으로 사용자를 인증.
+
+## 토큰 기반 인증
+* 사용자를 인증하면 **토큰(JWT)**을 생성하여 클라이언트에 전달.
+* 클라이언트는 요청 시 토큰을 포함(Authorization 헤더)하여 인증.
+
+### 토큰 기반 인증 흐름 (JWT)
+1. 클라이언트가 로그인 요청을 보냄.
+2. 서버는 사용자를 인증한 후 **JSON Web Token(JWT)**을 생성하여 클라이언트에 반환.
+3. 클라이언트는 토큰을 로컬 저장소 또는 쿠키에 저장.
+4. 이후 요청 시 토큰을 Authorization 헤더에 포함하여 서버에 전송.
+
+## OAuth
+* 서드파티 인증을 위한 표준 프로토콜.
+* Google, Facebook, GitHub 등을 통한 로그인 방식.
+
+
+
+

doc/16_테스트.md

@@ -0,0 +1,50 @@
+## 테스트
+
+## Jest
+Jest는 페이스북에서 개발한 자바스크립트 테스팅 프레임워크로, 간편한 설정과 다양한 기능을 제공하여 개발자들에게 많은 사랑을 받고 있습니다. Jest를 사용하면 자바스크립트 코드의 품질을 높이고, 버그를 조기에 발견하여 생산성을 향상시킬 수 있습니다.
+
+먼저, 프로젝트 디렉토리에서 다음 명령어를 실행하여 Jest를 설치합니다.
+```bash
+npm install --save-dev jest
+```
+package.json 파일의 scripts 섹션에 테스트 실행 스크립트를 추가합니다.
+```json
+"scripts": {
+  "test": "jest"
+}
+```
+Jest는 .js, .jsx, .ts, .tsx 확장자를 가진 파일이나 `__tests__` 디렉토리 내에 있는 파일을 자동으로 테스트 파일로 인식합니다.
+```javascript
+// sum.js
+function sum(a, b) {
+  return a + b;
+}
+
+// sum.test.js
+const sum = require('./sum');
+
+test('adds 1 + 2 to equal 3', () => {
+  expect(sum(1, 2)).toBe(3);
+});
+```
+터미널에서 다음 명령어를 실행하여 테스트를 실행합니다.
+```bash
+npm test
+```
+
+* 테스트 케이스 작성: test 함수를 사용하여 테스트 케이스를 작성합니다.
+* Expect API: expect() 함수를 사용하여 실제 값과 예상 값을 비교합니다. 다양한 매처(matcher)를 제공하여 정확한 비교가 가능합니다.
+* Mock 함수: 함수의 동작을 가짜로 만들어 테스트 환경을 제어할 수 있습니다.
+* Snapshot 테스트: UI 컴포넌트의 구조를 스냅샷으로 저장하고, 변경 여부를 확인합니다.
+* 커버리지 보고: 코드 커버리지를 측정하여 테스트의 완전성을 확인합니다.
+
+```javascript
+test('null, undefined, and other falsy', () => {
+  const n = null;
+  expect(n).toBeNull();
+  expect(n).toBeDefined();
+  expect(n).not.toBeUndefined();
+  expect(n).toBeFalsy();
+  expect(n).not.toBeTruthy();
+});
+```