반응형 JavaScript33 45장 프로미스 해당 단원은 예제 기반으로 실행하고 공부하는게 좋아서 따로 글을 작성하지 않았습니다. 대신 관련 내용을 첨부했습니다. 비동기 함수와 이벤트 핸들러 설명을 위한 그림 45-10, 11 프로미스 생성 45-12 fulfilled된 프로미스 45-13 rejected된 프로미스 const fulfilled = new Promise((resolve, reject) => { setTimeout(() => { if (Math.random() > 0.5) resolve(1); else reject(2); }, 3000); }).then(res => console.log(res)) .catch(err => console.log(err)) const prom = (val) => new Promise((resolve, r.. 2022. 12. 4. 43장 Ajax 브라우저에서 웹페이지 요청을 하거나 링크를 클릭하면 화면 갱신이 발생하는데, 이는 브라우저와 서버와의 통신에 의한 것이다. 이 과정에서 비동기적 데이터 교환 통신 방식인 Ajax를 사용할 수 있다. Ajax (Asynchronous JavaScript and XML) - 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터 요청을 하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. - 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. - XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. - XMLHttpRequest는 1999년 마이크로소프트가 개발했고, 구글이 구글 맵스.. 2022. 11. 27. 37장 Set과 Map * 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. * Set 정의 : Set 객체는 중복되지 않는 유일한 값들의 집합을 말한다. 특징 - 동일한 값을 중복하여 포함할 수 없다. - 요소 순서에는 의미가 없다. - 인덱스로 요소에 접근할 수 없다. - 수학적 집합을 구현하기 위한 자료구조다. (교집합, 합집합, 차집합, 여집합) 1. Set 객체 생성 const set = new Set(); 참고로 이터러블을 인수로 전달받아서 객체를 생성해야 한다. 이터러블 안에 있는 중복된 값은 요소로 저장되지 않는다. const set1 = new Set([1, 2, 3, 3]); console.log(set1); // Set(3) {1, 2, 3} 2. 요소 개수 확인 Set 객체의 요소.. 2022. 11. 20. 35장 스프레드 문법 * 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. * 스프레드 문법? - ES6에서 도입된 전개 문법 ... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. - 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션, arguments와 같이 for.. of 문으로 순회할 수 있는 이터러블에 한정된다. - 스프레드 문법의 결과값은 변수에 할당할 수 없다. 왜냐하면 스프레드 문법의 결과값이 값이 아니라 값들의 목록이기 때문이다. 스프레드 문법의 결과물을 사용하는 경우 1. 함수 호출문의 인수 목록에서 사용되는 경우 Math.max 메서드를 사용할 때 숫자만 인수로 넘겨줄 수 있다. 만약 배열 요소를 m.. 2022. 11. 14. 31장 RegExp * 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. * 정규 표현식이란? - 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어 - 자바스크립트의 고유 문법은아니며, 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다. - 자바스크립트는 펄의 정규 표현식 문법을 ES3부터 도입했음 - 문자열을 대상으로 패턴 매칭 기능을 제공하며, 패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다. - 반복문과 조건문 없이 패턴을 정의하고 테스트하는 것으로 간단히 입력받은 문자열을 체크할 수 있다. - 주석이나 공백을 허용하지 않고 여러가지 기호를 혼합하여 사용해서 가독성이 좋지 않음 정규 표현식을 사용하기 위해서는 1. .. 2022. 11. 6. 25장 클래스 * 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. * 자바스크립트는 프로토타입 기반 객체지향 언어다. 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 언어다. ES5에서는 클래스 없이도 생성자 함수와 프로토타입을 통해 상속을 구현할 수 있다. // ES5 생성자 함수 var Person = (function() { // 생성자 함수 function Person(name) { this.name = name; } // 프로토타입 메서드 Person.prototype.sayHi = function() { console.log('Hi! My name is ' + this.name); }; // 생성자 함수 반환 return Person; }()); // 인스턴스 생성 v.. 2022. 11. 1. 20장 strict mode * 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. * 암묵적 전역(implicit global)이란? 먼저 예제코드를 살펴보자. function foo() { x = 10; } foo(); console.log(x); x라는 변수를 함수 내 그리고 전역에도 선언하지 않은 상태에서 코드를 실행한다. 먼저 자바스크립트 엔진은 함수 내부에서 선언된 x가 있는지 확인을 하고 없다면 전역에 걸쳐 변수 선언을 확인할 것이다. 위에 작성한 코드에서는 전역에도 변수를 선언하지 않았지만, 자바스크립트는 암묵적으로 x라는 변수를 동적으로 생성한다. 이러한 현상을 암묵적 전역이라고 한다. 이런 암묵적 전역은 개발자도 모르게 오류를 발생시킬 수 있으므로 반드시 변수 키워드(var, let, con.. 2022. 10. 26. 16장 프로퍼티 어트리뷰트 * 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. * 내부 슬롯과 내부 메서드 - 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 사용하는 것 - ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수는 없음 - 단, 일부 내부 슬롯과 내부 메서드는 접근 가능함 // 모든 객체는 [[Prototype]] 이라는 내부 슬롯을 가짐 const a = {}; o.__proto__ // Object.prototype 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 프로퍼티의 상태는 프로퍼티의 값, 값의 갱신 가능 여부, 열거 가능 여부, 재정의 가능 여부를 .. 2022. 10. 17. 13장 스코프 * 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. * 스코프 - 유효범위, 자바스크립트에서 크게 예시로 드는 것은 var와 let, const 차이 - 모든 식별자(변수, 함수, 클래스 이름 등) 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위를 말한다. - 식별자가 유효한 범위 var 와 let의 비교 코드 // var 예시 function foo() { var x = 1; // 여기서 자바스크립트 엔진이 아래 코드를 var가 없는 x 재할당으로 인식하고 동작한다. var x = 2; console.log(x); // 2 } foo(); // let 예시 function bar() { let x = 1; // let, const 로는 같은 스.. 2022. 10. 12. 이전 1 2 3 4 다음 반응형
