5주차_TIL

01 Dec 2020 - 3 minute read

• 201130 DAY21: Node.js, package.json, git workflow
• 201201 DAY22: 화살표 함수, this, call, apply, bind
• 201202 DAY23: ESLint

201130 DAY21: Node.js, package.json, git workflow

Node.js

• JavaScript 런타임
• 런타임이란, 어떤 프로그래밍 언어가 동작할 수 있는 환경(프로그램) // 자바스크립트 런타임은 브라우저와 Node.js
• javascript에서 작성한 코드를 브라우저에서 동작시킬 필요 없이 Node.js를 통해 실행시킬 수 있다.
• nvm(node version manager): 다양한 node version을 설치하고 관리할 수 있는 프로그램
• nvm ls // nvm install 버전 // nvm use 버전

package.json

• npm(node package manager): 필요한 모듈을 다운로드 할 수 있는 모듈 스토어. npm 자체로 명령어로서 활용됨
• package.json: 프로그램을 실행시키기 위해 필요한 모듈들에 대한 정보, 프로그램을 실행시키는 방법, 프로그램을 테스트하는 방법 등이 명시된 파일
• 프로그램을 실행시키기 위해 필요한 실제 모듈은 node_modules라는 폴더에 들어가있고, package.json은 어떤 모듈인지만 명시해놓는다.
• npm install 명령어로 package.json에 적힌 모듈을 다운받는다. => node_modules 디렉토리가 생성된다.
• dependencies: 이 프로젝트가 돌아가기 위해 반드시 필요한 모듈들이 무엇인지 적혀있음
• devDependencies: 이 프로젝트를 개발하는 환경에서 필요한 모듈들이 무엇인지 적혀있음.
• scripts: npm으로 실행시킬 수 있는 명령어가 정의되어 있음.

git workflow

• pair와 작업 시 서로의 repository를 연결한다. // git remote add pair URL -> git remote -v
• commit, push 후 pull로 바뀐 코드를 가져와 pair programming 진행. // git pull pair master
• conflict: 똑같은 파일에 두 사람이 똑같은 라인을 동시에 고치고 push/commit 할 때 충돌이 발생한다.
• 충돌을 해결하기 위해 git pull origin master -> 수정 후 저장한다.

git branch

• 브랜치: 분리된 작업 영역
• 독립된 작업 공간으로, 원본에는 영향이 가지 않는 사본. 여러 개의 branch를 생성 가능하며, 각각의 브랜치는 서로 영향을 주고받지 않는다.
• 브랜치 생성
  1. 작업 공간 옮기기: git checkout branchName
  2. 브랜치 생성: git checkout -b branchName // -b는 브랜치 생성 + 작업 공간 이동의 두 가지 일을 한번에 해주는 명령어이므로 꼭 써준다.

201201 DAY22: 화살표 함수, this, call, apply, bind

Arrow Function

• function 키워드를 화살표로 축약할 수 있다.
• 본문에 return만 있을 경우, return도 생략할 수 있다. 괄호()를 사용할 수 있지만 중괄호{}는 사용 불가

 const add = (x, y) => {
  return x + y
 }
 
 // return 생략 가능
 const add = (x, y) => x, y

• 본문이 두 줄 이상일 경우 중괄호와 return 생략

 const adder = function(x) {
  return function(y) {
    return x + y
    }
  }
 }
 
 //
 const adder = x => y => x + y

• 화살표 함수는 call, apply, bind를 사용할 수 있다.
• 화살표 함수의 실행은 this를 결정짓지 않는다.

this

• this: 함수 실행 시 호출(invocation) 방법에 의해 결정되는 특별한 객체. 맥락에 따라 다르게 결정된다.
• method 호출 시 this는 부모 객체에 바운딩된다. // obj.foo()
• new 키워드를 이용한 생성자 호출 시 새롭게 생성된 인스턴스(객체)에 바운딩된다. // new Foo()

• call/apply 호출 시 첫번 째 인자로 전달된 객체에 바운딩된다. // foo.call()

  foo.apply()

call, apply

• call, apply 호출은 명시적으로 this를 지정하고 싶을 때 사용한다. 첫번째 인자가 항상 this가 된다.
• apply는 두 번째 매개변수가 배열의 형태로 들어간다.

 foo.call(thisArg[, arg1[, arg2[, ...]]])
 
 foo.apply(thisArg, [argsArray])

bind

• call과 비슷하게 this 및 인자를 바인딩하면서, 당장 실행하는 것이 아니라 바인딩된 함수를 리턴한다.
• 첫 번째 인자가 항상 this가 된다.

 foo.bind(thisArg[, arg1[, arg2[, ...]]])

• 이벤트 핸들러: 이벤트 객체 대신 다른 값을 전달하고자 할 때 bind 사용

users.forEach(function(user) {
  let btn = document.createElement('button')
  btn.textContent = user
  btn.onclick = handleClick.bind(user) 
  target.appendChild(btn)
});
  
  
function handleClick() {
  console.log(this)
}

• setTimeout: 시간 지연을 일으킨 후 함수를 비동기적으로 실행하게 하는 함수 // 명시적으로 항상 window 객체를 this 바인딩한다.

 printAsync() {
  setTimeout(this.printArea.bind(this), 2000)
 }
 //
 printAsync() {
  setTimeout(() => {
    this.printArea()
  }, 2000)
 }

201202 DAY23: ESLint

ESLint

• ECMAScript/JavaScript 코드를 점검하는 tool

• 코드의 일관성을 유지하고 버그를 피하기 위해 사용된다.
  

• 설치

  // npm을 이용한 ESLint 설치
  $ npm install eslint --save-dev
  
  // configuration file(설정 파일)
  $ npx eslint --init

• rule 설정

  1. no-undef : 정의되지 않은 변수 참조 시 에러 (ReferenceError)
  2. no-unused-vars : 변수가 정의된 후로 사용되지 않았을 경우 에러 // 불완전한 리팩토링(기능을 유지하면서 코드가 읽기 좋게 변경되는 것)

  // .eslintrc.js || .eslintrc.json 파일
  {
   "extends": "eslint:recommended"
  //
   "rules": {
     "semi": ["error", "always"]
     "quotes": ["error", "double"]
   }
  }
  
  // error level 설정
  // "off" || 0 : rule 해제
  // "warn" || 1 : rule 경고
  // "error" || 2 : rule error

• 환경 정의

  어떤 환경에서 사용 중인지 정의해준다. 사용 중인 환경의 전역 변수를 미리 정의하여 불필요한 오류를 줄인다. 설정파일에서 ‘env’ 키를 이용한다.

  {
    "env": {
        "browser": true,
        "node": true,
        "mocha": true
    }
  }