오늘은 앨리스코딩 부트캠프에서 배운 node.js와 모듈관련하여 제가 이해하고 공부한점을 기록으로 남기려 합니다.
npm
사전적의미: 풀어서 말하면 NodePackageManager로 node.js프로젝트를 관리하는 필수적인 도구 입니다.
NPM 온라인저장소
수많은 오픈소스 라이브러리와 도구들이 업로드되는 저장소 입니다.
필요한 라이브러리나 도구를 손쉽게 검색이 가능하며, node.js의 인기로 엄청난 생태계를 보유하고 있습니다.
커맨드라인도구
프로젝트 관리를 위한 다양한 명령어를 제공합니다.
1.저장소에서 라이브러리,도구 설치
2. 프로젝트 설정 / 관리
3. 프로젝트 의존성 관리
npm을 사용하여 프로젝트 생성하기
명령어
$npminit프로젝트디렉터리를생성하고,해당 디렉터리안에서 npminit명령어를 사용하면 몇번의 질문을 통해package.json이라는 파일을 만들어주고 이디렉터리는 Node.js 프로젝트가 됩니다.
package.json
프로젝트관련 정보들이 저장되는 파일이 파일을 직접 수정 하거나 npm명령어를 사용하여 프로젝트 정보를 수정 할수있습니다.
의존성 관리하기
프로젝트내에서 사용하는 라이브러리를 관리 하는 방법으로,프로젝트가 실행되기 위해 라이브러리에 의존하기 때문에 이러한 라이브러리들을 dependency(의존성) 라고 이야기합니다.
라이브러리란?
특정기능을 수행하는 코드의 묶음으로, 복잡한 기능을 직접 작성 하지않고, 다른사람이 구현한것을 사용하는 방법입니다. node.js에서는 패키지라 부릅니다.
npm install
npminstall 명령어를 통해 프로젝트 의존성을 관리 할수 있습니다. npm install 명령어는 사용방법에 따라 여러용도로 사용가능 합니다.
프로젝트에의존성추가하기
$npm install [package-name]필요한 패키지를 프로젝트에 추가 할수있습니다. 추가된 패키지는 package.json의 dependencies안에추가되며,node_modules디렉터리에 저장 됩니다.
dependencies와 devDependencies
$npminstall [package-name] --save-devnpm은 개발용 의존성을 분리하여 관리 할수있습니다. 개발용 의존성이란 배포전까지만 사용하는 의존성 입니다. --save-dev옵션을 이용하면 개발용 의존성을 추가 할수 있습니다. 개발용 의존성은package.json의 devDependencies에추가됩니다.
package-lock.json
프로젝트에 의존성을 추가하면 package-lock.json이라는 파일이 생성 됩니다. 프로젝트에 의존성을 추가하면 자동으로 ‘^최신버전’으로 추가가 되는데,의존성버전이 갑자기 변경되지 않도록, 설치된 버전을 고정하는 역할을 합니다.
의존성 버전 표기법
npminstall [package-name]@[version]~1.13.0-1.13.x 버전설치
^1.13.0-1.x.x 버전설치,가장왼쪽의0이아닌버전을고정.
0.13.0–0.13.0 버전만설치
개발용 의존성을 제외하고 내려받기
프로젝트를 배포할때에는 개발용 의존성을 같이 포함할 필요가 없습니다. 따라서 package.json의dependencies만 node_modules에 내려받습니다.
로컬패키지
package.json에 선언되어 있고, node_modules에 저장된 패키지 입니다.
전역패키지
npminstall -g 를 통해 내려받아, 전역패키지 저장소에 저장된 패키지 입니다.
의존성삭제하기
$npm remove[package-name]의존성패키지를 삭제 할수 있습니다. package.json의 dependencies와 devDependencies에서 삭제하고 node_modules에서도 삭제 됩니다.
NPX 란?
npm 패키지를 설치하지 않고 사용할수있게 해주는도구 입니다. 프로젝트에 추가하거나 전역패키지로추가하지않고, npx를 이용하여 바로 실행할수있습니다. ex)npx create-react-app .
모듈이란?
모듈은 코드를 분리하기 위한 방법 입니다. 패키지는 모듈의 모음입니다. npm 패키지들은 많은 모듈을 포함하고 있는 코드모음 입니다.
common js와 es module
Node.js는 독자적인 방식을 통해 모듈을 지원하고 있었는데요. 그 방식이 common.js 입니다.
es6 문법이 등장하면서 es module 방식이 탄생하였고, common.js를 사용하는 개발자도 있고, es module 방식을 사용하는 개발자도 있기 때문에 둘다 공부하고 있어야 됩니다.
commonjs는 module.exports와 require로 모듈을 만들고 사용 하고 있고, ES Module은export와import로 모듈을 만들고 사용하고 있습니다.
CommonJS (CJS)
// add.js
module.exports.add = (x, y) => x + y;
// main.js
const { add } = require('./add');
add(1, 2);ECMAScript Modules (ESM)
// add.js
export function add(x, y) {
return x + y
}
// main.js
import { add } from './add.js';
add(1, 2);CJS module loader는 동기적으로 작동하고, ESM module loader는 비동기적으로 작동합니다.
추가적으로 ESM은 Top-level Await을 지원하기 때문에 비동기적으로 동작합니다. 따라서 ESM에서 CJS를 import 할 수는 있지만, CJS에서 ESM을 require 할 수는 없습니다. 왜냐하면 CJS는 Top-level Await을 지원하지 않기 때문입니다. 이 외에도 두 Module System은 기본적으로 동작이 다릅니다. 따라서 두 Module System은 서로 호환되기 어렵습니다.
