DOM, 클릭 이벤트 및 Web API 작업

Source: Dev.to

API란 무엇이며, 웹 API는 무엇인가요?

이러한 유형의 API는 주로 두 가지 주요 카테고리로 나뉩니다: 브라우저 API와 서드‑파티 API.

• 브라우저 API는 브라우저에서 데이터를 노출합니다. 웹 개발자는 JavaScript를 사용해 이 데이터를 접근하고 조작할 수 있습니다.
• 또한 웹사이트 구조를 조작하고, 이벤트를 처리하며, 스토리지를 다루고, 네트워크와 통신하는 등 다양한 기능에 접근할 수 있게 해줍니다.

일반적으로 많이 사용되는 브라우저 API 예시:

• DOM API – HTML 요소, 스타일, 속성을 조작하는 데 사용됩니다. 웹 개발의 핵심 개념입니다.
• Storage API – 사용자의 디바이스에 데이터를 로컬로 저장합니다.

requestAnimationFrame() API란 무엇이며, 애니메이션 루프를 설정하는 데 어떻게 사용하나요?

requestAnimationFrame() 메서드를 사용하려면 호출하면서 콜백 함수를 전달합니다:

requestAnimationFrame(callback);

일반적인 애니메이션 루프는 애니메이션을 업데이트하고 다음 프레임을 요청하는 animate() 함수로 구성됩니다:

function animate() {
  // 애니메이션 업데이트 (예: 요소 이동, 스타일 변경 등)
  update();

  // 다음 프레임 요청
  requestAnimationFrame(animate);
}

update() 함수 안에 실제로 애니메이션하고자 하는 변경 사항을 넣습니다:

function update() {
  element.style.transform = `translateX(${position}px)`;
  position += 2;
}

animate 함수 바깥에서 requestAnimationFrame()을 호출해 애니메이션을 시작합니다:

requestAnimationFrame(animate);

Web Animations API란 무엇이며, CSS 애니메이션 속성과는 어떤 관계가 있나요?

사용 시점: 사용자 인터랙션(클릭, 스크롤) 에 반응하는 애니메이션이 필요하거나, 일시정지·역방향 등 동적 제어가 필요할 때.

Web Animations API (WAAPI)는 JavaScript에서 직접 애니메이션을 생성하고 제어할 수 있게 해줍니다. 핵심은 Animation 생성자이며, 그 안의 animate() 메서드가 키프레임과 옵션을 받아 애니메이션을 만듭니다.

기본 예시

const square = document.querySelector("#square");

const animation = square.animate(
  [
    { transform: "translateX(0px)" },
    { transform: "translateX(100px)" }
  ],
  {
    duration: 2000,          // 2초
    iterations: Infinity,    // 무한 반복
    direction: "alternate", // 앞뒤 반복
    easing: "ease-in-out"
  }
);

버튼으로 재생 제어하기

const square = document.querySelector("#square");
const playBtn = document.querySelector("#playBtn");
const pauseBtn = document.querySelector("#pauseBtn");

const animation = square.animate(
  [
    { transform: "translateX(0px)" },
    { transform: "translateX(200px)" }
  ],
  {
    duration: 5000,
    // iterations: Infinity,
    direction: "alternate",
    easing: "ease-in-out"
  }
);

// 애니메이션이 끝났을 때 로그 출력
animation.onfinish = () => {
  console.log("Animation finished!");
};

// 애니메이션 재생
playBtn.addEventListener("click", () => {
  animation.play();
  console.log("You start the animation");
});

// 애니메이션 일시정지
pauseBtn.addEventListener("click", () => {
  animation.pause();
  console.log("You pause the animation");
});

Canvas API란 무엇이며, 어떻게 작동하나요?

Canvas API는 JavaScript를 통해 직접 그래픽을 그릴 수 있게 해줍니다. HTML에 <canvas> 요소를 넣어 그리기 표면을 만들고 시작합니다.

Canvas 요소 추가하기

크기는 HTML에서 지정하거나 JavaScript로 설정할 수 있습니다. JavaScript로 크기를 지정하는 방법은 다음과 같습니다:

const canvas = document.getElementById("my-canvas");
canvas.width = 400;
canvas.height = 400;

그리기 컨텍스트 얻기

const canvas = document.getElementById("my-canvas");
const ctx = canvas.getContext("2d"); // 2‑D 렌더링 컨텍스트

채워진 사각형 그리기

const canvas = document.getElementById("my-canvas");
const ctx = canvas.getContext("2d");

// 채우기 색상 설정
ctx.fillStyle = "crimson";

// 사각형 그리기 (x, y, 너비, 높이)
ctx.fillRect(1, 1, 150, 100);

텍스트 그리기

const textCanvas = document.getElementById("my-text-canvas");
const textCtx = textCanvas.getContext("2d");

// 폰트 설정
textCtx.font = "30px Arial";
textCtx.fillStyle = "crimson";

// 텍스트 그리기
textCtx.fillText("Hello HTML Canvas!", 1, 50);

결과는 페이지에 Hello HTML Canvas! 라는 빨간색 텍스트가 표시됩니다.

Canvas API는 requestAnimationFrame()과 결합해 맞춤형 애니메이션, 시각화, 게임 등을 만들 수 있습니다.

JavaScript로 Dialog 요소를 열고 닫는 방법은?

Dialogs는 중요한 정보나 … (내용이 잘렸음)