Node.js 와 NPM

임채은·2023년 5월 28일
0

js

목록 보기
1/8

01 Node.js

1-1) Node.js 란?

Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다.

Chrom V8 엔진
자바스크립트를 해석하고 동작시켜주는 엔진입니다.

런타임
프로그래밍 언어가 동작하는 환경입니다.


1-2) Node.js 설치

node.js 사이트에 접속하여 최신 LTS 버전을 다운로드받아 설치합니다.
설치후, 명령 프롬포트창에 아래 명령어를 입력하여 설치를 확인합니다.

$ node --version
$ npm --version

혹은

$ node -v
$ npm -v



02 NPM (Node Package Manager)

2-1) NPM 이란?

전세계 개발자들이 만든 다양한 패키지(모듈)들을 관리해주는 프로그램입니다.
npm 명령어를 통해 사용합니다.


2-2) NPM 프로젝트 시작

$ npm init

혹은

$ npm init -y

명령 프롬포트창에 위 명령어를 입력하여 npm 프로젝트를 생성합니다.
npm 프로젝트를 생성하면 package.json 파일이 생성됩니다.

package.json
npm 명령어을 통해 설치된 패키지(모듈)의 의존성을 관리하는 파일입니다.


2-3) NPM 패키지(모듈) 설치

$ npm install 패키지명

명령 프롬포트창에 위 명령어를 입력하면 패키지(모듈)가 설치됩니다.
패키지(모듈)를 설치하면 node_modules 폴더와 package-lock.json 파일이 생성됩니다.

node_modules
외부 패키지(모듈)이 설치된 폴더입니다.

package-lock.json
npm 으로 설치한 패키지(모듈)가 필요로하는 다른 패키지(모듈)의 의존성을 관리하는 파일입니다.

$ npm install 명령어를 실행하면 package.json 파일의 dependencies 항목에 있는 패키지(모듈)들이 설치됩니다.
즉, node_modules 폴더가 생성됩니다.




03 Parcel

3-1) Parcel 이란?

웹 애플리케이션 번들러(Bundler)입니다.

번들러(Bundler)
여러개의 파일을 하나의 파일로 만들어주는 도구입니다.

즉, Parcel 은 웹 애플리케이션을 동작시키기 위해 서로 연관성이 있는 웹 구성 자원(html, css, sass, js, ts, images 등)의 의존성을 묶어 하나의 파일로 만들어주는 도구입니다.
Parcel 을 사용하면 웹을 구성하는 파일들을 최적화하고 압축하여 용량을 적게 할 수 있어 브라우저 혹은 서버에 대한 요청을 줄일 수 있습니다.


3-2) Parcel 설치

명령 프롬포트창에 아래 명령어를 입력하여 parcel 패키지를 설치합니다.

$ npm install parcel --save-dev

혹은

$ npm install parcel -D

--save-dev (-D)
개발용 패키지(모듈)를 설치할 경우 사용하는 옵션으로,
패키지가 package.json 파일의 dependencies가 아닌 devDependencies 에 등록됩니다.
webpack, parcel, sass, js-comparession 과 같이 화면 DOM 조작과 직접적인 연관이 없는 패키지는 개발용으로 설치합니다.


3-3) Parcel 개발서버 실행과 빌드

  • index.html
<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="module" defer src="main.js"></script>
  <script type="module" defer src="main.ts"></script>
</head>

<body>
  Hello World!
</body>

</html>
  • main.js
const jsUser = {
  name: "im-channel",
  age: 28,
};

console.log(`JavaScript User: ${jsUser.name}(${jsUser.age})`);
  • main.ts
interface User {
  name: string;
  age: number;
}

const tsUser: User = {
  name: "im-channel",
  age: 28,
};

console.log(`TypeScript User: ${tsUser.name}(${tsUser.age})`);
  • package.json
{
  "name": "javascript",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "parcel ./index.html",
    "build": "parcel build ./index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.9.1"
  }
}

parcel 은 개발용 패키지이기 때문에 명령 프롬포트창에서 명령어로 실행되지 않습니다. 그래서 package.json 의 script 부분에 명령어를 등록하여 실행해야합니다.

$ npm run dev 명령어를 실행하면 dist 폴더가 생성되면서 개발용 서버가 실행됩니다. dist 폴더에 생성된 파일들은 parcel 을 통해 생성된 것으로 난독화되어 있습니다.
실제 배포용 파일을 만들고 싶다면 $ npm run build 명령어를 실행합니다. 그럼 dist 폴더가 생성되고, 이 폴더에 있는 파일들을 배포에 사용하면 됩니다.




04 SemVer (Semantic Versioning)

SemVer는 버전을 관리하는 형식입니다.
4.17.19 와 같이 버전이 3가지 숫자로 표시됩니다.

major.minor.patch

major
기존 버전과 호환되지 않는 새로운 버전입니다.

minor
기존 버전과 호환되는 기능이 추가된 버전입니다.

patch
기존 버전과 호환되는 버그 및 오타 등이 수정된 버전입니다.

^major.minor.patch

^
major 버전안에서 가장 최신 버전으로 업데이트 가능하다는 것을 말합니다.
즉, minor 와 patch 버전만 언제든지 변경 가능합니다.

~major.minor.patch

~
minor 버전안에서 가장 최신 버저능로 업데이트 가능하다는 것을 말합니다.
즉, patch 버전만 언제든지 변경 가능합니다.

$ npm install 패키지명@버전 명령어를 통해 특정한 버전에 해당하는 패키지를 설치할 수 있습니다.
$ npm update 패키지명 명령어를 사용하면 package.json 파일의 dependencies 항목에 있는 패키지 버전이 최신 버전으로 업데이트됩니다.

만약 최신 버전으로 업데이트하는 것을 방지하고 싶다면, package.json 파일의 dependencies 항목에 있는 패키지 버전 앞에 써져 있는 ^ 혹은 ~ 기호를 제거합니다.

profile
꾸미기를 좋아하는 웹퍼블리셔 취준생입니다 :)

0개의 댓글