분류 전체보기

[33-js-concepts] 18. Object.create and Object.assign

Object.create의 배경 - 자바스크립트의 상속 - 자바스크립트만으로 웹페이지의 동작을 구현하기 시작하면서 객체지향의 개념이 집중되게 되었다. - new를 이용한 상속 (prototype) function Person() { this.name = "anonymous"; this.job = "none"; this.sayHello = function () { alert("Hello, my name is " + this.name); }; } function Unikys() { this.name = "Unikys"; this.job = "Programmer"; } Unikys.prototype = new Person(); var unikys = new Unikys(); unikys.sayHello(); ..

[33-js-concepts] 16. new, 생성자, instanced, 인스턴스 (new, Constructor, instanced and Instances)

new 연산자 ? 동작원리 새로운 빈 객체 생성 this 를 새로 만들어진 객체에 바인딩한다. 새로 만들어진 객체에 __proto__ 라 불리는 property 를 더한다.(이것은 contructor 함수의 prototype 객체를의미한다.) 생성된 객체가 반환된다. first 라는 새로운 객체 생성 this 는 first object 에 바인딩 되므로 this에 대한 모든 참조는 first 를 가리킨다. __proto__ 가 추가 first.__proto__ 는 Student.prototype 을 가리킨다. 생성자 ? 객체를 만드는 역할을 하는 함수 자바스크립트의 생성자 함수는 new 와 함께 사용 할수도, 일반적인 함수처럼 사용될 수 도 있다. Prototype ? 자바스크립트의 모든 객체들은 pro..

[33-js-concepts] 15. this, call, apply and bind

this : 함수나 메서드를 호출하는 주체 ( 함수의 실행영역) - call, apply, bind : 함수의 실행영역을 지정 함수의 호출 방식 1. 함수이름(); 2. 함수이름.call / apply / bind ( 인자) 1의 방식이 기본적인 방식이며 함수의 호출 형태에 따라 this 가 변화! (예시) var obj = { a: 2, foo: foo }; var bar = obj.foo; var a = "나는야 전역"; bar(); function doFoo(fn) { fn(); } var obj = { a: 2, foo: foo }; var a = "나는야 전역"; doFoo(obj.foo); 2의 방식은 전달받은 인자가 this로 지정! ** 차이점 (요약) [call, apply ] : 함수를..

[33-js-concepts] 14. 팩토리와 클래스 (Factories and Classes)

자바스크립트는 프로토타입 기반(prototype-based) 객체지향 언어다. 비록 다른 객체지향 언어들과의 차이점에 대한 논쟁이 있긴 하지만, 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있다. 프로토타입 기반 프로그래밍은 클래스가 필요없는(class-free) 객체지향 프로그래밍 스타일로 프로토타입 체인과 클로저 등으로 객체 지향 언어의 상속, 캡슐화(정보 은닉) 등의 개념을 구현할 수 있다. ES5에서는 생성자 함수와 프로토타입, 클로저를 사용하여 객체 지향 프로그래밍을 구현하였다. var Person = (function () { // Constructor function Person(name) { this._name = name; } // public method Person.prot..

[33-js-concepts] 13. DOM과 Layout Trees (DOM and Layout Trees)

Before DOM Introduction 웹 개발은 웹 브라우저와 밀접한 연관이 있습니다. 모든 서비스는 사실 웹 브라우저를 바탕으로 실행이 된다고 봐도 과언이 아닙니다. 이 브라우저와 관련된 객체 집합을 브라우저 객체 모델(Browser Object Model, BOM)이라고 하고, BOM을 이용해서 브라우저와 관련된 기능을 구성합니다. DOM은 이 BOM 중 하나입니다. DOM이란? DOM은 웹 브라우저로부터 HTML, XML을 표현하기 위한 인터페이스를 제공합니다. 이러한 인터페이스는 웹의 구조나 스타일을 조작할 수 있게 도와줍니다. 여기서 DOM은 문서 객체 모델(Document Object Model)의 약자입니다. 여기서 Model은 문서 객체를 '인식하는 방식' 을 의미합니다. DOM에 대..

[33-js-concepts] 12. 비트 연산자, 형식화 배열, 버퍼 (Bitwise Operators, Type Arrays and Array Buffers)

https://jsperf.com/or-vs-floor/2 자바스크립트에서 모든 숫자는 부동 소수점형 숫자형으로 취급된다. 자바스크립트에서 비트연산을 할때는 정수형으로 변환한 후 연산을 실행한다. 이러한 특성 때문에 다른 네이티브 언어에서의 비트연산자에 비해 속도가 매우 느리다. 속도 상의 이유로 비트연산자를 고집할 필요는 없다. 비트 연산자의 종류 AND 연산::& OR 연산::| XOR 연산::^ NOT 연산::~ 왼쪽 쉬프트 연산:: 부호 버림 오른쪽 쉬프트 연산::>>> const AA =25; const BB =3; console.log(AA,"(",AA.toString(2),")",'&',BB,"(",BB.toString(2),")","=",(AA &BB),"(",(AA &BB).toStrin..

Shawn Mendes - Fallin' All in You

Fallin' All in You Shawn Mendes Sunrise with you on my chest 내 가슴에는 햇빛과 함께 네가 있어 No blinds in the place where I live 내가 사는곳엔 블라인드가 없어서 Daybreak open your eyes 새벽에 너의 눈을 뜨게 해줄거야 'Cause this was only ever meant to be for one night 왜냐하면 이건 오직 단 하루밤을 위한 것이지 때문이지 Still, we're changing our minds here 여전히 우린 여기서 서로의 마음을 바꾸고 있어 Be yours, be my dear 너의 것이 될게, 나의 사랑이 되어줘 So close with you on my lips 내 입술 ..

[33-js-concepts] 11. 자바스크립트 엔진 (JavaScript Engines)

11.1 자바스크립트 엔진이란 정의 JS 코드를 실행하는 프로그램 또는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어(Interpreter Language)를 말합니다. 조금 더 자세하게 말해 자바스크립트 코드를 마이크로프로세서가 이해할 수 있는 더 낮은 수준의 언어(기계어)로 변환해주는 역할을 담당합니다. 종류 SpiderMonkey: 최초의 자바스크립트 엔진으로 JS의 창시자인 브랜던 아이크가 넷스케이프 브라우저를 위해 개발했습니다. 현재 FireFox에서 사용합니다. Chakra: Microsoft가 개발한 엔진이며, Edge 브라우저에 사용되었습니다. JavaScript Core(JSC): 애플에서 개발했고 처음에는 WebKit 프레임워크를 위해 개발되었습니다. 최근에는 Safari..

[33-js-concepts] 10. setTimeout, setInterval and requestAnimationFrame

- setTimeout : 자바스크립트 개념에서 온 것이 아니고, 브라우저 그리고 nodeJS 개념에서 왔다. => 일정 시간이 지난 후에 기능을 메시지큐에 넣어주고 스택이 비게되면 자바스크립트가 실행한다. 일정 시간 후 바로 실행 될 수도 있고 콜스택에 함수가 많으면 천천히 실행 될 수도 있다. setTimeout(function(name) { }, 3000, param1); > 세번째 파라미터 부터는 콜백 함수의 인자값을 의미한다 // 이 경우 콜백함수를 setTimeout에 주는것이 아니라 자바스크립트가 직접 실행 하게 되므로 비추!! // 해서 2번처럼 해야한다. > 첫번째 매개변수에 함수명만 입력 1. setTimeout(console.log("Hello"), 10000); // 함수를 실행하지..

[33-js-concepts] 9. 메시지 큐와 이벤트 루프 (Message Queue and Event Loop)

메시지 큐 & 이벤트 루프 기계어를 제외한 모든 언어는 컴파일 과정이 필요하다. 프로그래머가 작성한 코드라고 불리는 문자열은 컴파일러에게 한 줄씩 읽혀서 나름의 규칙에 의해 분해되고, 트리 형태로 변환되고, 어셈블리어를 거쳐 기계가 알아먹을 수 있는 2진수로 변환되어야 비로소 작동 가능한 상태가 된다. 자바스크립트(이하 js)를 비롯한 스크립트언어는 다소 독특한 방식으로 컴파일을 진행하는데, 프로그램을 모두 읽어서 분석하는 과정을 거치는게 아니라, 코드를 한 줄씩 읽어 바로 실행시킨다. 이런 방식의 해석을 해 주는 머신을 인터프리터 라고 하는데, 보통 C나 C++ 같은 고급 언어로 작성 되어 있다. 인터프리터는 스크립트 언어로 작성된 코드를 분석하여 중간 단계의 고급 언어로 변환하여 최종적으로 기계어로 ..

[33-js-concepts] 8. IIFE, Modules, Namespaces

IIFE(Immediately Invoked Function Expressions) - 즉시 호출 함수 표현식 (function () { // Do fun stuff } )() 위의 예제가 가장 기본적인 형태입니다. 함수 선언(Declaration)과 표현(Expression) 함수 표현식은 선언과 동일한 문법을 가지고 단지 표현식에서는 함수명이 생략될 수 있다고만 기술하고 있습니다. 함수 선언(declaration)은 미리 자바 스크립트의 실행 컨텍스트(execution context)에 로딩 되어 있으므로 언제든지 호출할 수 있지만, 표현식(Expression)은 인터프리터가 해당 라인에 도달 하였을때만 실행이 됩니다. // [함수표현식] - 호이스팅관련 성공 a(); // success! funct..

[33-js-concepts] 7. 식(expression) vs 문(statement) | Expression vs Statement

[ Expression] : 하나의 값을 결과로 가지는 javascript code snippet primary expression this, indenitifier, literal this : evaluates to this value of the execution context - p36 literal - NullLiteral(null), BooleanLiteral(false, true), NumbericLiteral, StringLiteral 2. new expression ex) new newExpression - 1. evaluate newexpression - 2. call getValue(Result(1)) - 3. if type(result2) is not object, generater ..