2025-01-26T02:57:06
This commit is contained in:
@@ -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을 사용하여 속성에 대한 접근을 제어할 수 있습니다.
|
||||
|
||||
|
||||
|
||||
@@ -8,7 +8,6 @@
|
||||
- history
|
||||
- screen
|
||||
|
||||
|
||||
## window
|
||||
window 객체는 브라우저의 전역 객체로, 브라우저 창 또는 탭 자체를 나타냅니다.
|
||||
모든 브라우저 환경에서 window는 최상위 객체로 존재하며, 전역 변수와 함수는 기본적으로 window 객체의 속성으로 등록됩니다.
|
||||
|
||||
@@ -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 기술의 핵심 요소로, 웹 애플리케이션에서 서버와 비동기적으로 데이터를 교환할 수 있게 해줍니다.
|
||||
|
||||
70
doc/15_Canvas_API.md
Normal file
70
doc/15_Canvas_API.md
Normal file
@@ -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(): 저장된 상태로 복원합니다.
|
||||
|
||||
Reference in New Issue
Block a user