I'm sw engineer!

[js] requestAnimationFrame()

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

performance.getEntriesByType("navigation")

performance.getEntriesByType("navigation")는 페이지의 로딩 방식(예: 새로고침, 히스토리 탐색, 최초 로드 등) 을확인하기 위해 사용되는 Web Performance API의 메서드입니다.이를 통해 브라우저가 페이지를 어떤 방식으로 불러왔는지를 알 수 있습니다. 📌 문법javascriptconst entries = performance.getEntriesByType("navigation");반환값: PerformanceNavigationTiming 객체 배열 (보통 하나의 항목만 존재)이 객체에는 type, startTime, duration 등 다양한 로딩 관련 정보가 포함되어 있습니다.📘 주요 속성 (PerformanceNavigationTiming)javasc..

[js] requestAnimationFrame 함수

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

[DB][Oracle] 공백과 Null 모두 제외하기

SELECT *FROM employeesWHERE NVL(TRIM(department_id), '') '';설명:TRIM() : 앞뒤 공백 제거NVL(col, '') : col이 NULL이면 ''로 대체 '' : 빈 문자열 제외

원래 Windows나 일반 앱들에서는 Ctrl + Y가 '다시 실행(Redo)' 기능인데,**IntelliJ IDEA에서는 Ctrl + Y가 '줄 삭제(Delete Line)'**로 기본 설정되어 있어서 헷갈릴 수 있어요. IntelliJ 에서 Redo 단축키는 ctrl + shift + Z ✅ 해결 방법: 단축키 설정 변경하기Ctrl + Y를 다시 **Redo(다시 실행)**로 바꾸고 싶다면 아래 절차를 따라 설정하세요:🔧 Ctrl + Y를 Redo로 바꾸는 방법 (Windows 기준)File > Settings (또는 Ctrl + Alt + S)(macOS: IntelliJ IDEA > Preferences)왼쪽 메뉴에서Keymap 클릭검색창에 Redo 입력→ Main menu > Edit > Re..

✅ 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

✅ JSX란?JSX (JavaScript XML) 는 JavaScript 안에서 HTML처럼 보이는 문법입니다.주로 React에서 UI를 구성할 때 사용됩니다.📌 정의: JSX는 JavaScript에 XML/HTML 문법을 결합한 확장 문법(Syntax Extension)🧩 왜 JSX를 사용하는가?React는 UI를 컴포넌트 단위로 구성하는데, JSX는 컴포넌트의 구조를 보기 쉽게 표현해줍니다.예를 들어:jsxconst element = Hello, world!;위 코드는 보기엔 HTML 같지만 실제로는 JavaScript 코드입니다.Babel 같은 도구가 이 코드를 다음과 같이 변환합니다:jsconst element = React.createElement('h1', null, 'Hello, worl..