[Node JS] NVM, NPM + 예제 (1)

Node JS란

chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임

엔진 = JavaScript언어를 해석하고 문법을 읽는 프로그램

런타임 = 프로그래밍 언어가 동작하는 환경

             Node JS는 JS언어가 동작하는 환경인 것.

 

JavaScript 문법을 통해 제어가능한 환경

① 웹브라우저를 제어하는 내용

② 컴퓨터 환경을 제어하는 내용

 

Node JS로 여러 모듈을 함께 이용하여

HTML, CSS, JS 문서 만들어서 웹 개발

 

 

 

NVM
(NodeJS Version Manager)

Node JS 버전 매니저 프로그램

하나의 프로젝트를 여러명이 만들기 때문에, node 버전이 프로젝트에 영향 미칠 수 있음

https://nodejs.org/en/blog/vulnerability/july-2021-security-releases-2/
현재 업데이트되어 사용가능한 node  js 버전 확인 가능한 링크

 

터미널에서

① nvm install (버전숫자) --> 짝수버전이 안정적.

② nvm use (버전숫자)     --> 현재 사용하는 node js 버전 반영

③ nvm ls                     --> 설치된 버전과 선택된 버전 확인 가능

④ 이제 node라는 명령어 사용가능

   1) node --version         --> 현재 설치된 node js 버전 확인 가능

⑤ nvm uninstall (버전숫자)   --> 필요없는 node js 버전 삭제

⑥ nvm help                      --> nvm을 통해 활용할 수 있는 명령어 확인 가능

 

 

 

 

NPM
(NodeJS Package Manager)

전세계 개발자들의 만든 다양한 기능(패키지, 모듈)들을 관리 - 생태계

$npm install XXX (생태계에서 모듈다운로드 받는 명령어, 약 100만개 이상의 패키지 모듈이 올라와 있음)

 

Lodash

GSAP

SWIPER

이런 플러그인 기능 패키지를 원시적으로 연결하지 않고, npm으로 설치

 

장 : 관리 효율 증가, 손쉬운 기능 고도화

단 : 학습 난도 증가, 구성 복잡

 

(1) TEST 

① 명령어 'npm init -y' 입력 시 'package.json 파일 생성되고, 편집 가능.

② name = 파일명, 바꿔도 됨
    main 옵션 = 우리가 직접적으로 npm에 업로드할 수 있는 패키지를 만들 때 필요.

                     온라인 웹 만들때는 없어도 무관.

    scripts = 프로젝트에서 사용할 명령들을 미리 명시해두는 곳.

    keywords = 프로젝트 정보, 소유자, 라이센스 등 주요 파일종류 작성해도됨

    

③ npm install parcel-bundler -D 입력, 아래 파일과 폴더들 생김.

   'node_modules' 하위 폴더&파일들이 패키지라고 보면 됨.
   parcel-bundler뿐만 아니라 연결해 사용할 수 있는 것들도 많이 포함되어있음.

   먼저 생성되었던 package.json 폴더에 'devDependencies' 항목 하위로 'parcel-bundler' 추가된 것 확인 가능

        업데이트 반영되는 데 시간 좀 걸림

 

④ 'npm install lodash' 입력해서 추가 모듈 설치 (-D플래그 입력 안함)

    dependencies 'lodash'생김.

    

--> devDependencies에 대한 추가 설명을 위해 'node_modules' 폴더 삭제

⑥ 'npm install' 또는 'npm i' (줄임말) 입력하면, devDependencies/dependencies 하위 모듈들이 한번에 다운받아짐,

    package-lock.json은 내가 진행한 내역에 대한 자동 관리 가능하게 해주는 파일이기 때문에,
    지워지면 안되는 파일,

 

 

 

 

※ npm install할 때 플래그 '-D' 붙이는 이유

   : 개발용으로 의존성 패키지 설치하는 것.

     >> 웹브라우저에서 직접 실행안됨.

          개발할 때만 동작됨

 

  : 비개발용, 일반 의존성 패키지 
    >> 웹브라우저에서 직접 실행 됨. (개발용 외도 보임)

 

 

 

 

NodeJS + NVM NPM 활용해서 개발 서버 실행과 빌드(예제)
   (1) parcel 기능 사용하기

1. 위에 최종파일에 index. html 제작

2. head에 script src="main.js" 반영, 자바스크립트 파일도 생성.

 

open with live server 말고 터미널에서 확인 할 것

이 때 parcel 기능 활용

'parcel index.html'
로컬환경에서 개발용 서버를 열고, 이를 내 데스크톱 환경 화면에 열겠다, 라는 명령임.

 

 

index.html의 터미널

① package.json 에 scripts 태그에서 기존 명시된 test 뭐시기 지워주기,

② "dev" : "parcel index.html" 작성해주기

{
  "name": "npmtest",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "parcel index.html"
  },
  "keywords": [ ],
  "author": "",
  "license": "ISC"
  "devDependencies": {
     "parcel-bundler": "^1.12.4"
  },
 "dependencies": {
     "lodash": ^4.17.21"
  }

 

개발서버 열어주는 동작 실행가능하나,

parcel-bundler는 프로젝트 내에만 설치되어있기 때문에, 로컬에 설치되어있지 않음.

이를 로컬에서 실행되게 하는 것이 script의 'dev' 태그

 

③ 터미널에 npm run dev 입력, 
  'Server running at http://localhost:1234 ' 링크 누르면 확인가능.

 

   

(2) lodash 기능 사용하기 : 'hello world' camelCase방식으로 로그 띄우기 js

1. main.js 파일에서 'import _ from 'lodash'를 첫 줄에 입력.

언더바 (_)라는 기호에 lodash 가져온다는 것 의미.

import _ from 'lodash';     
-> lodash 전후에 특수기호 입력 없음 = node modules 폴더에서 가져온다는 것 의미

console.log('hello world');

2. node modules ->lodash 패키지 폴더 -> package.json 파일에 명시된

   "main"옵션의 "lodash.js"를 가져와 사용한다는 것 의미.
   main = 패키지로 활용할때 의미있는 태그. 

 

3. main.js 돌아와서 'hello wordl'를 camelCase방식으로 띄우는 console.log 추가

import _ from 'lodash'

console.log('hello world');
console.log(_.camelCase('hello world'));

 

 

(2) parcel 기능 활용

①. package.json 파일에서 아래처럼 추가

{
  "name": "npmtest",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"  --> build라는 태그 추가해서 index.html반영하면 개발용 서버 말고, 실제 고객이 이용하는 서버에도 반영하도록 함
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.12.5"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

② 사용자가 보는 용도의 결과물 출력할 것 (터미널)

    Ctrl C 누르면 개발자 확인 서버 초기화됨

③ npm run build 터미널 스크립트 입력   : 코드가 다닥다닥 붙어져서 난독화됨 (웹브라우저 동작시키는 용도여서)