lkt blog

S11. design patterns

2018-11-21T00:00:00+00:00

Design Patterns

패턴이란?
여러가지 서로 다른 상황에서 사용할 수 있는 템플릿 (재사용할 수 있는 솔루션)
패턴의 이점
- 검증이 되있다.
- 재사용 가능하다.
- 좋은 표현수단을 제공한다.
객체생성패턴
- 모듈 패턴 : 독립적 유닛
  - Object Literals
- 재사용 패턴
모듈 패턴

// 1-1. Object Literals : 가장 많이 쓰이고, 이걸 응용하는 패턴이 많다. 
var module = {
  someProp: ‘hello’,
  someMethod: function () {
    console.log(this.someProp);
  }
};

var bankAccount = {
  balance: 9000000,
  deposit: function (amount) {
    this.balance += amount;
  },
  withdraw: function (amount) {
    this.balance -= amount;
  }
};

bankAccount.deposit(20000);
bankAccount.withdraw(5000);

bankAccount.balance = 0; // .balance를 수정할 수 있게 노출되있다. (위험요소)
  
//1-2. IIFE (즉시실행함수), 정보의 노출을 판단하여 작성
var bankAccount = (function () {
  var balance = 0;

  return {
    deposit: amount => {
      balance += amount;
    },
    deposit1 : function(amount){

    },
    withdraw: amount => {
      balance -= amount;
    }
  };
})();

(function bankApp () {
  function createBankAccount (user, password) {
    var balance = 0;

    return {
      deposit: amount => {
        balance += amount;
      },
      withdraw: (amount, pw) => {
        if (password !== pw) {
          return;
        }

        balance -= amount;
      }
    }
  }

  var account1 = createBankAccount('ken', 123);
})();

//1-3. 싱글턴 패턴 (Singletons) : 생성을 하나로 제한한다.
var HTTPModule = null;

function createHTTPModule () {
  if (HTTPModule) {
    return HTTPModule;
  } else {
    HTTPModule = {
      get: url => {
        return $.get(url);
      },
      post: (url, data) => {
        return $.post(url, data);
      }
    };

    return HTTPModule;
  }
}

var HTTP = createHTTPModule();

재사용 패턴

//Behavior Delegation 패턴

S10. es2015

2018-11-14T00:00:00+00:00

ES2015 (let, const, rest parameter, spread operator, default parameter, Template literals, Arrow Functions)

//변수선언이지만 스코프는 중괄호 (var는 함수단위 스코프)
if(true) {
  let d = 2;
}
console.log(d) // d is not defined

//for문일 경우에도 스코프는 중괄호
for (let i = 0; i < 10; i++) {
  console.log(i); //0~9
}
console.log(i); // i is not defined

const

//const는 재할당이 안되는 변수 선언 (const도 스코프는 중괄호), 재할당외엔 다 된다.
const bar = 3;
bar = 4; // Assignment to constant variable

//재할당이 안될 뿐 length변경, 배열에 원소 추가 등은 가능하다.
const obj = {
  arr: [1,2,3]
}

obj.arr.length = 0; // 0
obj.arr.push(1); // 1

rest parameter
rest parameter는 나머지 매개변수를 담는 변수

function foo (a, b, ...all) { // 항상 마지막에 쓰거나 혼자 쓰여야한다. 
  console.log(all); // ['c', 'd', 'e', 'f']
  console.log(Array.isArray(all)); // true
}
foo('a', 'b', 'c', 'd', 'e', 'f');

spread operator

//spread 연산자는 열거 가능한 오브젝트를 하나씩 전개한다.  
var arr1 = [1,2,3];
var arr2 = [4,5,6];

var total = [...arr1, ...arr2];

console.log(total); // [1,2,3,4,5,6]

// example
function foo (a,b,c){
  return a + b + c;
}

var a = foo(...[1,2,3]);
console.log(a); // 6

default parameter

// 기본 값을 설정!
function logName (name = 'ken'){
  console.log(name);
}

logName(); // ken
logName('wan'); // wan

Template Literals

const s = 'ken';
console.log(`my name is ${s}`); // my name is ken

Arrow Functions (중요)

// fn이라는 변수에 함수를 담는다.
const fn = (a) => {
  console.log(a);
}
fn();

// 인자가 하나일 경우 괄호 생략
const fn = a => {
  console.log(a);
}

// return 값도 선언 가능 (예제에선 a*b가 return값)
const multiply = (a, b) => a * b;
const a = multiply(1, 2);

S09. eventloop

2018-11-09T00:00:00+00:00

Event Loop (자바스크립트 특징, Stack, CallStack)

이벤트 루프의 역할은 콜스택과 태스크 큐를 주시하는 것이다.
자바스크립트 특징
- Single-threaded (동시에 하나의 작업만 처리가능하다는 뜻)
- V8 엔진 (자바스크립트 실행시키는 엔진 중 하나)
- Call Stack (코드가 실행되며 스택 프레임이 쌓이는 곳)
- Callback Queue (콜백들이 줄서있는거?)
- Asynchronos (비동기)
- Web API (브라우저에서 제공, 자바스크립트 엔진 아님)
Stack : 나중에 들어온 녀석이 먼저 나가는 형식의 자료구조
- 자료구조 : 데이터를 효율적으로 다룰 수 있는 구조를 짜는 방식
Queue : 먼저 들어온 녀석이 나중에 나가는 형식의 자료구조
CallStack : 현재 실행되는 프로그램들이 스택 구조에 저장되는 것
- 함수가 실행되면 스택에 들어간다.
- 함수가 종료되면 스택에서 빠져나간다.

유투브 event loop

S08. ajax

2018-11-07T00:00:00+00:00

Ajax

정의
전체 페이지를 새로고칠 필요없이, 서버와 정보를 교환하고 웹 페이지의 일부만 수정할 수 있게 해주는 방법
사용되는 것들
1. HTML
2. DOM
3. Javascript
4. XMLHttpRequest
Request Methods (POST / HTTP/1.1)
- GET - 정보를 달라!
- POST - 정보를 만들라!
- PUT - 정보를 수정하라!
- DELETE - 정보를 지우라!
Response Code (HTTP/1.1 403 Forbidden)
- 1XX - 몰라도 됨
- 2XX - 성공적!
- 3XX - 다른곳으로 가보세요!
- 4XX - 니 잘못! (클라이언트 잘못)
- 5XX - 내 잘못..
JSON (Javascript Object Notation), 자바스크립트 오브젝트처럼 쓰는 표기법이라 보면 된다.
- Valid Types (undefined는 없다.)
- String
- Number
- Object
- Array
- Boolean
- null

Asynchronous (비동기)
아래 소스는 2의 갯수에 상관없이 무조건 2, 1 순으로 실행됨 (Event Loop!)

  //1. 햄버거 구매
  $.ajax({
    url: 'https://~~~~.json',
    type: GET,
    success: function Success (data) {
      console.log(data);
    }
  });

  //2. 햄버거 기다리는 중
  console.log('수다수다');
  console.log('수다수다수다');

S07. dunderproto

2018-10-17T00:00:00+00:00

Dunder Proto

instanceof 연산자 (instance 판별 연산자)

  var ken = new Person();
  console.log(ken instanceof Person);
  true

함수를 읽는 순간 prototype 객체는 생성된다.
console.log(Person); // 아빠
console.log(Person.prototype); // 아빠의 아내
console.log(Person.prototype.constructor); // 아빠
console.log(ken.constructor); // Person, 본인이 없으면 엄마의 속성을 가져다쓴다.

단순객체기에 원하는대로 속성/값을 줄 수 있다.

  Person.prototype.log = function(){
      console.log('hello, world');
  }

자식이기에 당연히 어미의 객체를 속성을 사용할 수 있다.

  ken.log();

  var ken = new Person();
  console.log(ken.constructor === Person); //true

__proto__ (Dunder Proto, 인스턴스가 엄마를 바로 가리킨다) 모던, IE10+, 웬만하면 사용하면 안된다. 사용한 경우 코드의 설계가 잘못됐을 확률이 높다.
```
  ken.constructor === Person;
  ken.__proto__ === Person.prototype;
```
Array.prototype.__proto__ === Object.prototype;
Object.prototype.__proto__ === null; (null이 최상위에 존재)
Person.prototype.__proto__ === Object.prototype; (객체는 new Object()를 이용하여 만든 것과 동일시할 수 있다.)
ken.toString() ??
Object.prototype에 있기에 사용가능하다.

S06. advanced2

2018-09-13T00:00:00+00:00

Advanced 2 (this, Closure)

this는 함수를 어떻게 실행하느냐에 따라 바뀐다.

일반함수(non-strict) : window (실무에선 this를 window로 사용하는 건 버그다. 차리리 window로 선언해라)

  var name = 'ken';
  function log() {
     console.log(this.name); => window.name
  }
  log(); // ken

일반함수(strict 모드) : undefined
점 방식 : 함수명 앞 객체
foo.call(ken) : call 내 문자열이 this ( foo(), foo.call() 은 동일한 의미)
foo.apply(ken)도 동일하게 동작
foo.call(ken, 1, 2, 3, 4, 5) : ken이 this, 1~5는 foo의 매개변수로 들어감
foo.apply(ken, [1, 2, 3, 4, 5]) : apply는 2번째 인자를 배열로 받고, 배열의 요소가 하나하나 매개변수로 들어간다.
foo.bind(ken) : ken이 this인 foo함수의 리턴값을 반환
var bar = foo.bind(ken), foo.bind(ken)만으론 실행 X
bar(1, 2, 3, 4, 5); 가능
new로 선언된 함수 내에서 this는 빈 객체
new로 선언한 함수는 return this; 를 자동으로 한다. (return {} 만 강제할 수 있다.)
var ken = new Person('ken', 34, 'm');
여기서 ken을 instance라 한다. (생성자 함수를 리턴하는 값을 담는 변수) Person을 생성자함수(constructor)라 한다. console.log(ken instanceof Person); 부모, 자식간 관계 확인, true or false 반환
Closure
함수 생성 시 주변 스코프를 기억하는 성격을 클로져라 한다.

  function say () {
    var a = 2;

    function log () {
      console.log(a);
    }

    return log;
  }
  
  // 'log' function was just returned and assigned to variable 'a'. 
  var a = say();

  // we are invoking 'log' function here. but it can still access the variable 'a' and log successfully.
  a();

  // Example #4 
  // 클로져는 선언뿐만 아니라 계속 변수의 변경 값도 계속 주시하고 있다.
  var foo;

  function doSomething () {
    var a = 1;

    function something () {
      a++;
      console.log(a);
    }

    foo = something;
  }

  function say () {
    foo();
  }

  doSomething();
  say(); // 2
  say(); // 3
  say(); // 4

======================

You Don’t Know JS

this 확정 규칙

new로 함수를 호출(new 바인딩) 했는가? 맞으면 새로 생성된 객체가 this다.
```
var bar = new foo();
```
call과 apply로 함수를 호출(명시적 바인딩), 이를테면 bind 하드 바인딩 내부에 숨겨진 형태로 호출됐는가? 명식적으로 지정된 객체가 this다.
```
var bar = foo.call(obj2);
```
함수를 콘텍스트(암시적 바인딩), 즉 객체를 소유 또는 포함하는 형태로 호출했는가? 바로 이 콘텍스트 객체가 this다.
```
var bar = obj1.foo();
```

그 외에 경우엔 this는 기본값으로 세팅된다.

var bar = foo(); // 엄격모드는 undefined, 비엄격모드는 전역객체

S02. basic2

2018-09-12T00:00:00+00:00

Basic 2 (variables, conditionals,types, loops, functions)

자바스크립트 자료형
- String : 문자열로 알려진 일련의 텍스트
- Number : 숫자
- Boolean
- Array : 여러 값을 하나의 단일 참조에 저장
- Object : 자바스크립트 모든 것은 객체이며 어떤 변수에 저장될 수 있다.
(예외) NaN의 typeof 값은 number
(예외) null의 typeof 값은 object
함수 내 return 선언이 없다면 기본으로 undefined 반환
함수 내 return 을 만나면 다음 구문은 실행이 안된다. 종료라고 생각하면 된다.
ES5 전까진 변수의 scope는 함수밖에 없다고 생각하면 된다.

S03. basic3

2018-09-12T00:00:00+00:00

Basic3 (DOM API, objects, arrays)

배열의 typeof값은 ‘object’
arr.length : 요소의 갯수 (length 프로퍼티 값을 현재보다 작게 선언할 경우 크거나 같은 인덱스 요소는 모두 삭제됨)
- arr.push() : 배열 뒤에 요소 추가 (return값은 length)
- arr.pop() : 배열 뒤에 요소 제거 (return값은 제거된 요소)
- arr.unshift(4) : 배열 앞에 요소 추가 (return값은 length)
- arr.shift() : 배열 앞에 요소 제거 (return값은 제거된 요소)
delete o.name; : 해당 키 삭제
document는 자바스크립트가 아니라 브라우저에서 제공

S04. dom event

2018-09-12T00:00:00+00:00

DOM Event

EventTarget.addEventListener(‘EVENT_TYPE’, EVENT_HANDLER [, useCapture]);
- EventTarget : element, window, document 등
- EVENT_TYPE : click, mouseup 등
- EVENT_HANDLER : 실행되는 함수
- userCapture : capture 사용여부, true : capturing, false : Bubbling(default)
이벤트 핸들러엔 이벤트 객체가 첫번째 argument로 넘어온다. 예) function(e)
- 이벤트 객체는 추가 정보들을 가지고 있고, 이 정보를 이용하여 여러가지 작업 수행
- 추가 정보는 이벤트 종류에 따라 조금씩 차이가 있음
event.type : 발생한 이벤트 종류
- event.target : 최초 발생한 element 예) (e.target.id) : 발생한 이벤트 타켓 id
- event.currentTarget : 발생된 이벤트가 등록되있는 element 예)(e.currentTarget.id) : 등록한 element id
- event.preventDefault : 브라우저 기본 동작 방지하는 함수
- event.stopPropagation : 해당 이벤트 흐름 중지시키는 함수
Event 흐름
- Capturing : 최상단부터 실행됨
- Bubbling : 본인부터 타고 올라감
  - 이벤트 등록 시 capturing, bubbling 흐름을 선언해줘야 한다. (실무에서 capturing을 사용하는 경우는 거의 없다.)

S05. advanced1

2018-09-12T00:00:00+00:00

Advanced 1 (arguments, scope, hoisting)

function의 aguments 키워드는 key, value를 반환 (key값은 index)
aguments는 배열은 아니다. 유사배열이다.
aguments.length 사용가능
aguments[3] 사용가능
변수는 본인이 속한 ㅓ스코프를 먼저 찾고, 없으면 상위로 올라간다.
함수 내 for문의 변수는 함수 스코프이다.
호이스팅
- 함수와 변수 선언문 모두 끌어올려진다. (함수가 먼저 끌어올려지고 다음으로 변수가 올려진다.)

// 함수선언식은 함수 자체가 호이스팅
var a = 1;

foo();

function foo () {
  console.log(a);
}


// 함수표현식은 변수 선언만 호이스팅
d(); // d is not function

var d = function () {
  console.log('d');
};