자바스크립트 (26) 썸네일형 리스트형 ClipBoard API 제대로 사용하기 타 팀과 업무를 수행할 때 iframe으로 연동되어 있는 부분에 대한 시스템 내용을 클립보드로 복사해야 하는 업무가 생겼다. 브릿징 작업을 통해 listener 메시지로 내용에 대한 값을 받아 왔는데 포맷이 일반 텍스트와 HTML 텍스트 두 가지로 내려주신 것이었다. 기존 구현되어져 있는 부분은 text로도 삽입이 가능하지만 가끔 텍스트에 같이 들어오는 "\n", "\w"와 같은 이스케이프 문자열들이 그대로 삽입이 되기 때문에 html로 직접 애플리케이션에 삽입하는 것이 편했다. 그러나 "복사한 값을 우리의 애플리케이션에서 사용하지 않고 다른 곳에서 쓴다면?" 이라는 의문점이 들기 시작했고, 이 부분 말고도 놓치는 부분이 있을까 싶어서 연동해 주신 담당자분께 문의를 드렸다. ........??...??... [모던자바스크립트 Deep Dive] 24. 클로저 "A closure is the combination of a function and the lexical environment whithin which that function was declared." 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. const x = 1; function outerFunc() { const x = 10; function innerFunc() { console.log(x); // 10 } innerFunc(); } outerFunc(); outerFunc 함수 내부에서 중첩 함수 innerFunc가 정의되고 호출되었다. innerFunc의 상위스코프는 외부함수 outerFunc의 스코프이므로 innerFunc 내부에서 outerFunc의 x 변수에 접근할 .. [모던자바스크립트 Deep Dive] 23. 실행 컨텍스트 1. 소스코드의 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분하고 이 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. 소스코드의 타입 설명 전역 코드(global code) 전역에 존재하는 소스코드. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않음 함수 코드(functional code) 함수 내부에 존재하는 소스코드. 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않음 eval 코드(eval code) 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드 모듈 코드(module code) 모듈 내부에 존재하는 소스코드. 모듈 내부의 함수, 클래스 등의 내부 코드는 포함되지 않음 소스코드를 4가지 타입으로 구분하는 이유 : 소스코드의 타입에.. [모던자바스크립트 Deep Dive] 22. this 1. this 키워드 객체 : 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조 메서드는 자신이 속한 객체의 상태인 프로퍼티를 참조하고 변경할 수 있어야 한다. => 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 객체 리터럴 방식으로 생성한 객체의 경우 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다. const circle = { // 프로퍼티: 객체 고유의 상태 데이터 radius: 5, // 메서드: 상태 데이터를 참조하고 조작하는 동작 getDiameter() { // 이 메서드가 자신이 속한 객체의 프로퍼티나 다른 메서드를 참조하려면 // 자신이 속한 객체인 circle을 참조할 수 있어야 한다. return 2 *.. [모던자바스크립트 Deep Dive] 21. 빌트인 객체 1. 자바스크립트 객체의 분류 표준 빌트인 객체 - ECMAScript 사양에 정의된 객체 호스트 객체 - ECMAScript 사양에 정의되지는 않았지만 자바스크립트 실행 환경에서 추가로 제공하는 객체 사용자 정의 객체 - 기본 제공되는 객체가 아닌 사용자가 직접 정의한 객체 2. 표준 빌트인 객체 자바스크립트는 Obejct, String, Number, Boolean, Symbol, Date, Math, RegExp, Array, Map/Set, WeakMap/WeakSet, Function, Promise, Reflect, Proxy, JSON, Error 등 40여 개의 표준 빌트인 객체를 제공 Math, Reflect, JSON을 제외한 표준 빌트인 객체는 모두 인스턴스를 생성할 수 있는 생성자 .. [모던자바스크립트 Deep Dive] 20. strict mode 1. strict mode란? 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 더 엄격한 평가를 하는 ES5부터 추가된 모드이다. ESLint 같은 린트 도구를 사용해도 strict mode와 유사한 효과를 얻을 수 있다. 린트 도구가 사용자 정의 형태로 커스터마이징이 가능하기 때문에 더 추천하는 방식! 2. strict mode의 적용 strict mode를 적용하기 위해 전역의 선두 또는 함수 몸체의 선두에 'use strict';를 추가 전역에 선두에 추가하면 스크립트 전체에 적용 함수 몸체 선두에 추가하면 해당 함수와 중첩 함수에 적용 코드 선두에 'use strict'를 위치하지 않으면 동작하.. [모던자바스크립트 Deep Dive] 19. 프로토타입(3) 9. 프로토타입의 교체 프로토타입은 임의의 다른 객체로 변경 가능 부모 객체인 프로토타입을 동적으로 변경할 수 있다 위 두 특징으로 인해 객체 간의 상속 관계를 동적으로 변경할 수 있다. 1. 생성자 함수에 의한 프로토타입의 교체 const Person = (function () { function Person(name) { this.name = name; } // ① 생성자 함수의 prototype 프로퍼티를 통해 프로토타입을 교체 Person.prototype = { sayHello() { console.log(`Hi! My name is ${this.name}`); } }; return Person; }()); const me = new Person('Lee'); ①에서 Person.prototyp.. [모던자바스크립트 Deep Dive] 19. 프로토타입(2) 4. 리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입 명시적으로 new 연산자와 함께 생성자 함수를 호출하여 인스턴스를 생성하지 않는 객체 생성 방식도 있다. // 객체 리터럴 const obj = {}; // 함수 리터럴 const add = function (a, b) { return a + b; }; // 배열 리터럴 const arr = [1, 2, 3]; // 정규표현식 리터럴 const regexp = /is/ig; 리터럴 표기법에 의해 생성된 객체도 프로토타입이 존재 리터럴 표기법에 의해 생성된 객체의 경우 constructor 프로퍼티가 가리키는 생성자 함수가 반드시 객체를 생성한 생성자 함수라고 단정할 수는 없다.(ECMAScript 사양 참고) Object 생성자 함수 호출.. 이전 1 2 3 4 다음 목록 더보기
