programming

[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로 표현될 수 있..

[33-js-concepts] 4. 명시적 변환, 암시적 변환, Nominal, 구조화, 덕 타이핑 (Implicit, Explicit, Nominal, Structuring and Duck Typing)

데이터 타입 변환에는 두가지가 있다. 1.명시적 변환 : 개발자가 의도를 가지고 데이터타입을 변환시키는 것 * 타입을 변경하는 방법 -> Object(), Number(), String(), Boolean() 와 같은 함수를 이용 new 연산자가 없다면 타입을 변환하는 함수로서 사용된다. Number() != parseInt() 2.암시적 변환 : 자바스크립트 엔진이 필요에 따라 자동으로 데이터타입을 변환시키는 *산술연산자 - 더하기 + 연산자의 우선순위 : 숫자 < 문자 console.log(4 + "coen"); 결과 : coen console.log("coen" + 4); 결과 : coen4 console.log(4 + 5 + "coen"); 결과 : 9coen console.log(4 + "coe..

[33-js-concepts] 3. 값 타입과 참조 타입 (Value Types and Reference Types)

1.값 원시타입 ( boolean, null, undefind, string,number, symbol) 원시타입은 immutable data type 이기 때문에 ,값이 변경될 경우, 새로운 값을 할당을 받음. let myNumber=23; let newVar = myNumber; myNumber = myNumber+1; 2. 참조 객체타입 ( object) 메모리상의 실제 객체의 위치를 나타내는 주소값을 할당받음. let myArray =[]; [ let vs const : 변수할당이 나온 김에 번외 let sum=0; sum = 1+2+3+4+5; let numbers=[]; numbers.push(1) numbers.push(2) numbers.push(3) numbers.push(4) let 과..

[33-js-concepts] 2. 원시 자료형 (Primitive Types)

특징 JavaScript의 모든 Type은 원시타입(Primitive Type) 6개와 객체타입(Object Type) 1개로 총 7개 입니다. 원시타입은 불변적입니다. 원시 타입은 값(value)으로 저장, 객체들은 참조(reference)로 저장 됩니다. 어떠한 메소드를 가지고 있지 않습니다. Type을 알고 싶으면 typeof 를 쓰면 됩니다. typeof null === 'object' 인 이유 null은 원시타입 인데 객체 타입이라고 나타내고 있습니다. typeof가 검사하는 방식 1. undefined인지 검사 2. 해당 값이 객체 태그를 가졌는지 검사 3. 숫자, 문자, 참/거짓 검사 ※ null에 대한 명시적인 검사는 없습니다. 1. undefined 인지 검사 2. 해당 값이 객체 태그를..

[33-js-concepts] 1. 호출 스택 (Call Stack)

1.1 JavaScript Engine 자바스크립트란? JavaScript를 접하다 보면 이런 수식 문장을 종종 접할 수 있습니다. 싱글 스레드 기반으로 동작하는 인터프리터 언어 이벤트 루프를 기반으로 하는 싱글 스레드 Node.js 초창기에는 웹 페이지의 동작을 정의하는 Client-side 언어였으나, Node.js의 등장으로 Server-side 까지도 개발을 할 수 있게 되었습니다. 중요한 키워드는 싱글 스레드 방식으로 돌아가기 때문에 작업(Task)을 수행할 때 Stack, Queue, Heap과 같은 단일 콜 스택을 가집니다. Rendering Engine vs. JavaScript Engine Rendering Engine(Layout Engine)은 HTML과 CSS로 작성된 마크업 관련 ..

[Git] 저장소에 텅 빈 디렉터리를 만들어보자!

프로젝트 중에는 경우에 따라 빈 폴더가 있어야 하는 경우가 있습니다. 예를 들어 파일 업로드/다운로드 기능 개발 시 uploads/ 등의 비어 있는 공간을 만들고 이곳에 경로를 잡아 자원을 관리하기도 합니다. 소스 코드를 GitHub로 관리하고 있다면 원격 저장소에 이 정적 디렉터리 안의 샘플 파일까지 커밋할 필요는 없습니다. 하지만 안의 내용을 다 지우고 아무리 Push를 진행하더라도 Git은 빈 디렉터리를 인식 대상에서 제외합니다. 그런데 나는 꼭 빈 디렉터리를 원격 저장소에 함께 올리고 싶다면? 해결책이 전혀 없는 건 아닙니다. 바로 .keep이라는 임시 숨김 파일을 만들어서 넣어주는 방법인데요. 파일 이름에 정해진 규칙은 없지만, 관례상 .keep 또는 .gitkeep을 많이 사용하는 것 같습니다..

[Github] 저장소(Repository)에 라이선스를 달아보자!

Github를 자주 이용한다면 저장소(Repository)를 보다 완성도 있게 만들고 싶은 욕구가 생깁니다(?). 실제 유명한 오픈소스 프로젝트 역시 두리번거리다 보면 하나같이 공통점이 있는데요. 바로 라이선스를 명시하고 있다는 것입니다. 사실 많은 분이 간과하고 있는 점 중 하나가 라이선스 명시를 지키지 않는 부분인데요. 오픈소스 생태계에서 이 부분은 되게 중요합니다. 저도 경각심을 가지고 이번 포스팅을 작성하게 되었습니다. 대표적인 S/W 라이선스로 GPL이나 BSD, MIT 등등 많은 종류가 있는데, 이번에는 자신의 Github 저장소에 라이선스를 추가해보도록 하겠습니다. 실제로 그렇게 어렵지 않으니 한번 정리해놓으면 그다음부터는 손쉽게 진행할 수 있습니다. 원격 저장소 확인 및 새 파일 생성 먼저..