Today What I Learned

Javascript를 배우고 있습니다. 매일 배운 것을 이해한만큼 정리해봅니다.
sprint1에서 배운 내용들인데 sprint2 지나고서야 글로 다시 정리해봅니다.😅

1. Run time과 Node.js 그리고 NVM

1. What is Run Time?

• 어떤 프로그래밍 언어가(JS 같은) 동작하는 프로그램/환경
• JS는 애초에 브라우저라는 런타임 안에서 동작할 수 있었지만,
  node js라는 새로운 JS 런타임이 나온 후에는 브라우저가 아닌 다른 환경에서도 실행(ex: 컴퓨터 서버)이 가능해짐

2. Node.js

• 브라우저와 연결되지 않은(브라우저 바깥의) 상태에서 Java Script를 실행할 수 있는 환경(런타임) -> JS의 확장성을 더해줌!
• Node JS의 버전 관리 필요성: node js 또한 프로그램이고 계속해서 업데이트가 이뤄지기 때문에 하위 호환성을 고려하여 버전을 관리해줘야 한다. 이전 버전으로 돌아가거나 새로운 버전으로 업데이트하는 경우가 잦기 때문에 이 과정을 도와주는 버전 관리 프로그램이 필요하다.

3. NVM

• What is NVM? Node.js의 버전 관리(Node Version Manager)를 위해 만들어진 대표적 프로그램
• NVM 설치하기 참고 링크: https://gist.github.com/falsy/8aa42ae311a9adb50e2ca7d8702c9af1
• NVM으로 node.js 관리하기 링크 : https://tutorialpost.apptilus.com/posts/nodejs/nvm-for-node-version-manager/

2. NPM과 Package JSON

1. What is NPM?

• 프로그램은 다양한 모듈의 합이라고 볼 수 있음.
  각 프로그램마다 사용하는 모듈이 상이하기 때문에 때마다 프로그램에 맞춰 필요한 모듈을 사용할 수 있도록
  1) 모듈을 다운로드하고,
  2) 모듈이 모여있는 스토어의 역할을 하는 것이 NPM(Node Package Manager)이다.

2. What is Package.json?

• 프로그램에 따라 필요한 모듈을 사용하기 위해 NPM을 사용한다면, “필요한 모듈이 무엇인지"를 알려주는 기능을 하는 것이 Package.json이다.

• Package.json에 담겨있는 것들: 프로그램 실행을 위해 필요한 모듈의 정보가 json 형태로 작성되어 있다.
  - dependencies: 프로젝트 실행을 위해 필요한 모듈 정보(모듈 이름, 버전)가 담겨있음
  - dev dependencies: 프로젝트 개발을 위해 필요한 모듈이 담겨있음
  ex) jest ver, eslint ver 등 실제 프로젝트 동작에 직접적인 영향을 주지 않는 모듈
  - script: npm으로 실행시킬 수 있는 명령어

  //ex)
  "scripts" : {
  "start" : "node app.js",
  "test" : "node test.js"
  }
  // npm test를 터미널에 넣으면 “node test.js”가 실행됨

• 주의: package.json에는 모듈 정보가 담겨있을 뿐 실제 모듈이 저장되는 위치는 node_modules라는 폴더

• package.json을 사용할 때 장점: 해당 사용자가 프로그램 이용을 위해 사용하는 모듈을 모두 전달해주지 않고 명시만 해준 후 사용자가 직접 npm을 이용해서 모듈을 사용할 수 있게 해준다.
  

3. Code Quality : Linting & Testing

1. Code quality

• 작성한 코드가 의도한대로 동작하는지, 결함이나 문제가 없는지, 코드 자체가 읽기 쉽고 유지보수에 용이한가 기준으로 code quality를 평가하는 것이 중요하다.

2. Testing

• 작성한 코드가 의도한대로 동작하는지, 결함이나 문제가 없는지를 도와주는 방법
• Testing Tool
  (1) End to End test
  (2) Integration test
  (3) Unit test : 하나의 기능을 테스트 하는 방법

1) Jest를 이용하여 Unit Test 하기

• Jest 설치 & 실행하기
  (1) 프로젝트 directory 의 root 에서 Jest 라이브러리를 개발 의존성(devDependencies)으로 설치
  명령어 : npm install --save-dev jest
  --save-dev 는 모듈을 개발 의존성으로 설치한다는 의미의 명령어로,
  해당 모듈은 package.json의 dependencies 가 아닌 devDependencies 에 저장
  (2) test 커맨드 지정: package.json 파일을 열고 test script를 jest로 수정

  //ex)
  "scripts": { "test": "jest" }

  (3) 설정을 마쳤다면 터미널에 npm test(혹은 yarn test)라고 입력하면 jest 커맨드를 실행 및 테스트 가능

• 버전을 골라서 Jest 설치하기 예)npm install jest@24.1.0

2) Jest에서 Matcher

• jest를 통한 테스트 결과값을 확인하기 위해서는 적절한 matcher 사용이 필요하다.
  [출처: 코드스테이츠]

3) Jest에서 Global Function

• Jest를 통해 테스트 실행을 위해 진행해야 하는 함수들
  [출처: 코드스테이츠]

3. Linting

1) Linter

• 함께 지정한 코드 스타일이 지켜지는지 아닌지 확인할 수 있게 도와주는 방법
• ESLint 관련 읽어볼 글 : https://poiemaweb.com/eslint

2) 다양한 Lint 체크 시점

• plugin for IDE : 코드를 작성하면서 에디터에서 lint 확인
• git hooks : git commit 전에 lint 확인
• CI : test를 진행할 때 lint 확인
  

3) eslintrc

• eslintrc 형식 보기
  [출처: 코드스테이츠]

• eslint 규칙을 제외하는 파일 설정
  (1) eslintignore 파일을 생생해서 그 안에 제외 파일 루트를 모두 넣기
  (2) 혹은 제외하고 싶은 파일 상단에 / eslint-disable /를 넣어주기