JavaScript 기초 강의 9편: 브라우저 API 활용하기

1. DOM API

DOM API는 JavaScript를 사용하여 HTML 및 CSS와 상호작용하고 웹 페이지의 요소를 동적으로 조작할 수 있게 합니다. 이전 강의에서 DOM 조작의 기본을 배웠다면, 이번에는 고급 DOM 조작을 다뤄보겠습니다.

DOM 요소 속성 조작

// 요소 선택
const button = document.querySelector("#myButton");

// 속성 설정 및 읽기
button.setAttribute("disabled", true);
console.log(button.getAttribute("id")); // "myButton"

// 속성 제거
button.removeAttribute("disabled");

스타일 변경

const div = document.querySelector("#myDiv");
div.style.backgroundColor = "lightblue";
div.style.padding = "20px";

 

이벤트 리스너 추가

document.querySelector("#myButton").addEventListener("click", () => {
    alert("버튼이 클릭되었습니다!");
});

 

---

2. Web Storage API

Web Storage API는 웹 브라우저에서 데이터를 클라이언트 측에 영구적으로 저장할 수 있도록 지원합니다. **localStorage**와 **sessionStorage**가 대표적입니다.

1) localStorage

localStorage는 데이터가 브라우저를 닫아도 유지됩니다.

// 데이터 저장
localStorage.setItem("username", "Alice");

// 데이터 읽기
const username = localStorage.getItem("username");
console.log(username); // "Alice"

// 데이터 삭제
localStorage.removeItem("username");

// 모든 데이터 제거
localStorage.clear();

2) sessionStorage

sessionStorage는 현재 탭에서만 데이터가 유지되며, 탭을 닫으면 데이터가 사라집니다.

sessionStorage.setItem("token", "12345");
console.log(sessionStorage.getItem("token")); // "12345"

---

3. Fetch API

Fetch API는 HTTP 요청을 통해 서버에서 데이터를 가져오거나 서버로 데이터를 보낼 때 사용됩니다. 이는 비동기적으로 동작하며 Promise를 반환하므로 async/await와 함께 사용하면 편리합니다.

GET 요청 예제

async function getData() {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
        if (!response.ok) {
            throw new Error("네트워크 응답이 정상이 아닙니다.");
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("데이터를 가져오는 중 오류 발생:", error);
    }
}

getData();

 

POST 요청 예제

async function postData() {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                title: "New Post",
                body: "This is the content of the new post.",
                userId: 1
            })
        });

        const data = await response.json();
        console.log("응답 데이터:", data);
    } catch (error) {
        console.error("데이터를 보내는 중 오류 발생:", error);
    }
}

postData();

코드 설명

• fetch() 함수는 HTTP 요청을 보낸 후 Promise를 반환하며, await를 사용해 응답이 올 때까지 기다릴 수 있습니다.
• headers와 body 속성을 사용하여 POST 요청에 필요한 설정을 추가할 수 있습니다.

---

4. 브라우저 API의 활용 예제

예제: 사용자의 방문 횟수 저장

 

이 예제는 localStorage를 사용해 사용자가 페이지를 몇 번 방문했는지 기록합니다.

// 방문 횟수 추적
let visitCount = localStorage.getItem("visitCount");

if (visitCount === null) {
    visitCount = 1;
} else {
    visitCount = parseInt(visitCount) + 1;
}

localStorage.setItem("visitCount", visitCount);
document.body.innerHTML = `<p>이 페이지를 ${visitCount}번 방문했습니다.</p>`;

예제: Fetch API로 사용자 목록 가져오기

async function loadUsers() {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    const users = await response.json();
    
    const userList = document.createElement("ul");
    users.forEach(user => {
        const listItem = document.createElement("li");
        listItem.textContent = `${user.name} (${user.email})`;
        userList.appendChild(listItem);
    });
    
    document.body.appendChild(userList);
}

loadUsers();

요약

이번 강의에서는 브라우저 API를 사용하여 웹 페이지와 상호작용하는 방법을 배웠습니다. DOM API로 요소를 조작하고, Web Storage API로 데이터를 클라이언트 측에 저장하며, Fetch API를 사용해 서버와 데이터를 주고받는 기법을 학습했습니다. 다음 강의에서는 JavaScript와 CSS 애니메이션의 연동 및 애니메이션을 조작하는 방법을 알아보겠습니다.