📌 Exclude유니언 타입에서 특정 타입을 제거할 때 사용하는 유틸리티 타입.유니언 타입은 여러 타입 중 하나가 될 수 있는 값을 의미한다.type Fruit = 'apple' | 'banana' | 'orange'type MyFruit = Exclude // 'apple' | 'banana'MyFruit는 orange를 제외한 apple과 banana를 타입으로 가집니다. 📌 Omit객체 타입에서 특정 속성을 제거한 새로운 타입을 생성하는 유틸리티 타입.type Person = { name: string; age: number; email: string;};type PersonName = Omit; // { name: string }PersonName은 age, email 속성이 제거된 { ..
Language
// theme.tsexport const theme = { colors: { blueGrey: colors.blueGrey, red: colors.red, },};// colors.tsexport const colors = { blueGrey: { 50: '#F9FAFB', 100: '#EBEEF2', 200: '#CED5DF', 300: '#B2BECC', 400: '#95A7BA', 500: '#788DA3', 600: '#627384', 700: '#53616F', 800: '#434D58', 900: '#323941', }, red: { 300: '#FFA59B', 600: '#D62D36', 700: '#..
🎨 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..
🚩 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..
