javascript

requestIdleCallback 알아보기 (브라우저가 idle할 때, 콜백함수를 대기열에 👍)

✨ 주의) requestIdleCallback는 아직 실험적인 기능인 것 같다.... 브라우저가 idle할 때 (메인 스레드가 사용자의 입력, 애니메이션 실행 등으로 한가 때) 콜백 함수를 실행할 수 있도록 해주는 함수가 requestIdleCallback 라고 한다. 브라우저가 여유가 있을 때, 콜백함수를 실행시켜서 여유 시간에 덜 중요한 작업을 효과적으로 처리할 수 있는 장점이 있다.메인 스레드 과부하를 줄이며, 여러 작업을 동시에 처리하여 사용자의 경험을 향상시킬 수 있다.var handle = window.requestIdleCallback(callback[, options]) mdn에서 소개하는 requestIdleCallback 함수는 이렇게 구성되는데, 아주아주 간단하게 실제로 실행할 수 있..

commander를 이용한 JS CLI 라이브러리 File Output 생성하기

종종 CLI 기능이 있는 라이브러리를 사용하면, 파일을 생성해주는 기능이 있는 경우를 종종 봤다. 이번에는 이를 어떻게 구현할 수 있을지 직접 만들어봤다. 작성한 colors-helper-tools 라이브러리의 cli 코드이다.빨간색으로 테두리친 부분이 CLI 코드에서 실제로 file output을 생성하는 부분이다.-f나 --file 옵션을 사용하면, 파일을 생성한다. 이때, 파일 이름은 중복이 일어나면 에러가 발생할 수 있다.때문에 현재 시간을 이용하여 파일을 만듦으로써 중복을 방지한다./** * * @param prefix file name prefix * @param extension file_name.extension * @returns file name String */const generat..

TypeScript에서 enum 사용하기: const enum vs as const 객체

TypeScript에서 열거형(enum)은 선호되지 않는다. 어째서일까? TypeScript에서 열거형의 데이터를 표현하는 방법은 여러 가지가 있지만, 최신 버전의 TypeScript에서는 as const 객체를 사용하는 것이 일반적이다. 다만, 다른 언어에서 많이 사용되는 enum 방식의 사용은 공식문서에서도 추천되지 않는데, 이번 글에서는 이 두 가지 방법의 차이와 각각의 장단점을 알아보고 어째서 enum이 추천되지 않는 방식인지 알아보았다. const enum과 일반 enum의 차이 🙌 enum을 표현하는데도 그냥 enum과 const enum이 존재하며 차이점이 있다. 일반 enum은 컴파일된 JavaScript 코드에서도 그대로 존재하며(번들링 사이즈 증가), reverse mapping을 지원..

Web animations API 사용하기 (animate)

웹 애니메이션을 별도의 라이브러리 설치 없이 사용할 수 있다. 내장된 Web api를 사용하여 간단한 애니메이션을 구현할 수 있다. HTML title lorem ippsum CSS .phrase { background: #ff99ff; text-align: center; padding: 10px; } Javascript const tag = document.querySelector('.phrase'); tag.addEventListener('click', () => { tag.animate( [ {transform: 'translateY(0px)'}, {transform: 'translateY(15px)'}, {transform: 'translateY(0px)'}, ], { duration: 1500,..

MutationObserver 사용하기 (DOM을 구독하여 알림 주기)

MutationObserver는 DOM 트리의 변경을 감지한다. 이를 사용하면 실시간으로 DOM의 변경을 감지하고, 처리할 수 있다. ⛄️ 예제 간단하게 댓글을 다는 HTML을 구현해보자. 그리고, 새로운 댓글이 추가될 때 마다 이를 MutationObserver로 감지해서 alert를 띄우는 예제를 구현해보기로 했다. 일단, 기본적으로 댓글을 추가하는 HTML과 자바스크립트를 작성해준다. Comment List add const inputDiv = document.getElementById("input_div"); const textInput = document.getElementsByClassName("text_input")[0]; const inputBtn = document.getElementsB..

URLSearchParams로 Url Query String 가져오기

바닐라 자바스크립트로 URL의 쿼리 스트링을 가져오는 방법을 알아보았다. React-Router-Dom이나 Next에서는 해당 기능에 대한 훅이 존재하지만, 바닐라 자바스크립트로도 간단히 이를 구현할 수 있다. 우선, window.location.search으로 URL에서 쿼리만 가져올 수 있다. console.log(window.location.search); // '?search=hihihi' 그리고 해당 String을 URLSearchParams의 인자로 전달하면, key-value의 형태로 값을 구조화할 수 있다. const searchParams = new URLSearchParams(window.location.search); for (const [key, value] of searchPara..

Drag Event에서 dataTransfer로 데이터 전달하기

Drag 이벤트에서는 dataTransfer라는 특수한 객체를 사용할 수 있는데, 이를 통해서 드래그 되었을 때 값을 저장하고 해당 값을 전달할 수 있게 해준다. 이를 사용해서 drag & drop으로 랜덤 숫자를 생성하는 예제를 만들어 보았다. Drag And Get Random Number Number : 위의 Drag And Get Random Number를 드래그할 수 있게 설정한다. 그리고 드래그하여 하단의 Number에 드랍하면, 랜덤 숫자를 화면에 띄울 수 있게 한다. .drag-div { padding: 10px; background-color: #ccc; width: fit-content; } .drop-div { margin-top: 50px; padding: 10px; backgrou..

unknown과 any 차이점 알아보기

unknown과 any 모두 유연하게 타입을 설정하기 위해서 사용된다. 🌧️ 다만, 타입 에러를 잡아내기 어렵기에 권장되지는 않는다. 다만, 이 둘의 차이점으로는 any가 더 유연하고 안전성이 낮은 반면, unknown은 타입 안정성을 유지하면서 유연함을 제공한다. unknown vs any 예제 // unknown 타입 let value1: unknown; value1 = 123; // 할당 가능 value1 = 'Hello'; // 할당 가능 // any 타입 let value2: any; value2 = 123; // 할당 가능 value2 = 'Hello'; // 할당 가능 기본적으로는 any와 unknown모두 다양한 타입을 할당할 수 있게 해준다. // unknown과 any의 차이 let n..