- node.js vs browser
- npm과 package.json
- 화살표 함수
- 모듈화
node.js vs browser
node.js의 오해
나는 node.js를 백엔드에서 사용하는 언어로 알고있었다.
하지만 앞 블로깅에서 적었듯 자바스크립트를 실행하는 런타임인 것이다. 백엔드, 프론트엔드 어디에서든 사용되는 언어가 node이다.
node.js와 browser의 차이점
node.js는 DOM이 존재하지 않는다.
즉, window, document등의 객체를 사용할 수 없다.
그렇다면 전역 변수는 어떻게 다룰수 있을까?
node에는 global키워드가 존재한다.
scope의 범위가 모듈에 영향을 많이 받는다.
또한, node.js에는 fetch가 존재하지 않기때문에 서버에 요청시 다른 방법을 사용한다는 점도 다르다.
프론트엔드에서 node.js
프론트엔드 개발또한 다양한 node.js의 모듈을 활용한다.
npm을 사용하는것이 방법이고, 또한 CLI환경에서 다양한 형태의 빌드 패키징 배포등등을 처리하는 경우에도 node를 사용하기 때문에 프론트엔드 개발자도 학습을 해야된다고 생각한다.
npm과 package.json
프로그램은 다양한 라이브러리 혹은 모듈들의 집합체라고 할 수 있다.
우리가 개발을할 때 모든것을 만들어 사용하지 않는다.
프로젝트의 기간이 있는데 기능을 만들어서 사용하면 시간이 부족하고, 직접 만들었다고 하는 기능이 검증이 안되어있기 때문이다.
그래서 우리는 이미 잘 만들어져있는 기능(모듈)을 가져와 사용한다.
이렇게 남이 만들어진 모듈을 node에서는 npm module이라고 하고, 이것들의 정보를 담아둔 곳이 pakage.json이다.
npm
node의 환경에서 외부 라이브러리를 다운받기위한 방법중 하나가 npm이다.
Node Package Manager라는 의미로 맥에서의 app store와 비슷하다고 생각할 수 있다. 모듈들이 모여있는 모듈 저장소.
macOS의 패키지 매니저는 brew이듯 node에서는 npm에서 모듈들을 다운한다.
package.json
그렇다면 npm에서 모듈을 다운받는다고 해도, 만약에 내가 아닌 다른사람이 개발한 프로젝트를 실행하기위해서는 어떤 모듈을 다운받아야하는지 파악하는데 어려움이 존재한다.
그래서 프로젝트마다 어떠한 모듈을 받아야 실행이 되는지 어떤 모듈이 개발하는데 필요한 모듈인지에 대한 정보가 담겨있는 파일이 존재한다. 그 파일은 package.json이다.
이 파일을 보면 내가 처음 받은 프로젝트라도 어떠한 모듈이 사용되는지 알 수 있다.
다만, 이 파일에는 어떤 모듈을 사용하는지에 대한 정보만 담겨있기때문에 npm을 이용하여 모든 모듈을 다운받아야 한다.
npm install 이것이 모든것을 해결해 줄것이다.
이 명령어를 CLI에 입력한다면 package.json에 명시된 디펜던시들은 자동으로 다운이 된다.
이렇게 명시만 한 이유는 필요한 모듈까지 포함하여 넘겨주기에는 파일도 많아지고 필요없는 일이기 때문이다. 정보만 표시한다면 직접 다운받게 하는것이 서로에게 편할것이다.
Arrow Function
화살표 함수(arrow function)은 function이라는 키워드를 생략하고 화살표(=>)로 축약해서 표시한다.
// 함수 선언식 function add(num1, num2) { return num1 + num2; } // 함수 표현식 let add = function(num1, num2) { return num1 + num2; } // 화살표 함수 let add = (num1, num2) => num1 + num2;
화살표 함수는 function키워드를 생략한다.
또한 { }안의 코드가 한줄일때 { }또한 생략이 가능하며,
return또한 생략이 가능하다.
하지만 로직이 길어진다면 { }를 사용하는것이 가독성이 좋으며,
중괄호를 사용하며 return키워드도 꼭 작성해야한다.
module
npm을 통하여 내려받은 모듈은 스크립트내에서 아래와 같이 불러와진다.
const 변수 = require('모듈이름');
다른 스크립트를 불러올 때
해당 스크립트에서 다른 스크립트를 불러올 때도 require키워드를 사용한다. 즉, 모듈이라는것은 결국 다른 스크립트파일이라고 볼 수 있다. 아래와 같이 내가 만든 스크립트를 불러온다면
// script1.js 내부 const script2 = require('./script2.js');// script2.js 내부 console.log('this is module 2');
require구문을 통하여 script2.js를 불러온다.
불러올 때 scirpt2.js의 코드가 실행이 된다.
하지만 변수script2에는 무엇이 저장될까?
이것은 sciprt2.js에서 내보내는게 없기때문에 비어있는 객체가 리턴이 될것이다.
script2를 출력한다면 {}가 나온다.
그렇다면 콘솔에 찍히는 문자열을 가져오기위해서는 어떻게 해야할까?
아래와 같이 작성을 하면 된다.
module.exports = 'this is module 2';module.exports.hello = 'this is module 2';
위 코드의 차이점은 첫번째는 require로 받아왔을때 문자열이지만,
두번째는 받아왔을때 리턴되는게 객체이며 키로 hello라는 키와 값으로 this is module 2'라는 값을 가진객체가 반환된다.
질문 외부 스크립트를
require구문을 통하여2번불러올 경우 스크립트는 2번 실행이 될까?
답 NO
위와 같이 모듈 노출과 모듈 호출하는방법을 CommonJS 모듈 시스템이라고 한다.
CommonJS
CommonJS는 node.js환경에서 사용이 가능하다.
- 모든 모듈은 자신만의 독립적인 실행 영역이 있어야한다(모듈 스코프)
- 모듈 정의는 전역객체인 exports 객체를 이용한다.
- 모듈 사용은 require 함수를 이용한다.
module.exports vs exports
- exports는 module.exports 사용을 도와주는 helper
- exports는 module.exports를 참조
- module.exports에 뭔가가 붙어있다면, exports는 무시된다.(섞어 쓰지말자)
