JavaScript (34) 썸네일형 리스트형 [번역] useDefferedValue useDeferredValue – React The library for web and native user interfaces react.dev useDefferedValue는 UI의 일부 업데이트를 지연시킬 수 있는 React 훅이다. const deferredValue = useDeferredValue(value) 해당 값의 지연된 버전을 얻으려면 컴포넌트의 최상위 레벨에서 useDeferredValue를 호출한다. import { useState, useDeferredValue } from 'react'; function SearchPage() { const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query.. 커스텀 이벤트 디스패치 https://ko.javascript.info/dispatch-events 커스텀 이벤트 디스패치 ko.javascript.info 커스텀 이벤트는 그래픽 컴포넌트를 만들 때 사용됩니다. 자바스크립트 기반 메뉴가 있다고 가정해봅시다. 개발자는 메뉴의 루트 요소에 open(메뉴를 열었을 때 실행됨), select(항목을 선택했을 때 실행됨)같은 이벤트를 달아 상황에 맞게 이벤트가 실행되게 할 수 있습니다. 이렇게 루트 요소에 이벤트 핸들러를 달아놓으면 바깥 코드에서도 이벤트 리스닝을 통해 메뉴에서 어떤 일이 일어났는지를 파악할 수 있습니다. 자바스크립트를 사용하면 새로운 커스텀 이벤트 뿐만 아니라 목적에 따라 click, mousedown 같은 내장 이벤트를 직접 만들 수도 있습니다. 이렇게 만든 내장 .. Array.prototype.at()에 관한 MDN 문서 Array.prototype.at() - JavaScript | MDN at() 메서드는 정수 값을 받아, 배열에서 해당 값에 해당하는 인덱스의 요소를 반환합니다. 양수와 음수 모두 지정할 수 있고, 음수 값의 경우 배열의 뒤에서부터 인덱스를 셉니다. developer.mozilla.org at 메서드는 정수 값을 받아, 배열에서 해당 값에 해당하는 인덱스의 요소를 반환한다. 양수와 음수 모두 지정할 수 있고, 음수 값의 경우 배열의 뒤에서부터 인덱스를 센다. at() 메서드의 존재가 대괄호 표기법을 부정하는 것은 아니다. 예를 들어 array[0]은 문제 없이 배열의 첫 요소를 반환한다. 그러나 맨 마지막 요소를 가져오고 싶을 때 length 속성을 사용해 array[array.length - 1]을 .. TDZ를 모른 채 자바스크립트 변수를 사용하지 말라 원문: https://dmitripavlutin.com/javascript-variables-and-temporal-dead-zone/ Don't Use JavaScript Variables Without Knowing Temporal Dead Zone Temporal Dead Zone forbids the access of variables and classes before declaration in JavaScript. dmitripavlutin.com 아래 코드 스니펫에서 에러가 발생할까? 첫 번째 코드는 인스턴스를 생성한 다음 클래스를 선언한다. new Car('red'); // Does it work? class Car { constructor(color) { this.color = color;.. isNaN(), Number.isNaN()에 관한 MDN 문서 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN#description isNaN() - JavaScript | MDN The isNaN() function determines whether a value is NaN when converted to a number. Because coercion inside the isNaN() function can be surprising, you may alternatively want to use Number.isNaN(). developer.mozilla.org isNaN() isNaN() 함수는 어떤 값이 NaN인지 판별합니다. isNaN 함수 내부의 강.. 문서 수정하기 문서 수정하기 ko.javascript.info 요소 생성하기 DOM 노드를 만들 때 사용하는 메서드는 두 가지 입니다. document.createElement(tag) 태그 이름(tag)를 사용해 새로운 요소 노드를 만듦. let div = document.createElement('div) document.createTextNode(text): 주어진 텍스트를 사용해 새로운 텍스트 노드를 만듦 let textNode = document.createTextNode('안녕하세요.'); 개발을 할 땐 위 예시(메시지가 들어가는 div)처럼 주로 요소 노드를 만들게 됩니다. // 1. 요소 만들기 let div = document.createElement('div'); // 2. 만든 요소의 클래스를 'a.. call/apply와 데코레이터, 포워딩 https://ko.javascript.info/call-apply-decorators call/apply와 데코레이터, 포워딩 ko.javascript.info 자바스크립트는 함수를 다룰 때 탁월한 유연성을 제공합니다. 함수는 이곳 저곳 전달될 수 있고, 객체로도 사용될 수 있습니다. 함수간의 호출을 어떻게 포워딩(forwarding)하는지, 함수를 어떻게 데코레이팅(decorating)하는지에 대해 알아봅니다. 코드 변경 없이 캐싱 기능 추가하기 CPU를 많이 잡아먹지만 결과는 안정적인 함수 slow(x)가 있다고 가정해봅시다. 결과가 안정적이라는 말은 x가 같으면 호출 결과도 같다는 것을 의미합니다. slow(x)가 자주 호출된다면, 결과를 어딘가에 저장(캐싱)해 재연산에 걸리는 시간을 줄이고 싶을.. 오래된 var https://ko.javascript.info/var 오래된 var ko.javascript.info var message = "안녕하세요." alert(message) var는 초기 자바스크립트 구현 방식 때문에 let과 const로 선언한 변수와는 다른 방식으로 동작합니다. 근래엔 var를 쓰지 않아서 이를 만나는 건 흔치 않은 일이지만, var는 오래된 스크립트에서 당신을 기다리고 있는 괴물같은 존재입니다. var는 블록 스코프가 없습니다. var로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프입니다. 블록 기준으로 스코프가 생기지 않기 때문에 블록 밖에서 접근 가능합니다. if (true) { var test = true; // 'let' 대신 'var'를 사용했습니다. } alert(t.. 이전 1 2 3 4 5 다음
