2025-01-26T02:57:06

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

@@ -162,4 +162,45 @@ animals.forEach(animal => animal.speak());
 // 동물이 소리를 냅니다.
 ```
 
+#### 정적 필드 / 메서드
+정적 필드는 클래스 자체에 속하는 필드로, 인스턴스를 생성하지 않고도 클래스 이름으로 직접 접근할 수 있는 필드입니다. 
+```javascript
+class MathUtils {
+  static PI = 3.14159;
+
+  static square(x) {
+    return x * x;
+  }
+}
+
+console.log(MathUtils.PI); // 3.14159
+console.log(MathUtils.square(5)); // 25
+```
+
+#### Getter / Setter
+```javascript
+class Person {
+  #name; // private 속성
+  #age;
+
+  constructor(name, age) {
+    this.#name = name;
+    this.#age = age;
+  }
+
+  get name() {
+    return this.#name;
+  }
+
+  set name(value) {
+    this.#name = value;
+  }
+}
+
+const person1 = new Person('홍길동', 30);
+console.log(person1.name); // 홍길동 (getter를 통해 접근)
+console.log(person1.#name); // Error: Property '#name' is private
+```
+* get과 set을 사용하여 속성에 대한 접근을 제어할 수 있습니다.
+
 

doc/12_BOM.md

@@ -8,7 +8,6 @@
     - history
     - screen
     
-
 ## window
 window 객체는 브라우저의 전역 객체로, 브라우저 창 또는 탭 자체를 나타냅니다.
 모든 브라우저 환경에서 window는 최상위 객체로 존재하며, 전역 변수와 함수는 기본적으로 window 객체의 속성으로 등록됩니다.

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

@@ -18,6 +18,12 @@ fetch는 네트워크 요청을 보내고 응답을 처리하기 위한 최신 J
 * JSON 및 텍스트 처리 간편 : 응답 데이터를 간편하게 JSON으로 변환 가능.
 * 더 직관적이고 간결한 문법 : 코드 가독성이 높음.
 
+```javascript
+fetch(url, options)
+```
+* url: 요청을 보낼 URL을 지정합니다.
+* options (선택 사항): 요청에 대한 추가적인 설정을 지정할 수 있는 객체입니다. 예를 들어, method, headers, body 등을 설정할 수 있습니다.
+
 ### GET 요청
 ```javascript
 fetch("https://api.example.com/data")
@@ -30,6 +36,9 @@ fetch("https://api.example.com/data")
   .then((data) => console.log(data)) // 데이터 처리
   .catch((error) => console.error("Fetch error:", error));
 ```
+* then(): Promise 객체가 성공적으로 처리되었을 때 실행될 함수를 지정합니다.
+* catch(): Promise가 실패했을 때 실행될 함수를 지정합니다.
+
 ### POST 요청
 ```javascript
 fetch("https://api.example.com/data", {
@@ -44,6 +53,72 @@ fetch("https://api.example.com/data", {
   .catch((error) => console.error("Fetch error:", error));
 ```
 
+### Response 객체
+Fetch API를 통해 네트워크 요청을 보내면, 서버에서 받은 응답은 Response 객체라는 형태로 제공됩니다. Response 객체는 HTTP 요청에 대한 메타데이터(예: 상태 코드, 헤더 등)와 응답 본문을 담고 있습니다.
+
+#### 주요 속성
+* ok: Boolean 값으로, 응답이 성공적이면 true, 실패하면 false를 반환합니다. (200-299 상태 코드 범위)
+* status: HTTP 상태 코드를 나타냅니다. (예: 200, 404, 500)
+* statusText: 상태 코드에 대한 텍스트 설명입니다. (예: "OK", "Not Found")
+* headers: 응답 헤더를 나타내는 Headers 객체입니다.
+* url: 응답을 받은 URL입니다.
+* body: 응답 본문을 나타내는 ReadableStream입니다.
+
+#### 주요 메서드
+* json(): 응답 본문을 JSON 객체로 파싱하여 Promise를 반환합니다.
+* text(): 응답 본문을 문자열로 변환하여 Promise를 반환합니다.
+* blob(): 응답 본문을 Blob 객체로 변환하여 Promise를 반환합니다.
+* arrayBuffer(): 응답 본문을 ArrayBuffer 객체로 변환하여 Promise를 반환합니다.
+* formData(): 응답 본문을 FormData 객체로 변환하여 Promise를 반환합니다.
+* clone(): Response 객체를 복사합니다.
+
+#### Response 객체 활용 시 주의사항
+* 응답 상태 확인: ok 속성과 status 속성을 확인하여 응답이 성공적인지 확인해야 합니다.
+* 응답 형식 파악: 서버에서 보낸 응답의 Content-Type 헤더를 확인하여 적절한 메서드(json(), text(), blob() 등)를 사용해야 합니다.
+
+```javascript
+const form = document.getElementById('myForm');
+const fileInput = document.getElementById('fileInput');
+
+form.addEventListener('submit', (event) => {
+    event.preventDefault();
+
+    const formData = new FormData();
+    formData.append('file', fileInput.files[0]);
+
+    fetch('https://your-server-endpoint', {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => {
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        return response.text(); // 서버에서 보낸 응답을 텍스트로 파싱
+    })
+    .then(data => {
+        console.log('Success:', data);
+    })
+    .catch(error => {
+        console.error('Error:', error);
+    });
+});
+```
+#### async/await을 이용한 Fetch API 사용
+```javascript
+async function fetchData() {
+  try {
+    const response = await fetch('https://api.example.com/data');
+    const data = await response.json();
+    console.log(data);
+  } catch (error) {
+    console.error('Error:', error);
+  }
+}
+
+fetchData();
+```
+
 ## XMLHttpRequest
 XMLHttpRequest는 자바스크립트의 오래된 네트워크 요청 API입니다.
 AJAX 기술의 핵심 요소로, 웹 애플리케이션에서 서버와 비동기적으로 데이터를 교환할 수 있게 해줍니다.

doc/15_Canvas_API.md

@@ -0,0 +1,70 @@
+# Canvas API
+
+Canvas API는 HTML5에서 제공하는 API로, 웹 페이지에 2차원 그래픽을 그릴 수 있도록 해주는 강력한 도구입니다.
+
+## 주요 기능
+* 2D 그래픽 그리기: 선, 도형, 이미지 등을 자유롭게 그릴 수 있습니다.
+* 텍스트 렌더링: 다양한 글꼴과 스타일로 텍스트를 표현할 수 있습니다.
+* 이미지 처리: 이미지를 로드하고 조작하여 새로운 이미지를 생성할 수 있습니다.
+* 애니메이션: setInterval이나 requestAnimationFrame 함수와 함께 사용하여 부드러운 애니메이션을 구현할 수 있습니다.
+* 상호 작용: 마우스, 터치 이벤트를 감지하여 사용자와 상호 작용하는 기능을 구현할 수 있습니다.
+
+## 사용 방법
+1. HTML에 캔버스 요소 추가
+    ```html
+    <canvas id="myCanvas" width="300" height="150"></canvas>
+    ```
+2. JavaScript에서 캔버스 요소 가져오기
+    ```javascript
+    const canvas = document.getElementById('myCanvas');
+    ```
+3. 2D 렌더링 컨텍스트 얻기
+    ```javascript
+    const ctx = canvas.getContext('2d');
+    ```
+    * getContext('2d') 메서드를 사용하여 2D 렌더링 컨텍스트를 얻습니다.
+    * 이 컨텍스트를 통해 다양한 그리기 메서드를 호출하여 캔버스에 그림을 그릴 수 있습니다.
+4. 그리기
+    ```javascript
+    ctx.fillStyle = 'blue';
+    ctx.fillRect(10, 10, 100, 50); // 파란색 사각형 그리기
+    ctx.beginPath();
+    ctx.arc(75, 75, 50, 0, Math.PI * 2); // 원 그리기
+    ctx.stroke();
+    ```
+
+## 경로 관련
+* beginPath(): 새로운 path를 시작합니다.
+* moveTo(x, y): 펜의 위치를 이동시킵니다.
+* lineTo(x, y): 현재 위치에서 지정된 좌표까지 선을 그립니다.
+* closePath(): 현재 path를 닫습니다.
+* arc(x, y, radius, startAngle, endAngle): 원을 그립니다.
+* fill(): 현재 path를 채웁니다.
+* stroke(): 현재 path의 테두리를 그립니다.
+
+## 스타일
+* fillStyle: 채우기 색상을 설정합니다.
+* strokeStyle: 선 색상을 설정합니다.
+* lineWidth: 선의 두께를 설정합니다.
+* lineCap: 선의 끝 모양을 설정합니다 (butt, round, square).
+* lineJoin: 선이 만나는 부분의 모양을 설정합니다 (miter, round, bevel).
+
+## 텍스트
+* fillText(text, x, y): 지정된 위치에 텍스트를 채워서 그립니다.
+* strokeText(text, x, y): 지정된 위치에 텍스트의 윤곽선을 그립니다.
+* font: 폰트 스타일을 설정합니다.
+
+## 이미지
+* drawImage(image, dx, dy): 이미지를 캔버스에 그립니다.
+* createPattern(image, repetition): 이미지를 패턴으로 만들어 채우기나 선 그리기에 사용합니다.
+
+## 변환
+* translate(x, y): 캔버스 좌표계의 원점을 이동시킵니다.
+* rotate(angle): 캔버스를 회전시킵니다.
+* scale(x, y): 캔버스를 확대 또는 축소합니다.
+
+## 그 외
+* clearRect(x, y, width, height): 지정된 영역을 지웁니다.
+* save(): 현재 캔버스 상태를 저장합니다.
+* restore(): 저장된 상태로 복원합니다.
+