자바스크립트 웹 API와 브라우저 내장 객체 - 타이머 함수 (setTimeout, setInterval), 로컬 저장소 (LocalStorage, SessionStorage), 쿠키 다루기, 웹 브라우저 이벤트 (scroll, resize, load 등)

12. 자바스크립트 웹 API와 브라우저 내장 객체

웹 API(Web Application Programming Interface)는 브라우저에서 제공하는 내장 객체 및 메서드를 통해 웹 애플리케이션을 구축할 수 있게 해줍니다. 이를 통해 자바스크립트는 웹 브라우저와 상호작용하여 타이머 설정, 로컬 저장소에 데이터 저장, 쿠키 관리, 브라우저 이벤트 처리 등의 작업을 할 수 있습니다. 이 장에서는 자바스크립트의 웹 API와 관련된 기능들을 다뤄보겠습니다.

12.1 타이머 함수 (setTimeout, setInterval)

자바스크립트는 비동기 작업을 위한 타이머 함수를 제공합니다. 이를 통해 일정 시간 후에 코드를 실행하거나, 주기적으로 작업을 반복할 수 있습니다. 두 가지 주요 타이머 함수로는 setTimeout()과 setInterval()이 있습니다.

12.1.1 setTimeout

setTimeout()은 일정 시간이 지난 후에 한 번만 함수를 실행하도록 예약합니다.

구문:

javascript
setTimeout(function, delay, arg1, arg2, ...)

• function: 일정 시간 후에 실행할 함수
• delay: 밀리초 단위로 설정된 지연 시간
• arg1, arg2, ...: 호출된 함수에 전달할 인수

예시: setTimeout 사용

javascript
setTimeout(() => {
  console.log("3초 후에 실행됩니다.");
}, 3000);  // 3초 후 실행

12.1.2 setInterval

setInterval()은 지정된 시간이 반복될 때마다 주기적으로 함수를 실행하도록 예약합니다.

구문:

javascript
setInterval(function, delay, arg1, arg2, ...)

예시: setInterval 사용

javascript
let count = 0;
const intervalId = setInterval(() => {
  console.log(`Interval: ${count}`);
  count++;

  if (count === 5) {
    clearInterval(intervalId);  // 5번 실행 후 중지
  }
}, 1000);  // 1초마다 실행

12.1.3 clearTimeout, clearInterval

타이머를 취소하려면 clearTimeout() 또는 clearInterval()을 사용하여 예약된 작업을 중지할 수 있습니다.

예시: clearTimeout 사용

javascript
const timeoutId = setTimeout(() => {
  console.log("This will not run.");
}, 5000);

clearTimeout(timeoutId);  // 타이머 취소

예시: clearInterval 사용

javascript
const intervalId = setInterval(() => {
  console.log("Running...");
}, 1000);

setTimeout(() => {
  clearInterval(intervalId);  // 5초 후 인터벌 중지
}, 5000);

12.2 로컬 저장소 (LocalStorage, SessionStorage)

웹 브라우저는 데이터를 클라이언트 측에 저장할 수 있는 로컬 저장소를 제공합니다. LocalStorage와 SessionStorage는 브라우저 내에서 데이터를 영구적 또는 세션별로 저장할 수 있는 두 가지 주요 방법입니다.

12.2.1 LocalStorage

LocalStorage는 브라우저에 영구적으로 데이터를 저장하며, 사용자가 브라우저를 닫고 다시 열더라도 데이터가 유지됩니다. key-value 쌍으로 데이터를 저장하며, 문자열 형태로 저장됩니다.

12.2.1.1 LocalStorage 사용 예시

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

// 데이터 가져오기
const username = localStorage.getItem('username');
console.log(username);  // Alice

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

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

12.2.2 SessionStorage

SessionStorage는 브라우저 세션 동안에만 데이터를 저장하며, 브라우저 창이나 탭을 닫으면 데이터가 사라집니다. 사용법은 LocalStorage와 동일하지만, 세션이 끝나면 데이터가 사라진다는 점에서 차이가 있습니다.

12.2.2.1 SessionStorage 사용 예시

javascript
// 데이터 저장
sessionStorage.setItem('sessionKey', 'SessionValue');

// 데이터 가져오기
const sessionValue = sessionStorage.getItem('sessionKey');
console.log(sessionValue);  // SessionValue

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

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

12.3 쿠키 다루기

쿠키(Cookie)는 작은 데이터를 사용자의 브라우저에 저장하는 방법 중 하나로, 서버 측에서 클라이언트의 상태를 유지하는 데 자주 사용됩니다. 쿠키는 주로 세션 유지, 사용자 인증, 개인 설정을 저장하는 데 사용됩니다.

12.3.1 쿠키 설정

쿠키는 자바스크립트를 통해 document.cookie를 사용하여 설정할 수 있습니다. 쿠키에는 이름, 값, 유효 기간, 경로 등의 속성이 포함될 수 있습니다.

12.3.1.1 쿠키 설정 예시

javascript
// 쿠키 설정
document.cookie = "username=Alice; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

위 코드는 username이라는 쿠키를 설정하고, 만료 날짜와 경로를 지정합니다.

12.3.2 쿠키 읽기

쿠키를 읽을 때는 document.cookie를 사용하여 쿠키 값을 가져올 수 있습니다. 이때 쿠키는 문자열로 반환되며, 각 쿠키는 세미콜론(;)으로 구분됩니다.

12.3.2.1 쿠키 읽기 예시

javascript
console.log(document.cookie);  // "username=Alice"

12.3.3 쿠키 삭제

쿠키를 삭제하려면 쿠키의 만료일을 과거로 설정해야 합니다. 이 방법을 통해 해당 쿠키를 삭제할 수 있습니다.

12.3.3.1 쿠키 삭제 예시

javascript
// 쿠키 삭제 (만료일을 과거로 설정)
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

12.4 웹 브라우저 이벤트 (scroll, resize, load 등)

자바스크립트는 웹 브라우저에서 발생하는 다양한 이벤트에 반응할 수 있도록 도와줍니다. 사용자가 페이지를 스크롤하거나 브라우저 창 크기를 조절할 때, 또는 페이지가 로드될 때 이벤트가 발생합니다.12.4.1 scroll 이벤트

scroll 이벤트는 사용자가 웹 페이지를 스크롤할 때 발생합니다. 이를 통해 스크롤 위치를 추적하거나 특정 조건에 따라 동작을 수행할 수 있습니다.

12.4.1.1 scroll 이벤트 예시

javascript
window.addEventListener('scroll', () => {
  console.log(`스크롤 위치: ${window.scrollY}`);
});

위 예제는 사용자가 페이지를 스크롤할 때 현재 스크롤 위치(scrollY)를 콘솔에 출력합니다.

12.4.2 resize 이벤트

resize 이벤트는 사용자가 브라우저 창의 크기를 변경할 때 발생합니다. 이를 통해 창 크기에 따라 동적으로 레이아웃을 변경할 수 있습니다.

12.4.2.1 resize 이벤트 예시

javascript
window.addEventListener('resize', () => {
  console.log(`창 크기: ${window.innerWidth} x ${window.innerHeight}`);
});

위 코드는 브라우저 창의 크기가 변경될 때, 현재 창의 너비(innerWidth)와 높이(innerHeight)를 출력합니다.

12.4.3 load 이벤트

load 이벤트는 웹 페이지나 자원이 모두 로드된 후에 발생합니다. 이 이벤트는 주로 이미지나 외부 스크립트가 완전히 로드된 후 실행할 작업을 지정하는 데 사용됩니다.

12.4.3.1 load 이벤트 예시

javascript
window.addEventListener('load', () => {
  console.log('페이지가 완전히 로드되었습니다.');
});

위 코드는 페이지가 완전히 로드된 후에 메시지를 출력합니다.

자바스크립트의 웹 API와 브라우저 내장 객체는 웹 애플리케이션에서 사용자와 상호작용하거나 브라우저의 상태를 제어할 수 있도록 다양한 기능을 제공합니다. 타이머 함수, 로컬 저장소, 쿠키, 웹 브라우저 이벤트 등은 사용자 경험을 개선하고, 데이터를 클라이언트 측에 저장하거나, 특정 이벤트가 발생했을 때 적절히 대응할 수 있게 해줍니다. 이러한 웹 API들을 잘 이해하고 활용하면, 더 효율적이고 동적인 웹 애플리케이션을 구축할 수 있습니다.