moonscode

업데이트 :: 2018.03.07 01. Chaining Pattern이란02. Method Chaining의 예03. 비교하기04. 사용하기05. 결론01. Chaining Pattern이란Object.function().function().function() 다음과 같은 방식으로 진행되는 패턴을 말합니다.그리고 해당 메소드들은 순차적으로 진행됩니다.다음과 같은 코드 진행은 코드량을 줄일 수 있는 장점도 있습니다.02. Method Chaining의 예document.getElementByTagName('body')[0].appendChild(newnode); 가장 흔히 볼수 있는 체이닝 패턴입니다.03. 비교하기var DBConnector = function(){ this._host = ''; thi..

JavaScript Pattern, 세상에 잘 짜여진 코드는 많다.JS, Access Modifier 접근제한자에 대한 고민문스코딩 - 2018.03.24JavaScript Pattern, 세상에 잘 짜여진 코드는 많다.JS, Access Modifier 접근제한자에 대한 고민01. 접근 제한자02. private03. private04. protected ( Wrapper를 이용한 Protected 구현 )01. 접근 제한자접근 제한자는 객체지향의 필요라고 할 수 있습니다.클래스는 속성과 메소드의 묶음뿐 아니라 정보은닉에 대한 캡슐화의 좋은 도구 이기도 합니다.접근 제한자는publicprotectedprivate이렇게 3가지가 있습니다.public 은 클래스 내부, 외부 모두 접근이 가능하며, prot..

업데이트 :: 2018.03.20 Getter & Setter 필요성GetterGetter 기능Getter 사용법생성된 객체에 Getter 추가동적으로 Getter 정의변경할 수없는 패턴 (Immutable Pattern)getter에서 주의할 점SetterSetter 기능Setter 사용법생선된 객체에 Setter 추가동적으로 Setter 정의객체의 불변규칙 (Invariant Rule)get / set 의 상속?private 변수에서의 Getter / Setter 처리결론Getter & Setter 필요성getter와 setter를 사용하면Validation을 검사Lazy LoadingRead와 Write 권한을 다르게 할 수 있습니다.그렇기 때문에 클래스 내부에 변수를 정의할 때,scope를 이용한..

업데이트 :: 2018.07.18 다중상속ReduceMixinBuilder시작클래스와 중간클래스다중상속JS는 다중상속이 안됩니다.그래서 다중상속이 필요할때 흉내내서 비슷하게 처리하는 방법을 소개하고자 합니다.ReduceReduce함수는 초기값을 받아 배열에 요소들로 차례차례 처리하는 함수입니다.[1,2,3].reduce((a, b)=>a+b, 0); 위의 코드는 다음과 같은 과정을 따를 것입니다.0 + 1 = 11 + 2 = 33 + 3 = 6누적된 값을 전달합니다.이 원리를 이용해 싱석ㅇ; 누적된 클래스를 전달하면 어떨까요 ?MixinBuilder다음 클래스를 사용하면 실제 다중상속을 처리해주는 것은 아니지만,비슷하게 처리할 수 있게 도와줍니다.class MixinBuilder { constructor..

업데이트 :: 2018.02.26 IIFE함수의선언과 함수표현식즉시함수호출표현식IIFEIIFE 예제 (1)IIFE 예제 (2)결론IIFEIIFE란, 즉시실행함수 표현식(IIFE, Immediately-Invoked Function Expression)를 의미합니다.기본적인 형태는 다음과 같습니다.(function () { // TODO })() 함수를 ()로 묶어주면 호출되는 즉시 임명함수를 실행합니다.이것은 새로운 스코프를 생성하고 정보를 은닉하는데 중요한 역할을 할 수 있습니다.함수의선언과 함수표현식IIFE를 설명하기 전에 함수의 선언과 함수의 표현에 차이점에 대해 이해할 필요가 있습니다. Hoisting 확인하기함수의선언함수표현식함수의선언은 미리 자바스크립트 실행 컨텍스트에 로딩되어 있으므로 언제든..

업데이트 :: 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라는 ..

업데이트 :: 2018.03.13 프로토타입어디에 사용하나요 ?생성원리Contructor(생성자) 자격 부여Prototype Object 생성 및 연결Prototype Object & Prototype LinkPrototype Object 자세히Prototype Link ( = __proto__) 자세히Prototype ChainPrototype & Class프로토타입JS는 객체기반언어로, 클래스가 없습니다.대신 프로토타입(Prototype) 이라는 것이 존재합니다.JS가 프로토타입 기반 언어라고 불리는 이유입니다.참고로 최근의 ECMA6 표준에서는 Class 문법이 추가되었으나, JS가 클래스기반으로 바뀌었다는 것은 아닙니다. JS를 클래스로 작성하더라도 생성된 객체는 여전히 프로토타입기반입니다.어디에..

JS, 나만의 알고리즘동적 반복문 (Dynamic loop) 추가하기2018.03.26 JS, 나만의 알고리즘동적 반복문 (Dynamic loop) 추가하기동적 반복문 (상황설명)정적 반복문 처리동적 반복문 추가 (방법1 - 전체갯수와 영역을 이용하기)동적 반복문 추가 (방법2 - 트리구조 반복문, Callback이용하기)동적 반복문 (상황설명)N * N * N 의 Loop를 만들 수 있는가 ?만약 동적인 속성이 여러개를 가지는 객체가 있다고 해봅시다.자동차라는 객체가 색상, 크기, 줄무늬이런 3가지 속성을 가지고 있습니다. 색상은 [Red, Green, Blue] 일 수 있고, 크기는 [소형, 중형, 대형] 일 수 있고, 줄무늬는 [None, Stripe, Dot] 이렇게 있습니다. 각각의 모든 속성을..