이머시브 과정 3일차 되는 날이다.
오늘은 최신 자바스크립트의 문법에 대해서 첫 발걸음을 떼는 날이었다. 배운것들을 바탕으로 블로깅을 하면서 다시한번 되짚어 보는 시간을 가져보자 !
저번 시간에 node.js가 자바스크립트의 런타임 이라는 것을 배웠다. 그러면 node.js는 브라우저와 어떠한 차이점이 있을까?
node.js에서 할 수 없는 중요한 것 중 한가지만 봐도 차이점을 알수있다.
node.js에는 DOM이 존재하지 않습니다.
이 얘기는 window
document
객체가 존재하지 않는다는 것이다.
그럼 전역변수는 어떻게 다루는가?
node.js에서는
window
대신global
이 존재한다.
다만 완전히 똑같지는 않다. 이부분을 더 배우기 위해 CommonJS에 대해서 더 공부해보자 !
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란 자바스크립트 모듈을 만들기 위한 일종의 규칙이다.
브라우저에서는 다른 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에 대해서 쫌 더 깊게 공부한거 같다. 아직은 익숙치 않아서 이런이런 내용이 있다는건 알겠는데 머릿속에 정리가 잘 안되는거 같다... 계속 공부하다 보면은 어느정도 능숙해 지지 않을까 ? 그래도 화살표 함수는 완벽하지는 않지만 생각보다 할 만 했어서 다행이다. 화살표 함수도 능숙히 사용 할 수 있을때까지 쫌 더 열심히 해보자 👀