일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- NavigationDuplicated
- css
- DOM
- Django
- 세션스토리지
- 뷰
- virtual dom
- 프론트엔드
- 장고
- VUE
- vue #vue.js #font #web-font
- cubic-bezier
- 세션
- 렌더링 최적화
- 로컬스토리지
- 자바스크립트 #javascript #렌더링 #렌더링순서
- vuetify
- vue-router
- 안드로이드
- 라우터
- Router
- frontend
- vue.js
- 예외처리
- Transition
- 성능 최적화
- webpack
- 주니어 개발자
- jest
- lazy loading
- Today
- Total
목록전체 글 (59)
한준호
ECMAScript 사양은 소스코드를 4가지로 구분하며 4가지 타입의 소스코드는 실행 컨텍스트를 생성하지만 과정과 관리 내용이 다르다. 전역 코드 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성(전역 실행 컨텍스트 생성) 함수 코드 지역 스코프를 생성하고 지역변수, 매개변수, arguments 객체를 관리 지역 스코프를 전역 스코프의 스코프 체인에 연결하기 위해 함수 실행 컨텍스트가 생성 eval 코드 strict mode에서 독자적인 스코프 생성(eval 실행 컨텍스트 생성) 모듈 코드 모듈별로 독립적인 모듈 스코프 생성(모듈 실행 컨텍스트 생성) ■ 소스코드의 평가와 실행 자바스크립트 엔진은 소스코드 평가 와 소스코드 실행 과정으로 나누어 처리한다. - 소스코드 평가 실행컨텍스트 생성...
◎ this는 자신이 속하나 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. // this는 어디서든지 참조 가능하다. // 전역에서 this는 전역 객체 window를 가리킨다. console.log(this); // window function square(number) { // 일반 함수 내부에서 this는 전역 객체 window를 가리킨다. console.log(this); // window return number * number; } square(2); const person = { name: 'Lee', getName() { // 메서드 내부에서 this는 메서드를 호출한 객..
자바스크립트 객체는 3개의 객체로 분류할 수 있다. 표준 빌트인 객체 ECMAScript에 정의된 객체. 별도의 선언 없이 전역 변수처럼 언제나 참조할 수 있다. Object, String, Number, Boolean, Symbol, Date, Math, RegExp, Array, Map/Set, WeakMap/WeakSet, Function, Promise, Reflect, Proxy, JSON, Error 등 호스트 객체 ECMAScript에 정의되지 않은 자바스크립트 실행환경(브라우저 / Node.js 환경)에서 추가 제공하는 객체 브라우저: DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web C..
function foo() { x = 10; } foo(); console.log(x); // ? foo 함수의 스코프에서 x 선언부를 검색한다 -> foo 함수 컨텍스트의 상위 스코프에서 x 선언부를 검색한다 -> 찾지 못한다. 참조 에러가 날 듯 싶지만 자바스크립트는 전역 객체에 프로퍼티를 생성한다(암묵적 전역) strict mode를 통해 이러한 실수를 엄격하게 잡아낼 수 있으며 ESLint도 동일한 역할을 한다. strict mode는 다음과 같이 사용한다. 'use strict'; function foo() { x = 10; // ReferenceError: x is not defined } foo(); strict mode는 다음과 같은 에러를 감지한다 암묵적 전역 변수, 함수, 매개변수의 삭..
■ 프로토타입의 교체 - 프로토타입은 동적으로 변경할 수 있다. => 상속 관계를 동적으로 변경할 수 있다. 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'); // 프로토타입을 교체하면 constructor 프로퍼티와 생성자 함수 간의 연결이 파괴..
자바스크립트는 명령형, 함수형, 프로토타입 기반, 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다. ■ 객체지향 프로그래밍 - 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 객체의 집합으로 프로그램을 표현하는 패러다임 - 추상화 다양한 속성 중에서 프로그램에 필요한 속성만 표현 - 객체의 상태와 동작을 하나의 논리 단위로 생각 ■ 상속 - 자바스크립트는 프로토타입 기반으로 상속을 구현하여 불필요한 중복을 제거 function Circle(radius) { this.radius = radius; this.getArea = function () { return Math.PI * this.radius ** 2; }; } const circle1 = new Circle(1); 이와 같이..
일급 객체 무명의 리터럴로 생성할 수 있다. 런타임에 생성이 가능하다. 변수나 자료구조(객체, 배열)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. // 1. 함수는 무명의 리터럴로 생성할 수 있다. // 2. 함수는 변수에 저장할 수 있다. // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const increase = function (num) { return ++num; }; const decrease = function (num) { return --num; }; // 2. 함수는 객체에 저장할 수 있다. const predicates = { increase, decrease }; // 3. 함수의 매개변수에게 전..
■생성자 함수 - new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. - 생성자 함수에 의해 생성된 객체를 인스턴스라 한다. // String 생성자 함수에 의한 String 객체 생성 const strObj = new String('Lee'); console.log(typeof strObj); // object console.log(strObj); // String {"Lee"} // Number 생성자 함수에 의한 Number 객체 생성 const numObj = new Number(123); console.log(typeof numObj); // object console.log(numObj); // Number {123} // Boolean 생성자 함수에 의한 Boolean ..
내부 슬롯과 내부 메서드에 대한 개념 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호([[...]])로 감싼 이름들이 내부 슬롯과 내부 메서드다. 원칙적으로 자바스크립트 내부 슬롯과 메서드엔 접근이 불가능하지만 일부는 가능하다. ■ 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다( 값, 값의 갱신 가능 여부, 열거 가능 여부, 재정의 가능 여부. 순서대로 value, writable, enumerable, configuarable) 프로퍼티 어트리뷰트 => [[Value]], [[Writable]], [[Enumerable]..
ES5까지 변수를 선언할 수 있는 방법은 var키워드가 유일했다. ■ var 키워드 1. 변수 중복 선언 허용 - 선언된 변수 값이 변경되는 부작용이 발생한다. var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다. var x = 100; // 초기화문이 없는 변수 선언문은 무시된다. var y; console.log(x); // 100 console.log(y); // 1 2. 함수 레벨 스코프 - 전역 변수를 남발할 가능성을 높이고 의도치 않게 전역 변수가 중복 선언되는 경우가 발생한다. var x = 1; if (true) { // x는 ..