requestIdleCallback브라우저의 유휴시간(idle)에 콜백을 실행할 수 있는 웹 API이다.브라우저가 주요 메인스레드의 작업을 끝낸 후 남은 시간에 우선순위가 낮은 작업을 실행 할 수 있다.requestIdleCallback은 이벤트루프의 모든큐(태스크 큐,마이크로태스크 큐) 동작이 끝나고 렌더링, requestAnimationFrame 콜백까지 모두 처리 후 유휴시간에 유휴 콜백큐에 등록된 콜백함수가 실행된다.requestIdleCallback의 실전 활용나는 이 함수를 통계 수집 API 요청시 사용했다.tanstack query를 사용중이라 일반적으로 useQuery를 사용해 api를 요청했었는데 페이지 진입시 불러오는 데이터 요청 API 보다 통계 수집 API가 먼저 요청되거나 중간에 ..

어댑터 패턴어댑터패턴(Adapter pattern)은 서로 호환되지 않는 인터페이스를 사용자가 기대하는 다른 인터페이스로 변환하는 패턴이다.어댑터 말 그대로 어댑터 역할을 해준다. 다른전압을 가진 나라를 가서 여행용 어댑터를 들고가는 것과 같다.// 아이폰 충전기class IphonCharger { chargeLightning(){ console.log('라이트닝 케이블로 아이폰 충전중'); return '아이폰 충전 완료' }}// 안드로이드 충전기class AndroidCharger { chargeUSBC(){ console.log('USBC 케이블로 안드로이드폰 충전중'); return '안드로이드폰 충전 완료' }}class Adapter { constructor{ thi..

자바스크립트 공부 초반에 이벤트루프 강의를 듣는데 몬소리인지 알아 듣지 못했다...ㅎㅎ 아 그래,,모 그렇게 돌아가는구나,,이정도만 알고 있다가 다시 개념정리를 위해 공부를 해봤다. 혹시나 나처럼 이벤트루프가 아직까지도 몬소리인지 모르겠다면 어느정도 비동기 실습을 해보고 공부해보길 추천한다. 자바스크립트는 싱글스레드 언어 이다. 싱글스레드란 한 번에 하나의 명령만 실행할 수 있는 스레드다. 한번에 하나의 동작만 처리하고 다른 동작이 완료될때까지 기다려야하는 것. 그.런.데 웹사이트 여기저기 돌아다녀도 자바스크립트가 싱글스레드라고?? 라고 믿기 힘들다 왜냐 한눈에 보기엔 한번에 여러 동작을 하고있으니까. 예를 들어 쇼핑몰 페이지만 들어가봐도 여러 상품의 데이터들을 불러오고 있다. 이것들을 가능하도록 해주게..

TodoItem컴포넌트 props item에 type을 정의해줬는데 Property 'item' does not exist on type 'ITodoItem'. 라고 error가 났다. 그니까 ITodoItem 인터페이스에 porps item에 대한 type이 존재하지 않는다 뭐 이런 오류인거 같은데.. 분명 타입 정의를 해줬는데 왜 안되지 하면서 별의별 시도를 해보다가 원인을 알게됨. TodoItem컴포넌트에서 props item이 빈객체로 인식되기 때문에 프로퍼티에 type이 없다~~~이렇게 에러를 내뿜는것.. List컴포넌트에서 TodoItem컴포넌트에 props를 넘겨줘야 객체 프로퍼티가 들어오기 때문에 빈객체인게 당연했다. interface ITodoItem { [key: string]: any..

자바스크립트에서 typeof는 변수의 유형을 알아볼때 주로 사용했었다. 하지만 typescript 안에서는 살~짝 다르게 쓰이는거 같아 알아보았다. let x = "hello world"; console.log(typeof x); 기본적으로 ts에서 js에서 변수의 유형이 뭔지 도출하는 기능은 같다. 추가적인 기능이 있는것! let s = "hello"; let n: typeof s; // n: string 공식문서의 예제로 살펴보겠다. 변수 n에 typeof를 사용하여 기존 변수 s의 type을 복사할 수 있다 자스랑 헷갈렷던게 타입을 복사한다는 개념이 헷갈렸었다..🥲 ts에선 새 변수에 기존변수의 타입을 typeof로 복사 가능하다는 거!! let x = 20; let y = "공작새"; type P..

자바스크립트에서 연산자를 활용하면 코드를 간결하게 바꿀 수 있다. if문으로 여러줄 되어 있는 코드를 한줄로 가능하다는 말씀! 잘 사용하지 않았던 연산자 위주로 포스팅 해보았다 1️⃣ 논리합 연산자 && 앞에 값이 true이면 뒤에 값을 실행. true && true // 앞에 값이 true 니까 뒤에꺼 true 실행 false && false // 앞에 값이 false 니까 false (뒤에 값 실행x) true && false // 앞에 값이 true니까 뒤에 값 false 실행 앞에 값이 true false 냐 에 따라 boolean 값을 반환 해준다. 논리합 연산자를 활용하여 예제를 활용해보자 클릭1 버튼을 클릭하면 p에 num값이 증가되는 코드를 간단하게 짜보았다. if문으로 클릭버튼에 text..