본문 바로가기

전체 글

 (214)
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)가 자주 호출된다면, 결과를 어딘가에 저장(캐싱)해 재연산에 걸리는 시간을 줄이고 싶을..
오래된 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..
프레임워크 없는 프론트엔드 개발 | 웹 컴포넌트 오늘날의 최신 브라우저에서 웹 컴포넌트(Web Component)라고 하는 네이티브 API를 사용해 웹 애플리케이션에서 컴포넌트를 작성할 수 있다. API 웹 컴포넌트는 세가지 중요 기술로 구성된다. 이 기술은 개발자가 재사용할 수 있는 UI 컴포넌트를 작성하고 게시할 수 있게 해준다. - HTML 템플릿: 태그는 콘텐츠가 렌더링되지는 않지만 자바스크립트 코드에서 동적인 콘텐츠를 생성하는데 '스탬프'로 사용되도록 하려는 경우에 유용하다. - 사용자 정의 요소: 이 API를 통해 개발자는 완전한 기능을 갖춘 자신만의 DOM 요소를 작성할 수 있다. - 새도우(Shadow) DOM: 이 기술은 웹 컴포넌트가 컴포넌트 외부의 DOM에 영향을 받지 않아야 하는 경우에 유용하다. 다른 사람들과 공유할 수 있도록 ..
프레임워크 없는 프론트엔드 개발 | DOM 이벤트 관리 애플리케이션의 내용은 시간이 지남에 따라 변경된다. 이런 변경이 발생하게 만드는 것이 이벤트이다. 이벤트는 사용자에 의해 또는 시스템에 의해 생성됐는지 여부와 관계없이 DOM API에서 매우 중요한 부분이다. 실제 프로젝트에서 중요한 기능에 초점을 맞춰서 개발하고 새로운 요구가 생기면 이에 따라 아키텍처를 지속적으로 변경시키자. YAGNI 원칙 You aren't gonna need it: 정말 필요하다고 간주할 때까지 기능을 추가하지마라. YAGNI 원칙은 익스트림 프로그래밍 원칙 중 하나이다. YAGNI 원칙을 더 잘 설명하고자 XP의 창시자 중 한 명인 론 제프리스의 다음 인용문을 자주 사용한다. '당신이 필요하다고 예측할 때가 아니라 실제로 필요할 때 구현하라.' 이는 어떤 사례에서도 따를 만한 ..

티스토리툴바