반응형 창고(2021년 이전)38 [CSS Rendering] 배경설명, 고전레이아웃 코드스피츠 유투브강의-1 css를 배우는것은, css의 속성, 값이 발현될때 어떠한 식으로 계산되고 표현되는지 이해하는 데에 있다. Graphics system 그래픽 시스템은 근본적으로 x, y, width, height, column로 이루어져있다. Fixed Number로 범용성있는 Graphics System구축을 위해서는 여러 문제가 발생한다. Sreen size Chrome size Hierarchy 이에 따라서 여러가지 (계산법)이 등장하였다. - 실제로 화면에 그려질 때 환경을 인식해서 숫자로 변환해줌. 함수이자 공식! 실제 그림이 그려지는 순간마다 함수를 돌려 숫자를 얻어(계산해) 그림을 얻게됨. % Left InLine Float ...... 이러한 체계를 추상화된 계산된 체계라고 하여.. 2019. 10. 27. [JS] Console js 에서 console.log 만 주구 장창 쓰다가 Console객체를 조금 더 다양하게 활용하여 편리도를 높일 수 있다는 것을 알게되었다. MDN Console.assert() - 첫 번째 매개변수가 false인 경우 메시지와 스택 추적을 출력함 Console.clear() - 콘솔의 내용을 지움 Console.count() - 주어진 라벨로 메서드를 호출한 횟수를 출력함 Console.error() - 오류메시지를 출력함 Console.group(), Console.groupEnd() - 새로운 인라인 그룹을 생성해 (그룹단위별로)들여쓰기가 적용됨 Console.time(), Console.timeEnd() - 타이머를 멈추고 소요시간을 출력함 2019. 10. 25. [JS] 템플릿 리터럴 : `${}` - Template literals MDN 템플릿 리터럴은 이중 따옴표나 작은 따옴표 대신 백틱(` `)을 이용한다. $ {expression} 이용 표현식을 넣을 수 있다. 탬플릿 리터럴 안에서 백틱의 백틱을 벗어나려면 백틱 앞에 백슬러쉬를 넣으면된다. `\`` === "`" // true Multi-line strings console.log ("string text line 1\n"+ "string text line 2"); // "string text line 1 // string text line 2" console.log(`string text line 1 string text line 2`); // "string text line 1 // string text line 2" 표현식 삽입법 - Expression interpol.. 2019. 10. 25. [JS] 화살표 함수 => Fat Arrow Function MDN PoiemaWeb 모든 화살표 함수는 익명함수이다. 화살표 함수는 자신의 this값을 정의하지 않는다. 생성자를 사용할 수 없다. new 연산자가 사용이 불가능하다. //ES5 var funcStructure = function(s){ return s; }; //ES6 let funStructure = s => s; Function과 () 생략 // Parameter 가 없을시 - 소괄호 생략 불가 // ES5 let insideOfDoc = function docLog(){ console.log(document); }; let insiedOfDoc = () => {console.log(document);}; // Parameter 가 한개일시 - 소괄호 생략 가능 // ES5 function g.. 2019. 10. 25. [JS] 함수메소드(Function Methods) 함수를 실행하는 다양한 방법 function(method)호출 new 키워드를 이용한 호출 함수 메소드 .call .apply를 이용 //.call .apply 복습 function add(x, y){ this.val = x + y; console.log(this.val); } let obj = { val : 0 }; add.apply(obj, [2, 8]); // 10 add.call(obj, 2, 8);//10 .bind // call/ apply와는 다르게, 함수를 바로 실행시키지 않고, this 값이 바인딩된 함수를 리턴한다. function add(x, y){ this.val = x + y; console.log(this.val); } let obj = { val:0 }; let boundFn .. 2019. 10. 13. [JS] 비동기 호출 callback - 다른 함수(A)의 전달인자(argument)로 넘겨주는 함수(B) - parameter를 넘겨받는 함수(A)는 callback 함수(B)를 필요에 따라 즉시실행(synchronously)할수도 있고, 아니면 나중에 (asynchronously) 실행할 수도 있다. function B(){ console.log('called at the back!'); } function A(callback){ callback(); // callback === B } A(B); 이 경우 동기적인 경우이며, 비동기적으로 호출 할 수도 있음. callback in action : 반복실행하는 함수 (iterator) [1, 2, 3].map(function(element, index){ return ele.. 2019. 10. 8. [JS] this 코드가 실행될 때 Js 엔진은 어떤식으로 작동하는가? var num = 2; funciton pow(num){ return num*num; } 메모리 상에는 아래와 같이 저장된다. variable name value num 2 pow function pow(num){ ... } - Global memory 생성 - Global execution context 생성 (전형 실행 context형셩 - 위표와같음) function을call할때는 어떻게될까? - Local memory 생성 : lexical scope에 의존 - Local execution Context생성. (실행 시, 즉 call될때 생성됨) 예시 function a() { let youAreIn = 'A Scope'; b(); } func.. 2019. 10. 7. 이전 1 2 3 4 5 6 다음 728x90 반응형