[TIL] 2021.02.24

김경태·2021년 2월 24일
0

이머시브 과정 3일차 되는 날이다.
오늘은 최신 자바스크립트의 문법에 대해서 첫 발걸음을 떼는 날이었다. 배운것들을 바탕으로 블로깅을 하면서 다시한번 되짚어 보는 시간을 가져보자 !

🔥Today Lesson🔥

  • node.js vs 브라우저
  • package.json
  • CommonJS
  • 화살표 함수

node.js vs 브라우저🤸‍♀️

저번 시간에 node.js가 자바스크립트의 런타임 이라는 것을 배웠다. 그러면 node.js는 브라우저와 어떠한 차이점이 있을까?

node.js에서 할 수 없는 중요한 것 중 한가지만 봐도 차이점을 알수있다.

node.js에는 DOM이 존재하지 않습니다.

이 얘기는 window document 객체가 존재하지 않는다는 것이다.

그럼 전역변수는 어떻게 다루는가?

node.js에서는 window대신 global 이 존재한다.

다만 완전히 똑같지는 않다. 이부분을 더 배우기 위해 CommonJS에 대해서 더 공부해보자 !

package.json🤸

package.json은 프로젝트의 필요한 npm에 대한 정보를 담아둔 곳 이라고 할 수 있습니다.

그럼 npm은 무엇인가?

npm(Node Package Manager)은 일종의 앱스토어입니다.

필요한 모듈을 다운로드할 수 있는 모듈들이 모여있는 모듈 스토어 라고 불리기도 합니다.

npm 명령어

npm을 설치 할 수 있습니다.
$ npm install

devDependencies : 개발 시 필요한 라이브러리들이 담겨 있습니다.

자동으로 devDependencies에 추가됩니다.
$ npm install --save-dev

dependencies : 진짜 기술스펙으로 사용되는 라이브러리들이 담겨 있습니다.

자동으로 dependencies에 추가됩니다.
$ npm install --save

scripts : CLI에서 사용가능한 명령을 기술합니다.
유용한 scripts 예제로는 실행, 테스트, 코드검사 등이 있습니다.

$ npm run <스크립트 이름>

CommonJS🤸‍♂️

CommonJS란 자바스크립트 모듈을 만들기 위한 일종의 규칙이다.
브라우저에서는 다른 script파일을 불러오기 위해 <script>태그를 사용하였지만 node.js에서는 다르게 접근하여야 한다.

CommonJS 명령어
다른 스크립트를 불러올 require()를 사용해야 한다.
require()module.exports를 리턴한다.

동일한 디렉토리에 두개의 파일이 있다고 가정 해보고 아래 코드를 보자

// foo.js
const a = 10;
// bar.js
const foo = require('./foo.js') // ./는 현재 디렉토리 입니다.
console.log(a);

아직은 이제 bar.js에서 실행하면 오류가 뜬다 그 이유는 아직 foo.js를 노출 시키지 않았기 때문이다. 이때 다른 스크립트 파일에서 사용 할 수 있게 하기 위해서는 module.exports를 사용한다.

 // foo.js
const a = 10;
module.exports.a = a;

이제 bar.js를 실행하면 원하는 값이 나오게 될 것 이다.

// bar.js
const foo = require('./foo.js')
console.log(a); // -> 10

module.exports 와 exports의 차이
작성할때 module.exportst를 사용해도 되고 exports를 사용해도 된다. 하지만 두개를 동시에 사용해서는 안된다.

그이유는 무엇일까?

바로 node.js의 모듈 시스템에서 실제로 익스포트 되는 객체는 module.exports이고, exports는 이를 참조하는 변수에 불과하기 때문이다.

화살표 함수🤸‍♀️

화살표 함수는 function키워드를 화살표로 축약 시켜 놓은 형태이다.

const add = (x, y) => { 
     return x + y;
}

// 화살표 함수 안에 return문만 있을경우 return을 생략 할 수 있다.
const add = (x, y) => (x + y); 
// 이때 주의해야 할 점은 {}은 사용하면 안된다.
// ()는 사용해도 되고 안해도 된다.

// 화살표 함수는 클로저를 표현할때 더욱 강력하다.
const add = (x) => {
  return (y) => {
    return x + y;
  }
}
// 더 간단하게 나타내 보자.
const add = x => y => x + y;
// 파라미터가 단 한개라면 ()생략 가능하다.
// 클로저는 연속된 여러 개의 화살표로 표시할 수 있다.

하루를 마치며👋

오늘은 node.js에 대해서 쫌 더 깊게 공부한거 같다. 아직은 익숙치 않아서 이런이런 내용이 있다는건 알겠는데 머릿속에 정리가 잘 안되는거 같다... 계속 공부하다 보면은 어느정도 능숙해 지지 않을까 ? 그래도 화살표 함수는 완벽하지는 않지만 생각보다 할 만 했어서 다행이다. 화살표 함수도 능숙히 사용 할 수 있을때까지 쫌 더 열심히 해보자 👀

profile
비전공자로 시작한 개발자 지망생입니다!

0개의 댓글