__Immersive Prep

Runtime

  • 런타임란?

    • 프로그래밍 언어가 실행되는 곳

Node.js

  • Node 란?

    • 자바스크립트 런타임, V8엔진 등장(속도 향상, 크롬 브라우저의 V8 기반으로 nodejs사용해서 주로 웹서버 구축할수 있는 플랫폼 이다.

  • V8 크롬 자바스크립트엔진?

  • 자바스크립트를 기계어로 컴파일 해주는 역활을 해주는것이 V8

  • 실행 시키는 법

    • node.js 환경에서 node <file.name> 명령을 하면 작성한 코드가 작동합니다.

  • 1.runNode.js 파일을 만든다.


const testFunction = function(arg){
  console.log("Arg is : ", arg);
}

testFunction(20);
    1. node 를 명령어 입력

$ node runNode.js

NVM(Node Version Manage)

  • NVM 이란?

    • 다양한 Node version를 설치하고 관리할 수 있는 프로그램
    • 버전 관리를 위해 NVM 이라는 도구를 사용
    • NVM역시 하나의 프로그램이므로 설치해야 합니다.

Node.js 역시 하나의 프로그램이니 당연히 버전이 있습니다. 일반적으로 Node.js 홈페이지에 들어가서 Node를 설치하면 가장 최신 버전과 LTS 버전(LTS는 Long Term Support 약자로 장기 서포트를 보장한다는 의미를 담고 있습니다. )을 보여줍니다. 하지만 사실 저 두 가지 버전뿐만 아니라 많은 버전들이 있습니다. 개발을 하다 보면 다양한 Node.js 버전에 대응해야 할 일이 생깁니다. 예를 들면 Node 10.13.0 버전에서는 내가 짠 코드가 잘 돌아갔는데, Node 10.13.0 버전에서는 안 돌아간다! 하는 일들이 생깁니다. 그럼 Node 10.13.0에서 테스트를 해봐야겠죠?!

  • 문제는 여기부터입니다.

내가 설치한 Node는 10.13.0 버전이라고 해봅시다. 그럼 우리는 설치한 Node를 업데이트해야겠죠?! 업데이트는 쉽게 할 수 있습니다. 근데 다시 이전 버전으로 가려면 어떻게 해야 할까요? Node를 지우고 다시 설치하면 되겠죠? 근데 이렇게 버전을 옮길 때마다 지우고 설치해야 한다면 작업할 때 마다 엄청 귀찮겠죠?! 이런 문제를 NVM이 해결해 줍니다.

  • 실행 하는 법

nvm ls // 현재 버전 알아보기

nvm install 10.13.0 // 새로운 node version 을 설치하고 싶다면  이렇게 입력

nvm use 12.13.0 //  12.13.0 버전을 사용하고 싶다면 이렇게 * 버전이 이미 설치되어있어야함*


// 정리해보면 NVM은 다양한 Node version를 설치하고 관리할 수 있는 프로그램 입니다.

정말 편하게 Node를 설치하고 version을 바꿀 수 있습니다.

정리해보면 NVM은 다양한 Node version를 설치하고 관리할 수 있는 프로그램 입니다.

NPM (Node Package Manager)

  • NPM 이란 ?

    • 일종의 앱스토어입니다. 필요한 모듈을 다운로드할 수 있는, 모듈들이 모여있는 모듈 스토어입니다.
    • 자바스크립트 패키지 매니저이다.
    • 하나의 명령어 처럼 사용된다.
    • 예) npm start

  • 패키지 설치

    • Node.js에서 사용할 수 있는 모듈인 패키지를 설치할 때에는 npm install 명령어 뒤에 설치할 패키지 이름을 지정한다.

NPM은 Node Package Manager로 일종의 앱스토어입니다. 필요한 모듈을 다운로드할 수 있는, 모듈들이 모여있는 모듈 스토어입니다. 앞으로 필요한 모듈은 대부분 NPM에서 다운로드해서 사용하면 됩니다.


// 이렇게 명령 한다. 
$ npm install <package>


// 예 emoji package 를 설치한다고 가정하자.
// Node.js 환경에서 emoji를 지원하는 node-emoji를 설치해 보자. 



// 1.먼저 적당한 위치에 프로젝트 디렉터리를 생성하고 프로젝트 디렉터리로 이동한다.

$ mkdir emoji && cd emoji

// 2. npm install 명령어로 node-emoji 패키지를 설치한다.

$ npm install node-emoji

  • 지역 설치와 전역 설치

    • npm install 명령어에는 지역(local) 설치와 전역(global) 설치 옵션이 있다

    • 옵션을 별도로 지정하지 않으면 지역으로 설치되며, 프로젝트 루트 디렉터리에 node_modules 디렉터리가 자동 생성되고 그 안에 패키지가 설치된다.

    • 지역으로 설치된 패키지는 해당 프로젝트 내에서만 사용할 수 있다.

    • 지역 설치


$ npm install <package>
  • 전역 설치
  • 전역에 설치하는것을 권장하지 않음
  • npm 을 적용할 디렉토리 안에 설치한다.

$ npm install -g <package>

  • 전역에 설치된 패키지는 OS에 따라 설치 장소가 다르다.

  • macOS의 경우


/usr/local/lib/node_modules
  • 윈도우의 경우

c:\Users\%USERNAME%\AppData\Roaming\npm\node_modules
  • 자주 사용하는 npm 명령어
 
 패키지 설치

// 로컬 설치
$ npm install <package-name>

// 전역 설치
$ npm install -g <package-name>

// 개발 설치
$ npm install --save-dev <package-name>

// package.json의 모든 패키지 설치

$ npm install

//패키지 제거

 로컬/개발 패키지 제거
$ npm uninstall <package-name>

 전역 패키지 제거
$ npm uninstall -g <package-name>


// 패키지 업데이트

$ npm update <package-name>

// 전역 설치 패키지 확인

$ npm ls -g --depth=0

// package.json scripts 프로퍼티의 start 실행
$ npm start

// package.json scripts 프로퍼티의 start 이외의 scripts 실행

$ npm run <script-name>

// 전역 패키지 설치 폴더 확인
$ npm root -g

/usr/local/lib/node_modules


파인더 오픈

$ open /usr/local/lib/node_modules

  • package.json 란?

    • 프로그램을 실행시키기 위해 필요한 모듈들이 무엇인지 적어놓는 공간이다.
    • 내가 개발한 프로그램에서 필요한 모듈를 package.json에 작성해놓으면, 사용자는 파일을 보고 필요한 모듈만 설치하면 되기 때문에 효율적으로 작업할 수 있다. 카달로그와 같은 역할을 한다.
    1. dependencies *이 프로젝트가 돌아가기위해 반드시 필요한 모듈들이 무엇인지가 적혀 있습니다.

 "dependencies": {
    "react": "^16.8.6",
 }
    1. devDependencies
    • 이 프로젝트를 개발하는 환경에서 필요한 모듈들이 무엇인지가 적혀 있습니다. 예를 들면 코드 모양을 잡아주는 lint나 테스팅 모듈처럼, 실제 프로젝트 동작에 직접적으로 영향을 주지 않는 모듈들을 명시합니다.
"devDependencies": {
    "jest": "^2.3.0",
  	"eslint" : "^2.0.0"
  }
    1. scripts
    • npm 으로 실행시킬 수 있는 명령어를 정의합니다. 명령어를 입력하면 어떤 동작을 해야하는지가 적혀 있습니다. 예를들면 npm test 명령어를 입력하면 “test파일을 node 에서 실행시켜라!” 하는 내용들이 들어있습니다. 만약 npm test와 같은 명령어를 실행시켰는데 정의되지 않은 명령어 라는 오류 메시지가 나오면, package.json 파일 scripts 에 해당 명령어가 정의되어 있는지를 확인해 보시면 됩니다.

"scripts": {
    "start": "node app.js",
    "test": "node test.js",
  }

Testing & Linting

  • 코드 퀄리티를 높이기 위해 testing 과 Linting 한다.

    1. testing목적은?
    • 코드가 맞게 작성되어있는지 확인하기 위해 test 를 한다.
      • Testing? 작성한 코드가 의도대로 동작하는지, 결함은 없는지 확인하기 위해 반드시 필요한 과정입니다

testing Tool (3가지 테스트 방법이 있다. )

  * 1.end to end test

  * 2.integration Test

  * 3.Unit test

  • karma, mocha, chai, jest, jasmine 등과 같은 툴을 사용합니다.

  • 하나의 기능을 테스트하는 Unit test 에는 페이스북에서 만든 jest 라는 것이 있다.

  • 3.Linint 목적은?

    • 우리가 지정한 코드스타일을 지키는지 안지키는지 체크해주는 도구이다. 일관된 코드스타일을 체크해주므로 다른사람과의 코드를 합칠때 충돌을 줄일수 있다.

예를 들어 세미클론을 철저히지키는 사람과 빼먹는 사람이 코드를 합치면 충돌과 오류가 나기때문에 그것을 방지하기 위해 Linint 을 사용한다.

코드 스타일을 일관적으로 마추기 위해 처음부터 setting 하고 들어간다.

코드 스타일을 지키는지 체크해 주는 툴입니다. 읽기 좋은 코드, 유지 보수하기 좋은 코드를 만드는 데 큰 도움이 됩니다.

  • Linint 을 적용하기위해 Eslint 사용한다.

    • ESlint 는 하나의 테스트해주는 도구이다.
    • 엄격하고 내가 원하는 것만 테스트할수있는 장점이 있다.

  • 협업할때 필수 툴 ESlint, Jest,Prettier

This

this란?

  • this === execution context 라고도 말한다.
  • 콜타임에 따라서 알게된다.
  • An object that the invoked function points to when executing
  • 호출된 함수가 실행할 때 가리키는 특정 객체입니다

execution 안에는 4 가지가 담긴다.

* scope내 변수 및 함수 (Local, Global)

* 전달인자 (arguments)

* 호출된 근원 (caller)

* this

this 는 5가지 patterns 이 있다.

  // 1. global this
  // 2. function invocation
  // 3. method invocation
  // 4. construction mode
  // 5. call(), .apply()
    1. global this

this === window  같다 나온다
    1. function invocation

함수 안에서도 호출될때 window.name이 되어서 Global variable 호출된다.


var name = "Global variable"

function outer() {
	function inner()  {
	console.log(this.name); // Global variable
	}
inner()
}

outer();
    1. method invocation

여기서 this 는 counter 이다.

let counter = {
  value : 0,
  increment: function() {
	this.value++ ;
  },
  getValue: function() {
	  return this.value;
  }
}

counter.increment() 
count.getValue()

  • 4 construction mode (생정자 모드 )

    • 주인이 누구냐에 따라서 결정된다.
    • new 키워드를 쓰면은 this 는 그냥 인스턴스다


function Car(brand,name,color) { // Car() 는 클라스
	
	this.what_brand = brand;
	this.what_name = name;	
	this.what_color = color;
}

// 2. 클라스 함수를 변수에 담고 파라미터 들어갈 값들 넣는다. 
 

let a1 = new Car("GM","avante","black");  //인스턴스 생성
let a2 = new Car("GM","avante","black");  //인스턴스 생성
let a3 = new Car("GM","avante","black");  //인스턴스 생성
let a4 = new Car("GM","avante","black");  //인스턴스 생성


// 3.this는 값은 ?

// 경우에 따라 계속 변한다 
// car 의 인스턴스인 a1,a2,a3,a4 가 this가 되는것이다. 


a1.what_brand // a1 은 this
a2.what_brand // a2 은this
a3.what_brand // a3 은this
a4.what_brand // a4 은this

  • 5 call(), .apply() invocation

    • 첫번째 인자가 무조건 this 이다.

    • call(this,1,2); this 값에 들어갈 obj 가 this 다

    • apply(this,[1,2]); this 값에 들어갈 obj 가 this 다.


var add = function  ( x , y ) {
	this.val = x + y ;    // 여기서 this 는 ?
 
var obj = { 
val : 0
}; 


add.call(obj,2,3);  // 5 동일다.  // this 는 obj

add.apply(obj,[2,3]); // 5  동일하다.  //  this 는obj
Last updated on Apr 29, 2019