🎨 Animation 이벤트https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_eventCSS 애니메이션이 시작, 종료, 반복될 때 발생하는 이벤트이다.animationstartanimationendanimationiteration// reactexport default function EventPage() { const animationStart = () => console.log('animation start'); const animationEnd = () => console.log('animation end'); const animationIteration = () => console.log('animation iter..
JavaScript
🚩 IntersectionObserverhttps://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API특정 요소가 뷰포트 또는 다른 특정 요소와 교차하는지를 비동기적으로 감지할 수 있게 해준다. 기존에는 scroll 이벤트를 통해 두 요소 사이의 가시성을 감지했지만, IntersectionObserver는 관찰 대상 요소가 뷰포트에 들어오거나 나갈 때만 콜백 함수를 실행한다. 이 과정은 비동기적으로 이루어지므로, 메인 스레드의 작업을 방해하지 않고 필요한 경우에만 콜백 함수를 실행한다. 옵션 설정const options = { root: document.querySelector("#scrollArea"), rootMargin: "0p..
🏃♀️ 자바스크립트는 싱글 스레드자바스크립트는 한 번에 하나의 작업만 처리할 수 있는 싱글 스레드이다. 이는 한 작업을 처리하는데 시간이 오래 걸린다면 프로그램이 멈추는 blocking이 발생할 수 있다. 하지만 네트워크 요청, 타이머 등 작업이 발생했을 때, 프로그램이 멈추지 않고 다른 작업들이 실행되는 것을 볼 수 있다. 이는 setTimeout, Promise 등 Web APIs 중 비동기 작업을 자바스크립트 엔진이 아닌 브라우저가 담당하여 처리하기 때문이다. 🔥 자바스크립트 런타임 과정Call Stack: 함수 호출 시 함수 실행 컨텍스트가 콜 스택에 푸시되고 순차적 실행 된다. 실행이 완료되면 콜 스택에서 제거된다.Web APIs: setTimeout, Promise 등 비동기 작업을 콜 ..
🎁 Map1. 키-값 쌍을 저장하며, 키는 오직 단 하나만 존재한다.2. 키 값은 모든 값(객체와 원시 값)을 키로 사용할 수 있다.3. 키와 값의 삽입 순서를 기억한다. Map 기본 사용법 // Map(1) {'a' => 1} const map1 = new Map(); map1.set('a', 1); // Map(2) {'a' => 1, 'b' => 2} const map2 = new Map([ ['a', 1], ['b', 2], ]); Map과 Object의 차이점 MapObejct키 타입모든 값(객체와 원시값)문자열 또는 심볼키 순서삽입 순서 기억삽입된 순서와 다를 수 있음이터러블OX 이터러블(iterable)순회 가능한 객체를 뜻하며, for..of, 스프레드 문법, 구조분..
🚩 join 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다. const arr = ['a', 'b', 'c']; console.log(arr.join()); // a,b,c console.log(arr.join('')); // abc console.log(arr.join('-')); // a-b-c 🚩 splice 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가합니다. 원본 배열의 내용을 변경합니다. ( *원본 배열을 변경하지 않으려면 .toSpliced() 사용 ) 반환값은 제거한 요소를 담은 배열 .slice(인덱스, 삭제할 개수, 추가할 아이템) const arr = ['a', 'b', 'c']; const result = arr.splice(1, 1); console.log(arr)..
🚩 Intl 문자열, 날짜 및 시간, 숫자 등 국제화 및 지역화 작업을 수행하는데 사용됩니다. 🚩 적용하기 // 첫 번째 인자 locales: 지역 // 두 번째 인자 option Intl.NumberFormat(locales, { notation: "compact", // 'compact' maximumFractionDigits: 1, // 소수 자리 표현 }).format(num); // 1.2천 console.log(Intl.NumberFormat('ko-KR', { notation: "compact", maximumFractionDigits: 1, }).format(1234)); // 1.2억 console.log( Intl.NumberFormat("ko-KR", { notation: "compa..
🚩 스코프 식별자가 유효한 범위 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙 🚩 스코프의 종류 전역 스코프 코드의 가장 바깥 영역 전역에 변수를 선언하면 전역 스코프를 갖는 전역 변수 → 어디서든지 참조할 수 있다. 지역 스코프 함수 몸체 내부 지역에 변수를 선언하면 지역 스코프를 갖는 지역 변수 → 자신의 지역 스코프와 하위 지역 스코프에서 유효하다. 🚩 함수 레벨 스코프 var 키워드로 선언된 변수는 오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정합니다. var i = 10; for (var i = 0; i < 5; i++) { console.log(i); // 0 1 2 3 4 } console.log(i) // 5 🚩 블록 레벨 스코프 let, const 키워드로 선언된 변수..
참고 영상 https://www.youtube.com/watch?v=toUlXhTZZ8w&t=19s&ab_channel=%ED%94%84%EB%A1%B1%ED%8A%B8 ⭕ 첫 번째 예제 if문 코드 function executePayment(paymentType) { if (paymentType === 'KAKAO_PAYMENT') { return '카카오 결제 처리'; } else if (paymentType === 'NAVER_PAYMENT') { return '네이버 결제 처리'; } else if (paymentType === 'COUPANG_PAYMENT') { return '쿠팡 결제 처리'; } else if (paymentType === 'PAYCO_PAYMENT') { return '페..
