Module & NPM

Module & Modularization

Module | any of a number of distinct(개별적인) but interrelated units from which a program may be built up or into which a complex activity may be analyzed.

 

브라우저에서 JS 파일은, 보통 html의 script 태그 안에 포함되어 실행된다. 이 때 하나의 html 파일에 여러개의 js 파일을 포함시킬 수 있고, 나중에 parse되는 파일은 먼저 parse 된 파일의 전체 코드를 참조할 수 있다. 노드에서도 서로 다른 js 파일의 코드를 참조할 수 있는데, 브라우저에서와는 달리 어떤 코드를 외부에 노출시킬 것인지를 명시적으로 작성해야 한다. 

 

+) 나중에 parse된 js 파일이 먼저 parse된 js 파일의 전체 코드를 참조할 수 있다는 것은, script 태그에 type="module" 속성을 적용하지 않았을 때의 이야기이다. 

How to modulize in node JS? | module.exports.~  

node를 설치하면 npm, npx가 따라서 설치되는데, 각각 node package manager/executor의 약어이며, package는 우리가 설치할 수 있는 모든 module(ex. react, express...)을 일컫는다. 

1. npm |  우리가  프로젝트에 import하는 모든 외부의 라이브러리를 package.json 파일에서 관리한다. npm을 이용하면 라이브러리의 설치, 삭제, 버전 업데이트를 할 수 있다. 뿐만 아니라 라이브러리를 import 하는 것을 더욱 간편하게 만들어 준다(확장자, 파일 경로 생략 가능).
2. npx |  라이브러리를 실행하는 역할을 한다. ex) npx tsc

require(' files ')

// math.js
// 1) 
const add = (x, y) => x + y;
const PI = 3.141592;
const square = (x) => x * x;

module.exports.add = add;
module.exports.PI = PI;
module.exports.square = square;

// 2)
const math = {
  add: add,
  PI: PI,
  square: square,
};

module.exports = math;

// 3)
module.exports.add = (x, y) => x + y;
module.exports.PI = 3.141592;
module.exports.square = (x) => x * x;

// 4) shortcut 
exports.square = square;

 

// app.js
// 1) 
const math = require('./math'); // math.js
console.log(math); // { add: [Function: add], PI: 3.141592, square: [Function: square] }
console.log(math.square(9)) // 81

// 2, 3) destructuring assignment
const {add, square} = require('./math');

 

1. module.exports | node JS에서 제공하는 객체 데이터로 텅 비어있다. 이 객체에 프로퍼티를 추가하면, 다른 파일에서 해당 프로퍼티를 참조할 수 있다. 
2. export | module.exports의 단축어
   • It allows a shortcut, so that  module.exports.f = ... can be written more succinctly as  exports.f = .... 
   • However, be aware that like any variable, if a new value is assigned to exports, it is no longer bound to module.exports( exports를 변수로 사용하지 말라는 이야기, ex)  const exports = "hi"  ). 
3. 아래 예제는 app.js 파일에서, math.js 파일에 정의된 객체를 모듈로 이용하고 있다. 

require(' directories ') 

require 함수의 인자는 파일 뿐만 아니라 디렉토리가 될 수 있다. 이 때 디렉토리에는 여러 개의 js 파일이 존재할 수 있는데, 모든 js 파일에서 export하고 있는 코드를 참조하는 것이 아니라 index라는 이름을 가진 js 파일이 export하고 있는 코드만을 참조할 수 있다. 

NPM  | Node Package Manager 

1. package란 어떤 개발자가 작성한 코드이며, 우리가 프로젝트에 포함시킬 수 있는 도구로 사용된다. 
2. npm은 다음 두가지의 의미를 갖는다.
   • 다른 개발자가 무료로 배포한 수많은 package가 모여있는 library이다.
     • node community라고 볼 수 있다. 
     • react, express도 이런 package 중 하나이다. 
   • node 프로젝트에 추가할 package를 쉽게 설치하고 관리할 수 있게 해주는 command line tool이다. CLI에 npm을 입력하면 가능한 명령어를 확인할 수 있다. 

 

$ npm

How to install packages? | npm install 

1. package를 설치할 폴더를 따로 만든다. 
2. npm 사이트에서 설치할 패키지의 이름을 정확히 복사한다(+ 해당 패키지의 사용법을 확인할 수 있다). 
3.  $ npm install -g 패키지 이름 
   • 해당 명령어를 입력하면, 모든 패키지가 저장되어있는 npm registry에서 해당하는 이름의 패키지를 찾아 현재 작업중인 디렉토리에 설치한다.
   • global 옵션없이 패키지를 설치하면, 현재 디렉토리에 해당 패키지가 설치되고, 디렉토리 내부의 파일에서만 패키지를 사용할 수 있다. 
     • 이 때 package.json과 관련한 경고 메세지가 출력된다.  
     • package.json | 모든 node app에 포함되는 파일로, 그 app에 대한 meta data(name, version, descriptions, dependencies...)를 포함하고 있다.
   • global 옵션과 함께 설치한 패키지는, 현재 디렉토리가 아니라 global 모듈이 설치되는 경로에 따로 설치되며, 모듈이 설치된 폴더 밖에서도 해당 패키지를 require할 수 있다.
     • global 옵션 사용 시 노드 모듈의 설치 경로 |  $ npm root -g 
     • 다른 디렉토리에 있는 파일에서도 require 할 수 있으나, 해당 파일을 실행하기 전에  npm link 패키지이름  명령어를 입력해야 한다.

 

// index.js
// 패키지를 배포한 개발자가 export 객체의 프로퍼티를 설정

// app.js 
const jokes = require('give-me-a-joke'); // 파일의 경로가 아니라, 패키지의 이름을 사용
const cowsay = require('cowsay'); // 폴더 외부 패키지

console.log(jokes) // export 객체 확인

jokes.getRandomCNJoke(function (joke) {
  console.log(joke);
});

 

$ npm link cowsay
$ node app.js

package.json

package.json은 node app에 대한 메타 데이터를 담고 있는 파일로, app의 이름이나 버전, 설명, dependency(의존하고 있는 패키지) 등이 포함되어있다. dependency 데이터는 app에 다른 패키지가 설치될 때 마다 업데이트 된다. 

 

패키지가 설치될 때 마다 dependency를 업데이트 해야하는데, 만든 프로젝트에 package.json 파일이 없으면 경고메세지가 출력된다. 이를 방지하기 위해서 프로젝트 폴더를 생성한 뒤에, package.json 파일을 추가해 주어야 한다. 이 때 다음 명령어를 이용하면 package.json의 템플릿을 제공하므로, 현재 작업중인 폴더에 파일을 쉽게 생성할 수 있다. 

 

$ npm init
$ npm init -y

 

+) y 옵션을 이용하면 템플릿에 작성해야 하는 내용을 스킵할 수 있다. 

 

init 명령어를 이용해서 package.json 파일을 작성하면 다음의 일이 발생한다. 

1. ??? entry points | index.js (기본값)
2. 해당 폴더에서 패키지를 설치해도, package.json과 관련된 경고 메세지가 출력되지 않는다.
3. 패키지를 설치할 때 마다 해당 패키지가 dependencies에 기록된다.
   
   • 일반적으로 프로젝트 폴더를 공유할 때, 우리가 필요로 하는 모듈(node_modules 폴더)이 전부 포함된 상태로 공유하지 않는다. 대신 package.json 파일을 이용해서, 프로젝트가 어떤 dependencies를 이용하고 있는지 공유한다. 
   • 어떤 폴더에 package.json 파일이 포함되어 있을 때  $ npm install 을 이용하면, node_modules 폴더를 만들고,  dependencies에 기록되어 있는 패키지를 한번에 설치한 뒤에, 그 폴더 안에 집어넣는다.