Web API란?

Web API는 브라우저가 제공하는 객체, 메서드, 속성들의 집합으로, JavaScript가 웹 브라우저와 상호작용할 수 있게 해준다.

• DOM 조작, 이벤트 처리, 네트워크 요청, 멀티미디어 재생 등 다양한 작업을 수행할 수 있다.

• JavaScript의 핵심 기능은 아니지만 브라우저 환경에서 사용할 수 있는 확장된 기능이다.

 

DOM이란 무엇인가?

[HTTP] 브라우저(Browser)의 작동원리와 DOM(Document Object Model)

 

 

 

---

왜 Web API가 중요한가?

• 브라우저는 운영체제 위에서 동작하기 때문에, 직접 파일 시스템에 접근하거나 네트워크 요청을 보낼 수 없다. 따라서 Web API가 중간 역할을 하여 브라우저와 운영체제 간의 안전한 통신을 가능하게 한다.

• 예를 들어, DOM API는 브라우저가 HTML 문서를 객체 모델로 변환하고 JavaScript가 이를 조작할 수 있게 해준다.

• Fetch API는 브라우저가 네트워크 요청을 보내고 서버 응답을 처리할 수 있도록 해준다.

• Geolocation API는 사용자의 위치 정보를 운영체제로부터 받아 JavaScript에 전달한다.

 

이렇게 Web API는 브라우저가 할 수 없는 작업을 대신 수행하고, JavaScript가 이를 활용하여 웹 페이지를 동적으로 변화시킬 수 있게 해준다.

 

 

 

---

Web API의 주요 종류

 

1. DOM(Document Object Model) API

• HTML 문서를 객체 모델로 표현하며, JavaScript로 문서의 구조, 스타일, 내용을 동적으로 조작할 수 있다.

• 예시:

const element = document.getElementById('title'); // ID로 요소 가져오기
element.textContent = '새로운 제목'; // 내용 변경
element.style.color = 'red'; // 스타일 변경

 

---

 

2. Event API

• 사용자 동작(클릭, 키보드 입력, 스크롤 등)을 감지하고 대응할 수 있다.

• 이벤트 타입: click, keydown, scroll, focus, blur 등.

• 예시:

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

 

---

 

3. Fetch API

• 비동기 네트워크 요청을 보내고 응답을 처리한다.

• AJAX의 현대적 대안으로 Promise 기반이다.

• 예시:

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

 

---

 

4. Web Storage API

• 브라우저에 데이터를 영구적으로 저장할 수 있다.

• LocalStorage: 브라우저를 닫아도 지속됨.

• SessionStorage: 브라우저 탭이 닫힐 때 삭제됨.

• 예시:

// LocalStorage 예제
localStorage.setItem('username', 'Alex');
console.log(localStorage.getItem('username')); // 'Alex'

// SessionStorage 예제
sessionStorage.setItem('sessionID', '12345');
console.log(sessionStorage.getItem('sessionID')); // '12345'

 

---

 

5. Canvas API

• HTML5의 <canvas> 요소를 통해 그래픽과 애니메이션을 그릴 수 있다.

• 게임, 데이터 시각화, 이미지 편집 등 고성능 그래픽 작업에 유용하다.

• 예시:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100); // 파란색 사각형 그리기

 

---

 

6. Web Audio API

• 오디오 조작 및 생성을 위한 강력한 도구.

• 사운드 시각화, 실시간 오디오 처리, 음악 생성 등에 사용된다.

• 예시:

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(440, audioContext.currentTime); // A4 음
oscillator.connect(audioContext.destination);
oscillator.start();
oscillator.stop(audioContext.currentTime + 1); // 1초 후 멈춤

 

---

 

7. Geolocation API

• 사용자의 위치 정보를 가져올 수 있다. (사용자 동의 필요)

• 위도(latitude), 경도(longitude) 정보를 반환한다.

• 예시:

navigator.geolocation.getCurrentPosition(position => {
    console.log(`위도: ${position.coords.latitude}`);
    console.log(`경도: ${position.coords.longitude}`);
});

 

---

 

8. Notification API

• 사용자에게 알림을 보낼 수 있다.

• 브라우저 권한이 필요하며, 백그라운드에서도 알림을 받을 수 있다.

• 예시:

if (Notification.permission === 'granted') {
    new Notification('안녕하세요!', {
        body: '알림 내용입니다.',
        icon: 'icon.png'
    });
} else {
    Notification.requestPermission().then(permission => {
        if (permission === 'granted') {
            new Notification('안녕하세요!', {
                body: '알림 내용입니다.',
                icon: 'icon.png'
            });
        }
    });
}

 

---

 

9. Timer

• setTimeout()과 setInterval()을 통해 지연 실행 또는 반복 실행을 할 수 있다.

• Web API의 타이머 큐에서 관리되며, 시간이 지나면 태스크 큐로 이동해 이벤트 루프에 의해 실행된다.

• JavaScript가 직접 시간을 측정하지 않고, 브라우저가 운영체제의 타이머 기능을 이용해 시스템 콜을 통해 수행한다.

• 예시:

// 2초 후에 한 번 실행
setTimeout(() => {
    console.log('2초 후 실행됩니다.');
}, 2000);

// 1초마다 반복 실행
const intervalId = setInterval(() => {
    console.log('1초마다 실행됩니다.');
}, 1000);

// 반복 중단
setTimeout(() => {
    clearInterval(intervalId);
    console.log('반복이 중단되었습니다.');
}, 5000);

 

• setTimeout(): 지정한 시간 후에 한 번만 실행된다.

• setInterval(): 지정한 시간 간격마다 반복 실행된다.

• clearTimeout()과 clearInterval()을 사용해 중단할 수 있다.

 

 

 

---

Web API 사용 시 주의사항

1. 브라우저 호환성

• 일부 Web API는 모든 브라우저에서 지원되지 않을 수 있다.

• Can I use 사이트에서 호환성 확인이 필요하다.

2. 보안 및 개인정보 보호

• Geolocation, Notification 같은 API는 사용자 동의가 필요하다.

• HTTPS 환경에서만 동작하는 API도 있다.

3. 성능 및 최적화

• DOM 조작이 과도하면 성능 저하가 발생할 수 있다.

• 애니메이션이나 그래픽 작업 시에는 Canvas API나 WebGL을 사용하는 것이 효율적이다.