8장: JavaScript와 웹 API
JavaScript는 다양한 웹 API를 통해 브라우저와 상호작용하며, 이를 통해 더욱 동적인 웹 애플리케이션을 개발할 수 있습니다. 이 장에서는 브라우저 내장 API, JSON 데이터 처리, AJAX와 서버 통신에 대해 알아보겠습니다.
#### 브라우저 내장 API
브라우저는 여러 가지 내장 API를 제공하여 웹 페이지와 상호작용할 수 있게 합니다. 대표적인 브라우저 내장 API에는 `localStorage`, `sessionStorage`, `fetch` API 등이 있습니다.
##### localStorage와 sessionStorage
`localStorage`와 `sessionStorage`는 클라이언트 측에 데이터를 저장할 수 있는 저장소입니다. `localStorage`는 브라우저를 닫아도 데이터가 유지되지만, `sessionStorage`는 브라우저 세션이 종료되면 데이터가 삭제됩니다.
- **localStorage**: 데이터를 영구적으로 저장합니다.
- **sessionStorage**: 데이터를 세션 동안만 저장합니다.
데이터 저장:
localStorage.setItem("username", "JohnDoe");
sessionStorage.setItem("sessionID", "123456");
데이터 읽기:
let username = localStorage.getItem("username");
let sessionID = sessionStorage.getItem("sessionID");
데이터 삭제:
localStorage.removeItem("username");
sessionStorage.removeItem("sessionID");
모든 데이터 삭제:
localStorage.clear();
sessionStorage.clear();
##### fetch API
`fetch` API는 네트워크 요청을 보내고 응답을 처리할 수 있는 최신 방법입니다. `fetch`는 프로미스를 반환하므로 비동기 처리를 쉽게 할 수 있습니다.
GET 요청 예제:
fetch("https://api.example.com/data")
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error("Error:", error);
});
POST 요청 예제:
fetch("https://api.example.com/data", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ username: "JohnDoe", age: 30 })
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error("Error:", error);
});
#### JSON 데이터 처리
JSON(JavaScript Object Notation)은 데이터를 저장하고 전송하기 위한 경량의 데이터 형식입니다. JSON은 자바스크립트 객체 표기법과 유사하여, 자바스크립트에서 쉽게 사용할 수 있습니다.
JSON 문자열을 객체로 변환:
let jsonString = '{"name": "John", "age": 30}';
let jsonObj = JSON.parse(jsonString);
console.log(jsonObj.name); // "John"
객체를 JSON 문자열로 변환:
let person = { name: "John", age: 30 };
let jsonString = JSON.stringify(person);
console.log(jsonString); // '{"name":"John","age":30}'
#### AJAX와 서버 통신
AJAX(Asynchronous JavaScript and XML)는 페이지를 새로 고치지 않고 서버와 비동기적으로 데이터를 주고받기 위해 사용됩니다. 전통적인 AJAX 요청은 `XMLHttpRequest` 객체를 사용하여 수행됩니다.
AJAX 요청 예제:
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onload = function() {
if (xhr.status === 200) {
let data = JSON.parse(xhr.responseText);
console.log(data);
} else {
console.error("Request failed. Returned status of " + xhr.status);
}
};
xhr.send();
`fetch` API는 `XMLHttpRequest`를 대체하는 최신 방법으로, 더 간결하고 직관적인 코드 작성을 가능하게 합니다.
fetch("https://api.example.com/data")
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error("Error:", error);
});
#### WebSocket
WebSocket은 서버와 클라이언트 간의 양방향 통신을 가능하게 하는 프로토콜입니다. 실시간 데이터 전송이 필요한 애플리케이션에서 자주 사용됩니다.
WebSocket 연결 예제:
let socket = new WebSocket("wss://example.com/socket");
socket.onopen = function(event) {
console.log("WebSocket is open now.");
socket.send("Hello Server!");
};
socket.onmessage = function(event) {
console.log("Received data: " + event.data);
};
socket.onclose = function(event) {
console.log("WebSocket is closed now.");
};
socket.onerror = function(error) {
console.error("WebSocket error: " + error);
};
이 장에서는 JavaScript와 웹 API에 대해 배웠습니다. 브라우저 내장 API, JSON 데이터 처리, AJAX와 서버 통신을 통해 웹 페이지와 서버 간의 상호작용을 쉽게 구현할 수 있습니다. 다음 장에서는 JavaScript 라이브러리와 프레임워크에 대해 알아보겠습니다.
댓글
댓글 쓰기