Modern JS

Seonmi Choi·2021년 4월 12일
0

Start again!!!

목록 보기
1/40

Node.js 공식 사이트의 API 문서항목

node.js에서 사용하는 package.json과 npm script에 대해 이해할 수 있다.
npm이 무엇인지, 모듈이 무엇인지 이해할 수 있다.

npm 패키지, npm 모듈, npm dependency 는 전부 동일한 대상을 가리킴.
"독립적인 하나의 완성된 조각"이라는 의미로 패키지 라는 용어를 사용하며, 다른 프로그램에서 패키지를 가져다 쓰면 모듈 이라고 부릅니다. 다른 프로그램에서 이 패키지를 모듈로 사용하면, 프로그램을 실행할 때 이 모듈에 의존할 수밖에 없습니다. 이때는 dependency(의존성)라고 부릅니다."
npm module : 남이 만들어 놓은 모듈, 모듈 Store(like App store)
ex) 생태계 패키지 매니저 Linux:apt, macOS:brew, node.js:npm
package.json: 어떤 모듈이 들어가 있는지 알수 있는 카달로그

npm install 명령어를 입력하시면, package.json에서 필요하다고 하는 모듈을 다운받음. npm install이 완료되면 node_modules 디렉토리가 생긴 걸 확인할수 있음.
gitignore파일에 node_modules을 넣어서 대용량의 파일이 전송되는 것을 막는다.

npm install을 이용하면, npm에 있는 모듈을 설치할 수 있는데, 이 때 --save-dev (생략 가능)옵션과 함께 설치하면, 자동으로 devDependencies에 추가됨.

package.json이 필요한 이유 : 협업!!
npm 패키지 장점:이미 누군가 개발해놓은 유용한 모듈을 이용 레고를 조립하듯 앱 만들기 가능

devDependencies와 dependencies의 차이점을 이해할 수 있다.
dependencies : 프로젝트가 돌아가기 위해 반드시 필요한 모듈(ex) React, React-dom,underscore)

$ npm install react 
$ npm install --save react
{
  "name": "modern-javascript-koans",
  "version": "1.0.0",
  "description": "",   // 프로젝트에 관한 정보
  "main": "index.js",
  "scripts": {
    "test": "mocha modern-js-koans/*.js --sort",
    "report": "mocha modern-js-koans/*.js --sort --reporter @mochajs/json-file-reporter",
    "submit": "codestates-submission" //CLI에서 사용가능한 명령
  }, // npm run test, npm run report, npm run submit...
  "keywords": [],
  "author": "codesatates",
  "dependencies": {
    "@codestates-cc/submission-npm": "^1.1.1"
  },
  "devDependencies": {
    "@mochajs/json-file-reporter": "^1.2.1",
    "chai": "^4.2.0",
    "mocha": "^8.2.0",
    "sinon": "^9.0.3"
  } //개발과 관련된 dependency들
}

화살표 함수, Spread/Rest 문법, 구조 분해 할당을 사용할 수 있다.
CommonJS의 도입 배경을 이해할 수 있다.

refer:https://d2.naver.com/helloworld/12864
모든 모듈은 자신만의 독립적인 실행 영역이 있어야 한다.
모듈 정의는 전역객체인 exports 객체를 이용
모듈 사용은 require함수를 사용한다.

module.exports 대신에 exports를 사용할 수도 있습니다. exports는 일종의 축약형(shortcut)입니다. exports는 module.exports를 참조합니다. 이러한 모듈 노출 방법과, 불러오는 방법을 CommonJS 모듈 시스템이라고 부릅니다.
node.js에서 사용하는 require 문법 및 module.exports, exports에 대해 이해할 수 있다.
exports는 module.exports 사용을 도와주는 helper(like 변수)
=>함수는 담을수 있으나 객체는 담을 수 없다
exports는 module.exports를 참조할 뿐!!!
module.exports에 뭔가가 이미 붙어있다면 exports는 무시...
=>섞어쓰면 안됨
refer : https://nodejs.org/dist/latest-v14.x/docs/api/modules.html#modules_module_exports
https://nodejs.org/dist/latest-v14.x/docs/api/modules.html#modules_cycles
모듈이 어떤 식으로 불리는 지 이해할 수 있다.

클래스와 인스턴스라는 용어를 이해할 수 있다.

class Counter {
  constructor() {
    this.value = 0; // 생성자 호출을 할 경우, this는 new 키워드로 생성한 Counter의 인스턴스입니다
  }
  increase() {
    this.value++
  }
  decrease() {
    this.value--
  }
  getValue() {
    return this.value
  }
}

let counter1 = new Counter() // 생성자 호출
counter1.increase()
counter1.getValue() // 1

new 키워드의 사용법을 이해할 수 있다.
class 키워드의 사용법을 이해할 수 있다.
현실 세계의 모델을 바탕으로 클래스의 메소드와 속성을 디자인할 수 있다.
속성과 메소드
클라스 안에 속성과 메소드를 정의 하고 인스턴스에서 사용을 한다.
this와 call, apply, bind와 같은 함수 메소드의 작동을 이해할 수 있다.
this에 대해서 배울 때는, 함수가 무엇이냐가 중요한 것이 아니라, 어떻게 실행되는 것인지가 중요

Function 호출 //this는 전역객체 window

foo()

Method 호출 // 부모객체 obj

obj.foo()

new 키워드를 이용한 생성자 호출 // 인스턴스 Foo

new Foo()

.call 또는 .apply 호출 // 첫번째 인자

foo.call()
foo.apply()

.call, .apply 호출은 명시적으로 this를 지정하고 싶을 때 사용합니다. 첫번째 인자가 항상 this값이 됩니다.

profile
I am not afraid of learning!

0개의 댓글