diff --git a/doc/08_객체_지향_프로그래밍.md b/doc/08_객체_지향_프로그래밍.md index 0b380ac..c3a647f 100644 --- a/doc/08_객체_지향_프로그래밍.md +++ b/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을 사용하여 속성에 대한 접근을 제어할 수 있습니다. + diff --git a/doc/12_BOM.md b/doc/12_BOM.md index 7541d17..e88e0fd 100644 --- a/doc/12_BOM.md +++ b/doc/12_BOM.md @@ -8,7 +8,6 @@ - history - screen - ## window window 객체는 브라우저의 전역 객체로, 브라우저 창 또는 탭 자체를 나타냅니다. 모든 브라우저 환경에서 window는 최상위 객체로 존재하며, 전역 변수와 함수는 기본적으로 window 객체의 속성으로 등록됩니다. diff --git a/doc/14_네트워크_통신.md b/doc/14_네트워크_통신.md index a712a01..ff0cf5d 100644 --- a/doc/14_네트워크_통신.md +++ b/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 기술의 핵심 요소로, 웹 애플리케이션에서 서버와 비동기적으로 데이터를 교환할 수 있게 해줍니다. diff --git a/doc/15_Canvas_API.md b/doc/15_Canvas_API.md new file mode 100644 index 0000000..4a89c1c --- /dev/null +++ b/doc/15_Canvas_API.md @@ -0,0 +1,70 @@ +# Canvas API + +Canvas API는 HTML5에서 제공하는 API로, 웹 페이지에 2차원 그래픽을 그릴 수 있도록 해주는 강력한 도구입니다. + +## 주요 기능 +* 2D 그래픽 그리기: 선, 도형, 이미지 등을 자유롭게 그릴 수 있습니다. +* 텍스트 렌더링: 다양한 글꼴과 스타일로 텍스트를 표현할 수 있습니다. +* 이미지 처리: 이미지를 로드하고 조작하여 새로운 이미지를 생성할 수 있습니다. +* 애니메이션: setInterval이나 requestAnimationFrame 함수와 함께 사용하여 부드러운 애니메이션을 구현할 수 있습니다. +* 상호 작용: 마우스, 터치 이벤트를 감지하여 사용자와 상호 작용하는 기능을 구현할 수 있습니다. + +## 사용 방법 +1. HTML에 캔버스 요소 추가 + ```html + + ``` +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(): 저장된 상태로 복원합니다. + diff --git a/doc/15_인증.md b/doc/21_인증.md similarity index 100% rename from doc/15_인증.md rename to doc/21_인증.md diff --git a/doc/16_테스트.md b/doc/22_테스트.md similarity index 100% rename from doc/16_테스트.md rename to doc/22_테스트.md