2025-01-26T02:15:33

2025-01-26 02:15:33 +09:00
parent f43f6328c0
commit f867e689aa
22 changed files with 2702 additions and 213 deletions
--- a/build.sh
+++ b/build.sh
--- a/doc/00_javascript.md
+++ b/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 만들기
 간단한 게임 만들기
--- a/doc/01_변수와_데이터_타입.md
+++ b/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; // 오류 발생 (상수의 값을 변경할 수 없음)
 ```
--- a/doc/01_변수와_상수.md
+++ b/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은 선언 후 초기화가 가능합니다.
--- a/doc/02_데이터_타입과_형변환.md
+++ b/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]"
 ```
--- a/doc/02_연산자.md
+++ b/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
 ```
 ## 연산자 우선순위
 연산자는 각각 우선순위가 있으며, 우선순위가 높은 연산자가 먼저 계산됩니다.
 괄호를 사용하여 연산 순서를 변경할 수 있습니다.
--- a/doc/03_내장_객체.md
+++ b/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
 ```
--- a/doc/03_제어문.md
+++ b/doc/03_제어문.md
--- a/doc/04_연산자.md
+++ b/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
 ```
--- a/doc/04_함수.md
+++ b/doc/04_함수.md
--- a/doc/05_제어문.md
+++ b/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);
 }
 ```
--- a/doc/06_함수.md
+++ b/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
 ```
--- a/doc/07_객체와_배열.md
+++ b/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
 ```
--- a/doc/08_객체_지향_프로그래밍.md
+++ b/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());
 // 출력:
 // 고양이가 야옹합니다.
 // 강아지가 멍멍 짖습니다.
 // 동물이 소리를 냅니다.
 ```
--- a/doc/09_DOM_조작과_이벤트_처리.md
+++ b/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);
 });
 ```
--- a/doc/10_비동기_프로그래밍.md
+++ b/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가 완료될 때까지 기다리고, 그 결과를 반환합니다.
--- a/doc/11_모듈.md
+++ b/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>
 ```
--- a/doc/12_BOM.md
+++ b/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()의 카운터를 초기화.
--- a/doc/13_Storage_API.md
+++ b/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}`);
 }
 ```
--- a/doc/14_네트워크_통신.md
+++ b/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");
 };
 ```
--- a/doc/15_인증.md
+++ b/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 등을 통한 로그인 방식.
--- a/doc/16_테스트.md
+++ b/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();
 });
 ```