moonscode

ES6부터 export, import의 개념이 도입된 건 알고 있는데, AMD과 RequireJS는 무엇일까? AMD AMD(Asynchronous Module Definition)은 JavaScript 모듈화를 위한 디자인 패턴중 하나. AMD는 JavaScript 코드를 모듈 단위로 구성하고 이를 비동기 방식으로 로드할 수 있도록 해줍니다. AMD는 Require.js와 함께 사용되고 define() 함수를 사용해서 모듈을 정의하고 require() 함수를 사용하여 모듈을 로드합니다. AMD를 사용하면 애플리케이션의 성능을 개선할 수 있습니다. 모듈을 비동기적으로 로드해서 페이시 로드 시간을 줄이고 필요한 모듈만 로드해서 메모리 사용을 최적화합니다. require.js require.js는 JavaS..

callback 함수를 우아하게 처리할 수 있는 Promise에 대해 소개합니다. A, B 라는 두 가지 상황이 있다고 가정하겠습니다. 우리는 A라는 상황이 실행되고 A의 결과에 따라 B가 실행되기 희망합니다. 이 때 어떠한 방식으로 이를 구현할 수 있을까요? 대표적으로 callback 함수를 이용하는 방법이 있습니다. A 함수의 Parameter에 B 함수를 넣고 A 함수가 완료되면 B 함수를 실행하도록 하는 것이죠. callback은 비동기 상황을 해결하는 가장 간단한 방법입니다. 하지만 A, B라는 두 상황이 A, B, ... F 까지 있다면 어떨까요. callback으로 이 상황을 표현할 수 있을까요? 물론 표현할 수 있습니다. 하지만 상당히 많은 callback을 중첩해서 사용해야 할 것입니다...

Map&Set은 ES6에서 새롭게 추가된 데이터 구조입니다. Map Key-Value로 구성된 데이터구조입니다. WeakMap (WeakMap에 대해 설명하기전에 먼저 Deep Copy, Weak Copy에 대해 이해하면 아래 내용을 쉽게 이해할 수 있을 것 입니다.) 객체만을 키로 사용할 수 있습니다. (Primitive 타입은 키로 사용할 수 없습니다) 가비지컬렉션의 대상이됩니다. Enumerable 하지 않습니다. (열거할 수 없습니다) 위의 사전적정의를 이해해보도록 합시다. 먼저 Map은 n개의 key배열이 있다면 반드시 n개의 value배열이 있을 것입니다. 만약 우리가 n-1번째 value값을 찾고자 한다면 key배열을 순회하여 일치하는 key를 찾고 그 인덱스를 이용하여 value배열에서 ..

JavaScript를 사용하다보면 객체의 Property를 나열하는 경우를 자주 만나게 됩니다. Array라면 순서가 있어 나열이 가능하지만 Object는 Key-Value로 구성되어 있어 순서가 보장되지 않는데 어떻게 나열할 수 있을까요? Object.keys (for ... in) - key 배열 반환 Object.values - value 배열 반환 Object.entries - [key, value] 배열 반환 Object 객체는 객체의 Property를 나열하기 위에 keys, values, entries 3가지 함수를 제공합니다. const obj = { a : 'apple', b : 'banana', c : 'coconut' } const keys = Object.keys(obj) // ['..

ES6에서 추가된 Iterator & Generator 이해하기 Iterator 특징 Iterable의 이해 (for...of) - 순회(Iterate) 할 수 있는? next 함수의 이해 반복문 비동기 처리 활용할 수 있는 경우 앱 사용설명 튜토리얼 페이지 Generator 특징 return Iterator function*, yield 명령어의 이해 반복문 비동기 처리 통신 - Lazy Parameters? (임의로 지어봤습니다) 활용할 수 있는 경우 끝말잇기 (or 베스킨라빈스 31 게임) 단순히 보면 next 메소드를 지닌 객체이며, 하나의 패턴에 가깝지 않나하는 생각이 듭니다. 정형화되어 자주 사용되기 때문에 ES6에서 하나의 문법으로 정의된 것 같습니다. 사용법을 익혀둔다면 비슷한 상황이 생겼..

업데이트 :: 2018.01.15 var & letconstnull & undefinedvar & letES6 이전에는 아래와 같이 function 단위의 scope만 존재했습니다. 따라서, function 안에 있는 지역변수를 먼저 찾고 이후에 scope chain을 따라 전역변수를 찾는 방식이었습니다.ES5 - varvar name = "global var"; function home() { var homevar = "homevar"; for(var i=0; i

01. 입출력에 대해 모든 함수는 두 종류의 입력과 출력을 가집니다. 일반적인 입출력을 가지는 함수 숨겨진 형태의 입출력을 가지는 함수 :: 입력과 출력은 없지만, 의존성을 가지며 작업을 하는 함수 숨겨진 형태의 입출력을 가지는 형태는 동작이 외부로 보이지 않습니다. 숨겨진 형태의 입출력을 가지는 함수 public void processNext() { Message message = InboxQueue.popMessage(); if (message != null) { process(message); } } InboxQueue는 분명히 이 함수의 입력입니다. 단, 그것이 명확하지 않다는 것 뿐입니다. InboxQueue의 상태를 고려하지 않고는 다음 함수를 말할 수 없습니다. 이 숨겨진 입력과 출력은 공식..

업데이트 :: 2018.02.03 메모리의 생명 주기메모리 할당가비지 컬렉션참조-세기 가비지 콜렉션 (Reference-counting)객체-참조 가비지 콜렉션순환 참조마크스위프 알고리즘GC 단점JS 메모리 누수1. 전역 변수 (window 객체)2. 잊혀진 타이머 혹은 콜백함수3. 클로저4. DOM을 벗어난 요소 참조메모리의 생명 주기Allocate memory => Use Memory => Release Memory메모리 할당 :: 프로그램이 사용할 수 이도록 운영체제가 메모리를 할당하는 단계저수준의 언어는 이를 개발자가 명시적으로 처리해줍니다.고수준의 언어는 개발자가 이를 신경쓰지 않아도 됩니다.메모리 사용 :: 할당된 메모리를 실제로 프로그램이 사용하는 단계개발자가 필요에 따라 읽기와 쓰기 작업을..

업데이트 :: 2018.01.24 callapplybindbind 주의점func.lengthfunc.nameargumentscall함수 내부의 this를 매개변수로 설정해줄 수 있습니다.fun.call(this, [arg1], [arg2], [...]) 우리는 함수 내부의 this를 우리가 직접 설정해줄 수 있습니다.call 메서드는 모든 함수에서 사용할 수 있으며, this를 특정값으로 지정할 수 있습니다.const bruce = { name : "Bruce" }; const madeline = { name : "Madeline" }; // 이 함수는 어떤 객체도 연결되지 않았지만 this를 사용합니다. function greet() { return `Hello, I'm ${this.name}` } g..

업데이트 :: 2018.03.18 01. Object02. Object Native 메소드 (property)getOwnPropertyDescriptordefinePropertygetOwnPropertyNamesgetOwnPropertySymbolsassigniskeys & values & entriespreventExtensions & isExtensibleseal & isSealedfreeze & isFrozen03. Object Native 메소드 (prototype)getPrototypeOfsetPrototypeOfcreate_defineGetter_ & _defineSetter__lookupGetter_ & _lookupSetter_01. Object자바스크립트는 native로 Object라는 ..