I'm sw engineer!

[js] cancelAnimationFrame()

✅ cancelAnimationFrame()으로 취소하는 방법📌 기본 사용법js const id = requestAnimationFrame(myCallback);// 필요 시 취소cancelAnimationFrame(id); 🧪 예시: 클릭하면 애니메이션 중단jslet animationId;function animate(timestamp) { // 애니메이션 처리 console.log("Animating..."); animationId = requestAnimationFrame(animate);}// 시작animationId = requestAnimationFrame(animate);// 3초 뒤 중단setTimeout(() => { cancelAnimationFrame(animationId)..

[js] requestAnimationFrame()의 내부 동작 원리

✅ requestAnimationFrame()의 내부 동작 원리📌 동작 순서JavaScript가 requestAnimationFrame(callback)을 호출하면,브라우저는 다음 프레임을 렌더링하기 직전(callback을 큐에 넣기 전) 타이밍에,callback을 실행합니다.브라우저는 보통 1초에 60번 화면을 그리므로(60fps), 대략 16.67ms마다 한 번씩 callback이 실행됩니다.브라우저의 렌더링 루프와 동기화되어 DOM 변화나 애니메이션을 가장 자연스럽고 효율적으로 처리할 수 있게 합니다.🧠 언제 실행되는가?화면이 활성 상태일 때만 실행됨→ 탭이 비활성화되면 일시 중지됨 → CPU 낭비 X프레임 스케줄에 따라 자동으로 실행 타이밍이 조절됨 → setTimeout보다 정확한 타이밍🧪..

[js] requestAnimationFrame()

requestAnimationFrame()은 브라우저가 다음 화면을 그리기 직전에 실행할 콜백을 예약하는 함수입니다.주로 애니메이션 처리나 렌더링 타이밍을 정확하게 맞추고 싶을 때 사용합니다. ✅ 기본 사용법js requestAnimationFrame(() => { // 브라우저가 다음 repaint 전에 실행할 코드 // DOM이 렌더링된 이후에 안전하게 실행됨});🧠 개념 요약항목설명실행 시점브라우저가 다음 프레임을 그리기 직전호출 빈도일반적으로 초당 60회 (60fps)주 목적부드러운 애니메이션 / 렌더링 이후 DOM 조작이점setTimeout보다 부드럽고 효율적이며, 렌더링 타이밍 보장 🎯 언제 사용하나?DOM 변경 직후 후속 처리예: innerHTML 또는 .append() 후 특정 요소..

requestAnimationFrame()은 브라우저가 다음 화면을 그리기 직전에 실행할 콜백을 예약하는 함수입니다.주로 애니메이션 처리나 렌더링 타이밍을 정확하게 맞추고 싶을 때 사용합니다. ✅ 기본 사용법js requestAnimationFrame(() => { // 브라우저가 다음 repaint 전에 실행할 코드 // DOM이 렌더링된 이후에 안전하게 실행됨});🧠 개념 요약항목설명실행 시점브라우저가 다음 프레임을 그리기 직전호출 빈도일반적으로 초당 60회 (60fps)주 목적부드러운 애니메이션 / 렌더링 이후 DOM 조작이점setTimeout보다 부드럽고 효율적이며, 렌더링 타이밍 보장 🎯 언제 사용하나?DOM 변경 직후 후속 처리예: innerHTML 또는 .append() 후 특정 요소..

✅ React.useState란?useState는 React 함수형 컴포넌트에서 상태 값을 선언하고 제어할 수 있게 해주는 함수입니다.📦 기본 문법const [state, setState] = React.useState(초기값);구성 :항목설명state현재 상태 값setState상태를 업데이트하는 함수초기값state의 초기값 (숫자, 문자열, 배열, 객체 등 가능) 🧪 예제import React from 'react';function Counter() { const [count, setCount] = React.useState(0); // 초기값 0 return ( 현재 카운트: {count} setCount(count + 1)}>+1 );}결과:초기 상태 co..

const [a = 1, b = 2] = [10];console.log(a); // 10console.log(b); // 2const { score = 100 } = {};console.log(score); // 100

const user = { name: "Alice", age: 25 };const { name, age } = user;console.log(name); // "Alice"console.log(age); // 25객체는 키 이름 기준으로 할당됩니다.변수 이름을 바꾸고 싶을 땐 이렇게 씁니다:const { name: userName } = user;console.log(userName); // "Alice"

const arr = [10, 20, 30];const [a, b, c] = arr;console.log(a); // 10console.log(b); // 20console.log(c); // 30 배열의 순서에 따라 변수에 값이 할당됩니다.필요 없는 값은 생략할 수도 있어요:const [x, , z] = [1, 2, 3];console.log(x, z); // 1 3

React.createElementReact의 핵심 함수로, 새로운 React 엘리먼트를 생성하고 반환합니다.JSX는 이 함수로 컴파일됩니다.대부분의 개발자는 JSX()를 사용하지만 ,동적 컴포넌트 생성이나 JSX를 사용하지 않을 때 유용하게 Hello사용할 수 있습니다 .React.createElement( type, [props], [...children])type: 문자열(예: 'div') 또는 React 구성 요소.props: 요소에 설정할 속성을 포함하는 객체입니다.children: 자식은 문자열, React 요소 또는 이들의 배열일 수 있으며, 개수에 제한이 없습니다.예 1: 기본 사용법jsxconst element = Hello, world!;다음과 동일합니다 React.createEl..

React와 ReactDOM은 React 생태계의 핵심 라이브러리 두 가지입니다.이 둘은 목적이 다르며, 함께 사용되지만 역할이 명확히 나뉘어 있습니다.🔹 React✅ 역할React는 컴포넌트를 만들고 구성하는 역할을 합니다.즉, UI를 정의하고 로직을 구성하는 도구입니다.✅ 주요 기능React.createElement(): React 엘리먼트 생성useState, useEffect 등 훅 제공JSX 문법을 해석할 기반 제공컴포넌트 클래스, 함수형 컴포넌트 등 정의✅ 예시jsximport React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return setCount(count + 1..