From f867e689aa520eb8ad17e521fafeff70dd1ff3e9 Mon Sep 17 00:00:00 2001 From: Elex Date: Sun, 26 Jan 2025 02:15:33 +0900 Subject: [PATCH] 2025-01-26T02:15:33 --- app.sh => build.sh | 0 doc/00_javascript.md | 67 ----- doc/01_변수와_데이터_타입.md | 71 ----- doc/01_변수와_상수.md | 96 +++++++ doc/02_데이터_타입과_형변환.md | 141 ++++++++++ doc/02_연산자.md | 75 ------ doc/03_내장_객체.md | 433 +++++++++++++++++++++++++++++++ doc/03_제어문.md | 0 doc/04_연산자.md | 142 ++++++++++ doc/04_함수.md | 0 doc/05_제어문.md | 110 ++++++++ doc/06_함수.md | 215 +++++++++++++++ doc/07_객체와_배열.md | 222 ++++++++++++++++ doc/08_객체_지향_프로그래밍.md | 165 ++++++++++++ doc/09_DOM_조작과_이벤트_처리.md | 214 +++++++++++++++ doc/10_비동기_프로그래밍.md | 136 ++++++++++ doc/11_모듈.md | 158 +++++++++++ doc/12_BOM.md | 386 +++++++++++++++++++++++++++ doc/13_Storage_API.md | 73 ++++++ doc/14_네트워크_통신.md | 130 ++++++++++ doc/15_인증.md | 31 +++ doc/16_테스트.md | 50 ++++ 22 files changed, 2702 insertions(+), 213 deletions(-) rename app.sh => build.sh (100%) delete mode 100644 doc/01_변수와_데이터_타입.md create mode 100644 doc/01_변수와_상수.md create mode 100644 doc/02_데이터_타입과_형변환.md delete mode 100644 doc/02_연산자.md create mode 100644 doc/03_내장_객체.md delete mode 100644 doc/03_제어문.md create mode 100644 doc/04_연산자.md delete mode 100644 doc/04_함수.md create mode 100644 doc/05_제어문.md create mode 100644 doc/06_함수.md create mode 100644 doc/07_객체와_배열.md create mode 100644 doc/08_객체_지향_프로그래밍.md create mode 100644 doc/09_DOM_조작과_이벤트_처리.md create mode 100644 doc/10_비동기_프로그래밍.md create mode 100644 doc/11_모듈.md create mode 100644 doc/12_BOM.md create mode 100644 doc/13_Storage_API.md create mode 100644 doc/14_네트워크_통신.md create mode 100644 doc/15_인증.md create mode 100644 doc/16_테스트.md diff --git a/app.sh b/build.sh similarity index 100% rename from app.sh rename to build.sh diff --git a/doc/00_javascript.md b/doc/00_javascript.md index d02c34a..844bfd1 100644 --- 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 만들기 -간단한 게임 만들기 diff --git a/doc/01_변수와_데이터_타입.md b/doc/01_변수와_데이터_타입.md deleted file mode 100644 index 0a00502..0000000 --- a/doc/01_변수와_데이터_타입.md +++ /dev/null @@ -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; // 오류 발생 (상수의 값을 변경할 수 없음) -``` - - diff --git a/doc/01_변수와_상수.md b/doc/01_변수와_상수.md new file mode 100644 index 0000000..740ebc3 --- /dev/null +++ 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은 선언 후 초기화가 가능합니다. diff --git a/doc/02_데이터_타입과_형변환.md b/doc/02_데이터_타입과_형변환.md new file mode 100644 index 0000000..efc8d5f --- /dev/null +++ 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]" +``` diff --git a/doc/02_연산자.md b/doc/02_연산자.md deleted file mode 100644 index 6cf1733..0000000 --- a/doc/02_연산자.md +++ /dev/null @@ -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 -``` - -## 연산자 우선순위 -연산자는 각각 우선순위가 있으며, 우선순위가 높은 연산자가 먼저 계산됩니다. - -괄호를 사용하여 연산 순서를 변경할 수 있습니다. diff --git a/doc/03_내장_객체.md b/doc/03_내장_객체.md new file mode 100644 index 0000000..3713c98 --- /dev/null +++ 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 +``` + diff --git a/doc/03_제어문.md b/doc/03_제어문.md deleted file mode 100644 index e69de29..0000000 diff --git a/doc/04_연산자.md b/doc/04_연산자.md new file mode 100644 index 0000000..ae26b51 --- /dev/null +++ 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 +``` diff --git a/doc/04_함수.md b/doc/04_함수.md deleted file mode 100644 index e69de29..0000000 diff --git a/doc/05_제어문.md b/doc/05_제어문.md new file mode 100644 index 0000000..dc78b29 --- /dev/null +++ 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); +} +``` + diff --git a/doc/06_함수.md b/doc/06_함수.md new file mode 100644 index 0000000..9faba7b --- /dev/null +++ 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 +``` diff --git a/doc/07_객체와_배열.md b/doc/07_객체와_배열.md new file mode 100644 index 0000000..5b3aa52 --- /dev/null +++ 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 +``` diff --git a/doc/08_객체_지향_프로그래밍.md b/doc/08_객체_지향_프로그래밍.md new file mode 100644 index 0000000..0b380ac --- /dev/null +++ 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()); +// 출력: +// 고양이가 야옹합니다. +// 강아지가 멍멍 짖습니다. +// 동물이 소리를 냅니다. +``` + + diff --git a/doc/09_DOM_조작과_이벤트_처리.md b/doc/09_DOM_조작과_이벤트_처리.md new file mode 100644 index 0000000..711bc6b --- /dev/null +++ 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 = "

새로운 HTML 내용입니다.

"; +``` +#### 속성(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 + +``` + +### 주요 이벤트 종류 +#### 마우스 이벤트 +* 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); +}); +``` diff --git a/doc/10_비동기_프로그래밍.md b/doc/10_비동기_프로그래밍.md new file mode 100644 index 0000000..b05bf6f --- /dev/null +++ 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가 완료될 때까지 기다리고, 그 결과를 반환합니다. diff --git a/doc/11_모듈.md b/doc/11_모듈.md new file mode 100644 index 0000000..ac5cad7 --- /dev/null +++ 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 파일에서 ` +``` + +### 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 + + + + + JavaScript Modules Example + + + + + +``` \ No newline at end of file diff --git a/doc/12_BOM.md b/doc/12_BOM.md new file mode 100644 index 0000000..7541d17 --- /dev/null +++ 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 = "

새로운 콘텐츠

"; + +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 : 문서의 `` 요소를 반환 +* document.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 : 문서의 모든 `
` 요소를 반환 +* 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()의 카운터를 초기화. diff --git a/doc/13_Storage_API.md b/doc/13_Storage_API.md new file mode 100644 index 0000000..35b558d --- /dev/null +++ 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}`); +} +``` \ No newline at end of file diff --git a/doc/14_네트워크_통신.md b/doc/14_네트워크_통신.md new file mode 100644 index 0000000..a712a01 --- /dev/null +++ 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"); +}; +``` diff --git a/doc/15_인증.md b/doc/15_인증.md new file mode 100644 index 0000000..3d0b989 --- /dev/null +++ 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 등을 통한 로그인 방식. + + + + diff --git a/doc/16_테스트.md b/doc/16_테스트.md new file mode 100644 index 0000000..ea36b73 --- /dev/null +++ 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(); +}); +```