웹(56)
-
this 정체
정의 this는 일반적으로 메서드를 호출한 객체가 저장되어 있는 속성 예제) 설명 메소드를 호출한 객체는 m1, 이때 method()가 실행되면 메서드 내부에서 자바스크립트 엔진에 의해 this 속성이 생성 this는 method를 호출한 m1 객체가 저장, 일반 객체의 메서드에서의 this는 메서드를 호출한 객체 하지만 this 속성은 메서드를 호출할 때뿐만 아니라 다양한 상황에서 만들어 짐. 다양한 상황에서 this가 만들어지는 경우 일반 함수에서의 this - window 객체 중첩 함수에서의 this - window 객체 이벤트에서의 this - 이벤트를 발생시킨 객체 메서드에서의 this - 메서드를 호출한 객체 메서드 내부에의 중첩 함수에서의 this - window 객체 1. 일반 함수에서의..
2020.03.05 -
DOM(Document Object Model)
DOM Document Object Model, 웹 화면에 보이는 요소를 조작하기 위한 기능으로 가득찬 라이브러리 덩어리. DOM은 정의 부분(명세서) 와 구현부분으로 구성 정의 부분(명세서) : 웹 페이지(또는 XML) 문서를 조작할 때 지켜야 할 약속(규칙, 규약)이 명시되어 있는 문서일 뿐 실제 동작하는 구현 소스코드는 존재하지 않는다. 이는 함수 이름만 있고 구현 코드가 없는 것과 같다. 웹 표준 관련 표준을 정의하는 W3C에서 명세서 제공 구현 부분 : 브라우저 내부에 존재. 브라우저(IE, Chrome, FireFox, Safari) 업체는 저마다의 기술력을 바탕으로 텅 빈 DOM 내부를 채워 실제 동작하는 DOM 기능을 구현. IDL(Interface Definition Language) D..
2020.03.05 -
콜스택과 메모리 힙
콜 스택(Call Stack)과 메모리 힙(Memory Heap) 메모리 힙(Memoery Heap) 정보를 저장하는 공간 Memory Allocation 이 발생하는 공간 객체는 대부분 구조화 되지 않은 메모리 영역인 힙 역역 내부에 할당 콜 스택(Call Stack) 실행 중인 코드를 트래킹하는 공간 자바스크립트 코드 실행을 위해 제공된 싱글 스레드 메모리 힙에서 작업 수행에 필요한 것을 찾아 수행하는 공간 Javascript Engine 내부 구조 콜 스택(Call Stack) 동작 과정 var value = "value1"; function printFunc() { var value = "value2"; function printValue() { return value; } console.log(..
2020.03.05 -
Javascript Runtime
Javascript Runtime 자바스크립트 런타임 구조 싱글 스레드 자사스크립트는 기본적으로 싱글 스레드 지원. 즉 Call Stack에 쌓여 있는 작업을 하나씩 수행. 싱글 스레드에서 동기적으로만 동작한다면 여러 문제가 발생 할 수 있음, 예를 들어 용량이 큰 데이터를 받아서 띄워주는 경우 시간이 오래 걸리거나 최악의 경우에는 웹 페이지를 띄우지 못하는 경우가 생길 수 있음. 이런 문제를 대비해서 자바스크립트는 싱글스레드에서도 비동기적인 프로그래밍이 가능하도록 Event Queue, Event Loop 같은 장치 지원. Web API 브라우저는 자바스크립트 엔진 뿐만 아니라 Web API도 함께 제공되는 자바스크립트 런타임을 내장. Web API를 통해 setTiemout, HTTP 요청 메소드, ..
2020.03.05 -
디자인 패턴 - 싱글톤(Singleton) 패턴
설명 싱글톤 패턴은 특정 클래스의 인스턴스를 오직 하나만 유지 동일한 클래스를 사용하여 새로운 객체를 생성하면, 두번째 부터는 처음 만들어진 객체를 얻게 된다. 자바스크립트에서 싱글톤 패턴 자바스크립트에는 클래스가 없고 오직 객체만 있다. 새로우 객체를 만들면 실제로는 이 객체는 다른 어떤 객체와도 같지 않기 때문에 이미 싱글톤이다. var obj = { myprop : 'my value' } var obj2 = { myprop : 'my value' } obj === obj2; // false obj == obj2; // false new 연산자를 사용한 싱글톤 패턴 구현 var uni = new Universe(); var uni2 = new Universe(); uni === uni2; // tru..
2020.03.02 -
코드 재사용 패턴(새로운 방식의 상속) - 프로퍼티 복사를 통한 상속 패턴
코드 재사용 패턴(새로운 방식의 상속) - 프로퍼티 복사를 통한 상속 패턴 function extend(parent, child) { var i; child = child || {}; for(i in parent) { if(parent.hasOwnProperty(i)){ child[i] = parent[i]; } } return child; } var parent = { name : "Parent" }; var kid = extend(parent); kid.name; // Parent 설명 부모의 멤버들에 대해 루프를 돌면서 자식에 복사 두번째 매개변수는 생략 가능 인자가 생략되면 상속을 통해 기존 객체의 기능이 확장되는 대신, 새로운 객체가 생성 및 반환 얕은 복사(shallow copy) ※ 깊은 복..
2020.03.02