디버깅 꿀팁

  • Call Stack을 확인하면 이전 함수로 돌아갈 수 있다.
  • 디버깅 콘솔에서 원하는 변수 값을 입력하면 출력시킬 수 있다.
  • 맨날 Watch 추가하고 마우스 갖다대고 보느라 힘들었는데… 키보드로도 확인할 수 있었다니 X(

javascript 외장 모듈 사용방법

  • npm을 활용하면 외장 모듈을 다운로드해 사용할 수 있다.
  • npm
    • node.js의 기본 패키지 관리자. 사용 가능한 패키지들은 npm 웹사이트를 통해서 찾아볼 수 있다.
    • package.json를 통해서 외부 모듈의 설치리스트를 한눈에 볼 수 있다.

javascript 외장 모듈 lodash.every

  • Array.every()와 동일한 역할을 한다. 배열을 순회하면서 콜백 함수가 모든 원소에 대해 true가 아니면 false를 반환한다.
  • 사용방법이 조금 다른데, lodash.every()는 첫 번째 파라미터에 비교할 배열, 두번째 파라미터에 콜백함수를 넣어준다. 
    const every = require('lodash.every');

const sourceArr = [1,2,3];
const compareArr = [1,2];

const result = every(compareArr, element => sourceArr.includes(element));
console.log(result); //true
  • 위와 같이 사용하면, compareArr의 각 원소들이 sourceArr에 포함되는지 확인하는 함수가 된다. 만약 포함되지 않는 원소가 하나라도 있다면, false를 반환한다.

javascript Generator

  • Generator function으로 반환된 객체. Iterator 처럼 사용할 수 있다. Generator function은 아래와 같이 선언한다. 
    function* gen(){
	yield 1;
	yield 2;
}
  • 자바의 Iterator와 비슷하게 사용한다. 이 함수를 실행하려면 Iterator가 값을 뽑아내기 위해 next()를 실행하는 것처럼, Generator.next()를 통해 실행할 수 있다.
  • Generator를 실행한 결과를 받아오려면, next().value를 통해 얻을 수 있다. 이 때 value의 값은 Generator 함수에서 가장 먼저 만난 yield까지 실행한 결과이다.
    따라서 위 코드에서 gen.next().value를 하게되면, 1을 얻을 수 있고 그 다음으로 또 gen.next().value를 하면 2를 얻을 수 있다.
  • 만약 첫번째 받은 결과값이 다음 next()를 실행했을 때 필요한 값이라면, next()에 파라미터로 이 값을 넣어서 넘겨주어 실행하면 된다.
  • 매우 어려운 개념이어서 이해하는 데 엄청나게 오래걸렸다.. 애증의 Generator
  • 추후 좀 더 자세하게 정리할 예정이다 :p

javascript Promise()

  • 비동기 작업을 위해 사용하는 함수
  • Callback 함수의 지옥을 해결하기 위해 마련된 함수이다.
  • Promise 함수는 동기 실행 함수들이 모두 실행될 때까지 Call Stack에 대기하고 있다가, 값을 받으면 resolve를 통해 그 값을 전달한다. 만약 값을 받는 데 실패했다면 reject로 실패 동작을 처리할 수 있다.
  • resolve 또는 reject를 통해 값을 받으면, then()을 통해 그 값에 대한 처리를 할 수 있다. then(param1, param2)로 param1은 성공(resolve)에 대한 처리 함수, 실패(reject)에 대한 처리 함수를 넘겨서 처리가 가능하다.
  • 이걸 이해하려다간 차라리 콜백 지옥이 나을지도 모르겠다고 생각했다.
  • 추후 좀 더 자세하게 정리할 예정이다 X(

해설 강의를 들으면서 마스터님도 조금 어려웠겠다는 말에 살짝.. 슬펐다.. 그쵸…? 저만 어려웠던게 아닌거죠..?ㅎㅎㅎ
javascript 예제를 보면 참 쉬운데 응용 코딩은 왜.. javascript를 다시 느끼게 된 날이었다.