동기와 비동기 프로그래밍

생활코딩 Node.js 강의
노드 프로그래밍의 핵심인 비동기적인 프로그래밍에 대한 개요를 살펴본다.

간단한 정의

• 줄임말 : sync(동기) / Async(비동기)
• 동기적 일처리 방식 : 순차적으로 일을 스스로 끝내 나가는 방식
• 비동기적 일처리 방식 : 해야 할 일을 위임하고 기다리는 방식

예시(nodejs)

• nodejs 사이트 doc에서 filse system 모듈 참고
• filse system 모듈은 nodejs를 이용해서 file을 제어하는 것과 관련된 기능
• nodejs 기본적으로 시간이 필요한 작업들 (IO가 필요한 작업) 비동기 적으로 처리

동기적 방식 - 코드

var fs = require('fs');
console.log(1); // 실행순서 1
var data = fs.readFileSync('data.txt', {encoding: 'utf8'});
console.log(data); // 실행순서 2, 만약 data 파일이 처리가 오래 걸린다면 동기적 방식에서는 그동안 다른 작업을 할 수 없음 
console.log(3); // 실행순서 3

동기적 방식 - 결과

1
Hello sync and async

비동기적 방식 - 코드

var fs = require('fs');
console.log(2); // 실행순서 1
fs.readFile('data.txt', {encoding: 'utf8'}, function(err, data){
  console.log(3); // 실행순서 3
  console.log(data); // 실행순서 4
})
console.log(4); // 실행순서 2

비동기적 방식 - 결과

2
4
3
Hello sync and async

콜백(Callback)

생활코딩 Node.js 강의
콜백함수에 대하여 알아본다.

• 터미널에서 node 만 입력하면, 터미널 내에서 직접 자바스크립트 코드를 실행 할 수 있다.
• 어떤 함수의 매개변수 인자로 함수가 주어졌을 때, 호출 당한 해당 함수를 콜백 함수라고 한다.
• 예시

var a = [3, 1, 2];
function b(v1, v2){return v2-v1;}
a.sort(); // 오름차순으로 정렬됨 [1, 2, 3]
a.sort(b); // 콜백함수 b가 실행되어 정렬방식을 결정 [3, 2, 1]
console.log(a);  

javascript 객체지향프로그래밍 - apply(), call(), bind() 메소드

윤지수님의 웹 프론트엔드 강의
자바스크립트 OOP와 fucntion 객체가 가진 메소드 apply(), call(), bind()에 대해서 알아본다.

자바스크립트 OOP

• 자바스크립트 자체는 OOP 지향 문법을 갖고 있지 않다.
• 하지만 객체 중심으로 개발이 가능하다.
• oop가 필요한 이유
  • 프로젝트의 대형화로 JS 코드가 많아짐
  • 모듈화, 객체의 필요성
• 비슷한 함수, 배열 등을 묶어서 객체지향으로 개발하는 해보는 것이 도움이 됨

JS function 객체가 갖고 있는 메소드 .apply(), .call()

• .apply() 메소드 - MDN 참고 .call() 메소드 - MDN 참고
• this가 가르키는 context를 변경하여 바로 실행하는 메소드
• 장점 : 유용한 메소드들의 재사용/공유가 가능, 중복을 방지
• 자바스크립트에서 object를 효율적으로 사용하면서 재사용 패턴까지 구현할 수 있는 유용한 방법

  var myMethods = {
    getName : function(){
    	return this.name;
    },
    getAge : function(){
    	return this.age;
    }
  }
  
  var MY_DATA = {
    name : 'monkey',
    age : 25
  }
  
  var MY_CAR = {
    name : 'mini',
    age : 2017,
    height: '120cm'
  }
  
  myMethods.getName.apply(MY_DATA); // 'monkey'
  myMethods.getAge.call(MY_CAR); // 2017
  // getAge 라는 메서드가 실행될 때, MY_CAR라는 컨텍스트 안에서 실행되게 해줘!
  // (즉 너가 실행될 때 this 키워드는 MY_CAR를 가르키면 돼!)
  

JS function 객체가 갖고 있는 메소드 bind

• callback 함수 안에서의 this는 window를 카르킨다.

var o = {
    data : 'dummy',
    time : function(){
            window.setTimeout(function(){ //window. 생략 가능
              console.log('this -->', this); // window 객체
              console.log(this.data);}, 1000) // undefined
              // callback 함수 setTimeout() 안에서의 this는 window 객체를 카르킨다.
     }
}

o.time(); // window 객체, undefined

• callback 함수 내의 this 가 window 객체를 가르키는 문제 해결방법 1 (scope)

var o = {
    data : 'dummy',
    time : function(){
      var that = this;
      window.setTimeout(function(){
      	console.log(that.data);}, 1000)
        // scope로 인하여 that은 외부 변수 that을 가져온다.
    }
}

o.time(); // 'dummy'

• callback 함수 내의 this 가 window 객체를 가르키는 문제 해결방법 2 (.bind())
  • function 객체가 갖고 있는 bind() 메소드 MDN 참고
  • bind() 메소드는 바로 실행되는 것이 아니라 설정을 저장하는 것
  • 주로 callback 함수에서 많이 쓰인다.

var o = {
    data : 'dummy',
    time : function(){
      window.setTimeout(function(){
      console.log(this.data);
      }.bind(this), 1000)}
    // 니가 실행될 때, 니가 가르킬 this는 인자를 가르키도록 실행 해! (저장)
    // bind()는 apply(), call()과는 다르게 바로 실행되지 않는다.
}

o.time(); // 'dummy'

오늘 한 일

• 생활코딩 nodejs 강의를 들었다.
  express 프레임워크에 대해서 배우고 있는데 활용해서 웹앱을 만들어 보고싶다.
• OLC 윤지수님 javascript 강의을 결제했다.
  OOP에 대해서 배웠는데, 생활코딩에 없었던 내용이라 신선하고 재미있었다.

오늘 느낀 것

• 강의 듣는 속도가 점점 빨라지는 기분?
• 새로 배우는건 손코딩을 한번씩 해보자

내일 할 일

• 생활코딩 nodejs 강의 듣기
• 윤지수님 강의 JS OOP 부분 듣기
• 알고리즘 문제 하나라도 풀기
• 블로그 메뉴 스타일 변경 (글이 점점 많아져서 카테고리별로 글 수를 표시하도록 변경해야겠다.)

모듈과 NPM - npm 설치 및 사용

생활코딩 Node.js 강의
에플리케이션에서 부품으로 사용할 로직인 모듈에 대해서 알아보고 모듈을 편리하게 관리하는 기술인 NPM을 사용하는 기본적인 방법을 알아본다.

npm 소개

• npm = Node Package Manager
• Nodejs은 다양한 모듈을 제공한다.
  • Nodejs 시스템 에서만 쓸수 있는 모듈 (ex. HTTP, OS)
  • Javascript 라는 언어가 제공하는 모듈 (ex. Date, String, Array, Math)
• npm은 Node 계의 앱스토어!
  • 모듈의 설치, 삭제, 업그레이드, 의존성 관리
• npm은 다른 사람의 sw를 가져와서 연결시키는 연결자의 역할을 하고 있다. 따라서 nodejs 생태계의 중심에는 npm이 있다고 할 수 있다.
• npm 사이트

npm 앱 설치 예시

• npm 소프트웨어 패키지의 종류
  • 부품 모듈
  • 독립적으로 동작하는 앱

npm으로 독립적으로 동작하는 앱 설치 - uglify-js

npm을 사용해서 nodejs로 만들어진 sw를 사용하는 방법

• npm 사이트에서 uglify-js 검색

• install (터미널)

  npm install uglify-js -g // -g 는 global의 약자, 컴퓨터 전역에서 사용하는 독립적인 sw로 사용
  npm install uglify-js // local로 간주, 현재 프로젝트 안에서 부품으로 사용
  

• pretty.js 파일 작성

  function hello(name){
    console.log('Hi,'+name);
  }
  
  hello('siwa');
  

• uglify-js 실행
  • 사용방법 npm 패키지 문서
    • Usage : uglifyjs [input files] [options]
    • options 예시
      • -o, –output : Output file (파일저장)
      • -m, –mangle : Mangle names/pass mangler options (변수명을 1글자로 변경)

    • 실행 (터미널)

      $ uglifyjs pretty.js -m -o pretty.min.js
      
      

    • 결과 (pretty.min.js 파일 내용)

      function hello(l){console.log("Hi,"+l)}hello("siwa");
      
      

npm으로 부품 모듈 설치 - underscore

다른사람이 만든 소프트웨어(모듈)을 자신의 소프트웨어의 부품으로 사용하는 방법

• npm 사이트에서 underscore 검색

• 모듈 설치전 준비사항 (프로젝트 폴더의 npm 패키지 초기화)
  • npm을 설치할 프로젝트 디렉토리 자체를 npm의 패키지로 먼저 지정
    • 터미널에서 프로젝트 폴더로 이동 후 npm init 입력
    • entry point : 만든 패키지에 여러가지 js 파일이 있을 수 있는데, 그 중에서 어떤 파일이 해당 패키지를 구동시키는 js 인지 지정 (나중에 변경 가능) > 해당 정보는 package.json에 저장됨
    • npm init을 통해 npm의 패키지로 지정한 프로젝트 디렉토리는 www.npmjs.com에 등록하여 배포할 수 있게됨
• 모듈 설치 (터미널)
  • npm install underscore --save
    • –save 옵션(플래그)를 붙여서 입력
    • –save 옵션을 통해 package.json 안에 dependencies(의존성) 항목으로 명시적으로 추가 됨

      "dependencies": {
          "underscore": "^1.8.3"
        }
      

    • dependencies가 있으면 새로운 폴더에 프로젝트를 다시 시작한다고 해도 해당 dependencies가에 해당되는 모듈을 쉽게 가져올 수 있음
    • 어떠한 모듈을 항상 프로젝트에 포함시킬때는 **--save 옵션을 넣는게 좋음**
    • 일시적으로 사용하는 모듈은 –save 옵션 필요 없음
  • npm은 underscore 패키지를 다운로드 받아서 프로젝트 폴더 안에 포함시킴 (/node_modules/underscore)

모듈 사용법 - underscore

다른사람이 만든 소프트웨어(모듈)을 자신의 소프트웨어의 부품으로 사용하는 방법

• underscore 는 아주 유명한 라이브러리 underscore 가이드문서
• underscore.js 문서 작성
  • require() 함수를 통해 underscore 라이브러리 적용

var _ = require('underscore');
// require 함수를 통해 underscore 모듈을 가져와서 객체를 리턴한다.
// 리턴한 객체를 변수 _ 에 담는다.

var arr = [3, 5, 9, 1, 12];

console.log(arr[0]); // 3
console.log(_.first(arr)); //3
// 자바스크립트가 가진 배열의 underscore 라이브러리가 기능을 보충하는 역할
console.log(arr[arr.length-1]); // 12
console.log(_.last(arr)); // 12