[KDT JS] Node.js

Node.js: JS가 동작할 수 있는 웹브라우저와 같은 런타임(프로그래밍 언어가 동작하는 환경)으로,

              Chrome V8 JS 엔진으로 빌드된, 웹페이지를 제작할 컴퓨터를 JS로 제어할 수 있는 JS 런타임

              cf. 웹브라우저에서는 HTML, CSS, JS만 동작한다.

                   Node.js에서 모듈의 도움을 받아 웹 개발을 하고,

                   웹브라우저가 인식할 수 있는 HTML, CSS, JS 형식으로 

                   JS로 작성된 프로그램을 변환하는 환경 또한 Node.js이다.

 

 

 

 

https://nodejs.org/en/

Node.js

 

 

LTS(Long Term Supported) 버전은 장기적으로 안정되고 신뢰도가 높은 지원이 이뤄지는 버전으로, 대부분 사용자에게 권장되는 버전이고, 현재 버전은 최신 기능을 담고 있는 반면 업데이트로 인한 변경사항이 생길 수 있어 실제 웹개발에서는 권장되는 버전은 아니다. (연습이나 공부시에는 ok)

 

 

 

필요한 버전이 여러 개일 수 있으므로, 원하는 버전으로 바꿔 사용&관리할 수 있는 노드버전매니저 NVM을 설치해 사용하는 것을 권장한다 !

 

 

운영체제가 windows라면 

https://github.com/coreybutler/nvm-windows

GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go.

 

그게 아니라면 

https://github.com/nvm-sh/nvm

 

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

 

 

 

윈도우즈 :

 

 

 

 

그 외 :

 

 

 

 

 

윈도우즈 :

 

 

zip 파일을 클릭해 실행하고 next 버튼으로 계속 체크해 설치를 마친다.

 

 

 

 

NVM 설치를 위해 위 박스의 내용을 복사해 VSCode 터미널을 열어 붙여넣기하고 엔터를 눌러 실행시킨다.

 

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash

 

 

<실행 후 화면>

 

 

 

NVM 버전을 확인하고자 할 때는,

nvm --version

 

설치가 잘 되었다면 무슨 버전인지 다음과 같은 화면이 뜬다.

 

윈도우즈 :

 

 

 

 

그 외 :

 

 

 

 

 

 

이 이후의 NVM 사용법은 윈도우즈와 맥OS 동일하다.

 

 

 

설치되어있는 Node.js 버전을 확인할 때,

nvm ls

 

 

<nvm ls 실행 결과>

 

 

 

 

 

추가로 다른 Node.js 버전을 설치하고 싶을 때, 

nvm install (설치 원하는 버전 작성)   

 

 

<nvm install 노드제이에스 버전 실행 결과>

 

 

 

<다른 버전 설치후 nvm ls 실행 결과>

 

 

 

 

 

 

여러가지 Node.js 버전 중에 사용원하는 버전을 지정할 때,

nvm use (사용원하는 버전)

 

 

<nvm use (사용원하는 버전) 실행 결과>

명령 입력하면 앱이 디바이스를 바꾸기 원하는지 메세지가 뜨고, 예라고 클릭

 

 

<nvm ls로 사용원하는 버전으로 변경되어있는지 확인>

 

 

 

 

 

 

Node.js를 설치하게 되면 터미널 창에서 node라는 명령어를 사용할 수 있게 된다.

 

 

설치되어있는 Node.js의 버전을 확인할 때,

node --version

 

아까 nvm로 사용하겠다고 지정한 Node.js 버전이 확인되는 것을 볼 수 있다 !

 

 

 

 

 

사용하지 않을 Node.js 버전을 삭제할 때,

nvm uninstall (삭제하고자 하는 Node.js 버전)

 

 

 

 

 

 

 

 

더 많은 nvm 명령어를 알아보고 싶을 때,

nvm --help

 

 

 

 

 

 

 

NPM : Node.js 설치시 자동으로 같이 설치되며, 개발자들이 만든 다양한 기능(패키지, 모듈)들을 설치 & 관리해준다.

 

 

 

 

 

(웹 개발) 프로젝트를 처음 시작할 때, 

npm init -y

 

옵션 -y는 init시 나오는 질문 모두에 yes로 대답하겠다는 의미

 

 

<npm init -y 실행결과>

 

실행하고 나면, 왼편에  package.json 파일이 생성된 것을 볼 수 있다. 

 

 

 

package.json 파일을 열어보면 다음과 같다.

 

- name : 현재 프로젝트를 진행하고 있는 폴더명이 값

- version : 현재 진행하고 있는 프로젝트의 버전

- description : 현재 프로젝트에 관한 설명을 작성해 넣을 수 있음

- main : 추후 npm에 이 프로젝트를 패키지로 업로드 할 때 필요한 옵션, 그럴 계획이 없다면 삭제해도 무방.

- scripts : 현 프로젝트에서 사용할 수 있는 script 명령들을 간단하게 작성해 사용하게 할 수 있음

- keywords : 현 프로젝트와 관련된 키워드를 작성해 넣을 수 있음

- author : 소유자를 명시할 수 있음

- license : 현 프로젝트의 라이센스

 

 

 

 

 

 

npm 패키지  parcel에 대해 자세히 알고 싶다면,

 

https://ko.parceljs.org/

Parcel – The zero configuration build tool for the web.

 

 

 

 

 

npm을 통해 parcel 패키지를 설치할 때, 

npm install(혹은 i) -D parcel(패키지 이름)

 

 

 

 

 

 

패키지를 설치하고 나면 왼편 폴더 리스트에서 node_modules 폴더와 package-lock.json 파일이 새로 생성된 것을 볼 수 있다. node_modules 폴더를 열어보면 많은 parcel 패키지가 설치되 들어가 있는 것을 확인할 수 있다 !

cf. -D(플래그 D나 --save-dev)는 개발용 의존성 패키지를 설치하고자 할 때 붙이는 옵션 명령어이다. 

     개발용이란, 개발할 때만 필요한 패키지이고 웹브라우저에서 이 프로젝트가 동작할 때는 필요하지 않다는 의미이다.

 

 

 

cf. 노드 모듈즈 폴더 안에 다른 폴더들도 들어있는데 이것들도 패키지들이고, 파슬 패키지가 만들어지면서 파슬 패키지가 의존하고 있는 다른 패키지들도 같이 생성되어 노드 모듈즈 폴더 안으로 들어온다.

 

 

parce 패키지를 설치한 후 다시 package.json을 열어보면 아래와 같이  devDependencies 속성에 parcel 패키지가 값으로 들어와 있는 게 보인다.

 

 

 

 

위와 같이 설치한 패키지들의 내역이 devDepencies에 정보가 저장되고, 패키지의 이름과 함께 그 패키지의 버전을 확인할 수 있다. 이러한 정보는 package.json 파일에 담겨있는 것이다 !

 

 

 

 

 

 

lodash(low dash에서 나온 이름)

: JS를 확장해 편리하게 코드를 작성하거나 웹 표준에 효율적으로 맞출 수 있게 해주는 npm 패키지,

  보통은 array, collection, date 등의 값을 쉽게 다룰 수 있게 하는 메소드들을 가지고 있다.

  _라는 기호를 이용해 웹 브라우저에서 지원하지 않는 성능이 보장되어 있는 다양한 메소드가 내장되어 있다.

 

 

https://lodash.com/docs/4.17.15

Lodash Documentation

 

 

 

lodash 패키지를 설치할 때,

npm install(또는 i) lodash

 

 

 

다시 package.json 파일을 확인해보면,

 

 

 

이번에는 패키지가 dependencies의 내역으로 추가되어 있는 것을 볼 수 있다.

cf. 아무런 옵션을 붙이지 않고 일반 의존성 설치로 패키지를 설치할 때는 이 프로젝트(프로덕트)를 개발할 때나 웹브라우저에서 동작할 때나 사용되는 패키지일 경우이다.

 

 

 

 

!! 혹 이렇게 패키지 설치시 같이 생성되었던 노드 모듈즈 폴더를 삭제한다 하더라도, 

이 package.json 파일의 패키지 내역이 존재하기 때문에, 터미널 창에서 다시 npm install(또는 i)를 입력해 명령어를 실행시키면 지워졌던 패키지 묶음 폴더였다 노드 모듈즈 폴더가 다시 그 내역을 근거로 생성되고 생성할 수 있다 !

cf. 또한 package-lock.json 파일에는 프로젝트가 직접적으로 사용하는 패키지들을 내부적으로 구성하는 또다른 패키지들의 내용과 정보를 담고 있게 된다. 이는 잠겨있고(lock) 직접 설치한 패키지에 딸려 자동으로 관리되는 패키지들의 내역이다.  !! 두 파일은 지워지지 않도록 주의 !!

 

 

 

 

 

 

 

parcel이라는 패키지로 로컬 컴퓨터에서 개발용 서버를 열어 접근하고 개발하는 프로젝트를 브라우저에서 확인하고자 할 때, parcel 패키지는 개발용 의존성 설치를 했기 때문에 parcel 명령어를 터미널에서 직접적으로 사용할 수가 없다. 즉 개발할 때만 사용한다고 설치했기 때문에 의미가 전역적인 공간인 터미널에서 바로 parcel 명령어를 쓸 수 없고 package.json 파일의 scripts라는 항목에서 자기가 지정한 (해당 프로젝트에서만 로 동작하는) script 명령어로 터미널에서 사용하는 것으로 가능하다 !!

 

 

 

 

npm의 dev(프로젝트 내에서 설정한 script 명령어)를 실행시키고자 할 때,

npm run dev

 

 

 

cf. 통상적으로 dev는 로컬환경에서 개발서버를 열겠다는 의미로 쓰이는 명령어

 

※ 위 상태의 터미널에서 새로운 명령어를 넣고 싶으면, crtl + c를 누르면 빠져 나와 명령어를 입력할 수 있게 된다 !