43장 Ajax - 나세현

docs/43_Ajax/나세현.md

@@ -0,0 +1,138 @@
+## 43장 Ajax
+
+### 📍 43.1: Ajax란?
+
+**Ajax**: 자바스크립트를 사용해 부라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신해 웹페이지를 동적으로 갱신하는 프로그래밍 방식
+
+Ajax는 브라우저에서 제공하는 Web API인 `XMLHttpRequest` 객체를 기반으로 동작하며, 이 객체는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다.  
+이전의 웹페이지는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 리렌더링하는 방식으로 동작했는데, 이런 전통적인 방식은 다음과 같은 단점을 갖는다.
+
+- 이전 웹페이지가 차이가 없어서 변경할 필요가 없는 부분까지 포함한 완전한 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생한다.
+- 변경할 필요가 없는 부분까지 처음부터 다시 렌더링한다. 이로 인해 화면 전환이 일어나면 화면이 순간적으로 깜박이는 현상이 발생한다.
+- 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때까지 다음 처리는 블로킹된다.
+
+Ajax의 등장으로 인해 서버로부터 변경에 필요한 데이터만 비동기 방식으로 전송받아 웹페이지를 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 변경할 필요가 있는 부분만 한정적으로 렌더링하는 방식이 가능해졌다.
+
+### 📍 43.2: JSON
+
+**JSON**: 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷 (자바스크립트에 종속되지 않는 언어 독립형 포맷으로, 대부분의 프로그래밍 언어에서 사용 가능)
+
+#### JSON 표기 방식
+
+자바스크립트의 객체 리터럴과 유사하게 키와 값으로 구성된 순수한 텍스트다.  
+JSON의 키는 반드시 큰따옴표로 묶어야 한다. (값은 상관없음)
+
+```json
+{
+  "name": "Lee",
+  "age": 20,
+  "alive": true,
+  "hobby": ["traveling", "tennis"]
+}
+```
+
+#### `JSON.stringify`
+
+`JSON.stringify` 메서드는 객체를 JSON 포맷의 문자열로 변환한다.  
+클라이언트가 서버로 객체를 전송하려면 객체를 이렇게 문자열화해야 하는데, 이를 직렬화(serializing)라 한다.  
+객체뿐만 아니라 배열도 JSON 포맷의 문자열로 변환한다.
+
+#### `JSON.parse`
+
+JSON 포맷의 문자열을 객체로 변환한다.  
+서버로부터 클라이언트에게 전송된 JSON 데이터는 문자열인데, 이 문자열을 객체로서 사용하려면 이렇게 객체화해야 한다. (deserializing)
+
+### 📍 43.3: `XMLHttpRequest`
+
+자바스크립트를 사용해 HTTP 요청을 전송하려면 `XMLHttpRequest` 객체를 사용한다.  
+Web API인 이 객체는 HTTP 요청과 HTTP 응답 수신을 위한 다양한 메서드와 프로퍼티를 제공한다.
+
+#### `XMLHttpRequest` 객체 생성
+
+`XMLHttpRequest` 생성자 함수를 호출하여 생성한다.  
+이 객체는 브라우저에서 제공하는 Web API이므로 브라우저 환경에서만 정상적으로 실행된다.
+
+```javascript
+const xhr = new XMLHttpRequest();
+```
+
+#### `XMLHttpRequest` 객체의 프로퍼티와 메서드
+
+**프로토타입 프로퍼티**
+
+- `readyState`: HTTP 요청의 현재 상태를 나타내는 정수
+- `status`: HTTP 요청에 대한 응답 상태를 나타내는 정수
+- `statusText`: HTTP 요청에 대한 응답 메시지를 나타내는 문자열
+- `responseType`: HTTP 응답 타입
+- `response`: HTTP 요청에 대한 응답 body
+
+**이벤트 핸들러 프로퍼티**
+
+- `onreadystatechange`: `readyState` 프로퍼티 값이 변경된 경우
+- `onerror`: HTTP 요청에 에러가 발생한 경우
+- `onload`: HTTP 요청이 성공적으로 완료한 경우
+
+**메서드**
+
+- `open`: HTTP 요청 초기화
+- `send`: HTTP 요청 전송
+- `abort`: 이미 전송된 HTTP 요청 중단
+- `setRequestHeader`: 특정 HTTP 요청 헤더의 값을 설정
+
+#### HTTP 요청 전송
+
+1. `XMLHttpRequest.prototype.open` 메서드로 HTTP 요청을 초기화한다.
+2. 필요에 따라 `XMLHttpRequest.prototype.setRequestHeader` 메서드로 특정 HTTP 요청의 헤더 값을 설정한다.
+3. `XMLHttpRequest.prototype.send` 메서드로 HTTP 요청을 전송한다.
+
+```javascript
+const xhr = new XMLHttpRequest();
+
+xhr.open('GET', '/users');
+
+xhr.setRequestHeader('content-type', 'application/json');
+
+xhr.send();
+```
+
+#### HTTP 응답 처리
+
+서버가 전송한 응답을 처리하려면 `XMLHttpRequest` 객체가 발생시키는 이벤트를 캐치해야 한다.  
+이 객체가 갖는 이벤트 핸들러 프로퍼티 중에서 HTTP 요청의 현재 상태를 나타내는 `readyState` 프로퍼티 값이 변경된 경우 발생하는 `readystatechange` 이벤트를 캐치해 다음과 같이 HTTP 응답을 처리할 수 있다.
+
+```javascript
+const xhr = new XMLHttpRequest();
+
+xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
+
+xhr.send();
+
+xhr.onreadystatechange = () => {
+  if (xhr.readyState !== XMLHttpRequest.DONE) return;
+
+  if (xhr.status === 200) {
+    console.log(JSON.parse(xhr.response));
+  } else {
+    console.error('Error', xhr.status, xhr.statusText);
+  }
+};
+```
+
+`readystatechange` 대신 HTTP 요청이 성공적으로 완료된 경우 발생하는 `load` 이벤트를 캐치해도 좋다.  
+해당 이벤트를 캐치하는 경우 `xhr.readyState`가 `XMLHttpRequest.DONE`인지 확인할 필요가 없다.
+
+```javascript
+const xhr = new XMLHttpRequest();
+
+xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
+
+xhr.send();
+
+xhr.onload = () => {
+  if (xhr.status === 200) {
+    console.log(JSON.parse(xhr.response));
+  } else {
+    console.error('Error', xhr.status, xhr.statusText);
+  }
+};
+```