programming

    [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..

    [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 ..

    [33-js-concepts] 6. 함수 범위, 블록 범위, 렉시컬 범위 (Function Scope, Block Scope and Lexical Scope)

    스코프란? 바스크립트는 var 문법을 통해 변수를 선언할 수 있습니다. 또한 es2015부터 let과 const라는 문법으로도 선언할 수 있게 되었습니다. 모질라 문서에 따르면 var은 함수 스코프(function-level scoped), let과 const는 블록 스코프(block-level scoped)를 갖는다고 합니다. 스코프의 범위 전역스코프? 변수가 함수나 블록에 속해 있지 않음 함수 내부에 속해 있더라도 var로 지정자를 설정하지 않음 const,let 등으로 선언을 했는데 그 어떤 블록 안에도 들어가있지 않음 지역스코프? 변수가 함수에 속해 있고 var로 선언되어 있음 변수가 블록에 속해 있고 const나 let으로 선언되어 있다. 스코프 레벨 함수 스코프? 함수 내부에서 (var)로 변..

    [33-js-concepts] 5. == vs. === vs. typeof

    Falsy, Truthy 강제변환하면 false로 변하는 값입니다. JS에 있는 모든 값들은 Falsy 혹은 Truthy 한 값입니다. Falsy 값은 얼마 되지 않아서 외워두면 되고, 나머지는 Truthy한 값이라고 생각하면 됩니다. Falsy : undefined null false +0, -0, NaN "" Equality ( == , 동등 연산자 ) 느슨한 동등 비교로, 비교 대상의 타입이 다를 경우 강제 변환을 실시하여 타입 비교 후 결과를 반환한다. 추상 비교 알고리즘(Abstract Equality Comparison Algorithm)을 사용하며, 비교 후 같은지 결과를 true 혹은 false로 반환한다. 작동 알고리즘 먼저 비교대상이 되는 x와 y는 true와 false로 표현될 수 있..