본문 바로가기

전체 글

(194)
Array.prototype.at()에 관한 MDN 문서 Array.prototype.at() - JavaScript | MDN at() 메서드는 정수 값을 받아, 배열에서 해당 값에 해당하는 인덱스의 요소를 반환합니다. 양수와 음수 모두 지정할 수 있고, 음수 값의 경우 배열의 뒤에서부터 인덱스를 셉니다. developer.mozilla.org at 메서드는 정수 값을 받아, 배열에서 해당 값에 해당하는 인덱스의 요소를 반환한다. 양수와 음수 모두 지정할 수 있고, 음수 값의 경우 배열의 뒤에서부터 인덱스를 센다. at() 메서드의 존재가 대괄호 표기법을 부정하는 것은 아니다. 예를 들어 array[0]은 문제 없이 배열의 첫 요소를 반환한다. 그러나 맨 마지막 요소를 가져오고 싶을 때 length 속성을 사용해 array[array.length - 1]을 ..
Why React isn't dying 원문: https://tkdodo.eu/blog/why-react-isnt-dying Why React isn't dying Finishing my train of thought about why React is here to stay (for now). tkdodo.eu 지난 목요일, 저는 React 생태계 현황 패널 토론에 참여했는데, 주로 한 가지 질문에 대해서 이야기했습니다: "React는 죽어가고 있는가?" StreamYard 중단으로 인해 생각을 마무리할 수 없었기 때문에 블로그 포스팅을 통해 후속 조치를 취해야겠다고 생각했습니다. 그렇다면 왜 React가 죽어가고 있을까요? Twitter bubble 트위터를 중심으로 React가 죽어가고 있고 다른 라이브러리가 React보다 낫다거나, 지금..
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..
주요 노드 프로퍼티 주요 노드 프로퍼티 ko.javascript.info DOM 노드 클래스 DOM 노드는 종류에 따라 각각 다른 프로퍼티를 지원합니다. 태그 에 대응하는 요소 노드엔 링크 관련된 프로퍼티를, 에 대응하는 요소 노드엔 입력 관련 프로퍼티를 제공하죠. 텍스트 노드는 요소 노드와 다른 프로퍼티를 지원합니다. 그런데 모든 DOM 노드는 공통 조상으로부터 만들어지기 때문에 노드 종류는 다르지만, 모든 DOM 노드는 공통된 프로퍼티와 메서드를 지원합니다. DOM 노드는 종류에 따라 대응하는 내장 클래스가 다릅니다. 계층 구조 꼭대기엔 EventTarget이 있는데, Node는 EventTarget을, 다른 DOM 노드들은 Node 클래스를 상속 받습니다. 각 클래스는 다음과 같은 특징을 지닙니다. - EventTar..
함수 바인딩 https://ko.javascript.info/bind 함수 바인딩 ko.javascript.info setTimeout에 메서드를 전달할 때처럼, 객체 메서드를 콜백으로 전달할 때 'this 정보가 사라지는' 문제가 생깁니다. 이번 챕터에서는 이 문제를 어떻게 해결할지에 대해 알아보겠습니다. 사라진 'this' 앞서 다양한 예제를 통해 this 정보가 사라지는 문제를 경험해보았습니다. 객체 메서드가 객체 내부가 아닌 다른 곳에 전달되어 호출되면 this가 사라집니다. setTimeout을 사용한 아래 예시에서 this가 어떻게 사라지는지 살펴봅시다. let user = { firstName: "John", sayHi() { alert(`Hello, ${this.firstName}!`); } }; se..
call/apply와 데코레이터, 포워딩 https://ko.javascript.info/call-apply-decorators call/apply와 데코레이터, 포워딩 ko.javascript.info 자바스크립트는 함수를 다룰 때 탁월한 유연성을 제공합니다. 함수는 이곳 저곳 전달될 수 있고, 객체로도 사용될 수 있습니다. 함수간의 호출을 어떻게 포워딩(forwarding)하는지, 함수를 어떻게 데코레이팅(decorating)하는지에 대해 알아봅니다. 코드 변경 없이 캐싱 기능 추가하기 CPU를 많이 잡아먹지만 결과는 안정적인 함수 slow(x)가 있다고 가정해봅시다. 결과가 안정적이라는 말은 x가 같으면 호출 결과도 같다는 것을 의미합니다. slow(x)가 자주 호출된다면, 결과를 어딘가에 저장(캐싱)해 재연산에 걸리는 시간을 줄이고 싶을..

728x90