[JavaScript 문법] 42일차: 브라우저 API

브라우저 API란?

브라우저 API는 웹 브라우저에서 제공하는 다양한 기능에 접근할 수 있는 JavaScript 인터페이스를 의미합니다. 이를 통해 웹 애플리케이션에서 브라우저의 내장 기능을 활용할 수 있습니다. 주요 브라우저 API로는 스토리지 API, 위치 정보 API, 히스토리 API 등이 있습니다.

브라우저 스토리지

브라우저 스토리지는 웹 애플리케이션에서 클라이언트 측에 데이터를 저장할 수 있는 기능을 제공합니다. 대표적인 스토리지 API로는 localStorage와 sessionStorage가 있습니다.

localStorage

localStorage는 브라우저가 닫혀도 데이터가 유지되는 영구 저장소입니다.

예제: localStorage 사용

// 데이터 저장
localStorage.setItem('username', 'JohnDoe');

// 데이터 조회
let username = localStorage.getItem('username');
console.log(username); // 'JohnDoe'

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

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

sessionStorage

sessionStorage는 브라우저 세션 동안만 데이터를 저장하며, 브라우저 탭이나 창을 닫으면 데이터가 삭제됩니다.

예제: sessionStorage 사용

// 데이터 저장
sessionStorage.setItem('sessionId', '123456');

// 데이터 조회
let sessionId = sessionStorage.getItem('sessionId');
console.log(sessionId); // '123456'

// 데이터 삭제
sessionStorage.removeItem('sessionId');

// 모든 데이터 삭제
sessionStorage.clear();

위치 정보 API

위치 정보 API(Geolocation API)는 사용자의 위치 정보를 가져올 수 있는 기능을 제공합니다. 이를 통해 웹 애플리케이션에서 위치 기반 서비스를 구현할 수 있습니다.

예제: 위치 정보 가져오기

<button id="getLocationButton">Get Location</button>
<p id="location"></p>

<script>
  let button = document.getElementById('getLocationButton');
  let locationElement = document.getElementById('location');

  button.addEventListener('click', () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
      locationElement.textContent = 'Geolocation is not supported by this browser.';
    }
  });

  function showPosition(position) {
    locationElement.textContent = `Latitude: ${position.coords.latitude}, Longitude: ${position.coords.longitude}`;
  }

  function showError(error) {
    switch(error.code) {
      case error.PERMISSION_DENIED:
        locationElement.textContent = 'User denied the request for Geolocation.';
        break;
      case error.POSITION_UNAVAILABLE:
        locationElement.textContent = 'Location information is unavailable.';
        break;
      case error.TIMEOUT:
        locationElement.textContent = 'The request to get user location timed out.';
        break;
      case error.UNKNOWN_ERROR:
        locationElement.textContent = 'An unknown error occurred.';
        break;
    }
  }
</script>

히스토리 API

히스토리 API는 브라우저의 세션 기록을 조작할 수 있는 기능을 제공합니다. 이를 통해 사용자가 페이지 간 탐색할 때 브라우저의 뒤로 가기, 앞으로 가기 기능을 제어할 수 있습니다.

예제: 히스토리 API 사용

<button id="backButton">Back</button>
<button id="forwardButton">Forward</button>
<button id="newStateButton">New State</button>

<script>
  let backButton = document.getElementById('backButton');
  let forwardButton = document.getElementById('forwardButton');
  let newStateButton = document.getElementById('newStateButton');

  backButton.addEventListener('click', () => {
    history.back();
  });

  forwardButton.addEventListener('click', () => {
    history.forward();
  });

  newStateButton.addEventListener('click', () => {
    history.pushState({ page: 'new' }, 'New Page', '?new');
    console.log('New state pushed');
  });

  window.addEventListener('popstate', (event) => {
    console.log('Location: ' + document.location + ', State: ' + JSON.stringify(event.state));
  });
</script>

결론

브라우저 API는 웹 애플리케이션에서 브라우저의 다양한 기능을 활용할 수 있는 강력한 도구입니다. 이번 글에서는 브라우저 스토리지, 위치 정보 API, 히스토리 API의 기본 개념과 사용 방법에 대해 배웠습니다. 다음 글에서는 React 기초에 대해 알아보겠습니다.

다음 글에서 만나요!